{ partRefs.current[index] = el; }}
+ ref={(el) => {
+ partRefs.current[index] = el;
+ }}
className="p-1 rounded-3xl my-4"
style={{
background:
@@ -245,17 +263,36 @@ console.log(audios , duaParts);
>
{item.text && (
-
+
{colorizeVowels(item.text)}
)}
{item.local_alpha && (
-
+
{item.local_alpha}
)}
{item.translation && (
-
{item.translation}
+
+ {item.translation}
+
)}
{item.description && (
@@ -265,14 +302,18 @@ console.log(audios , duaParts);
{/* Play button to start audio from specific time */}
{!!audios.length && (
-
-
+
)}
diff --git a/src/pages/last-reads.tsx b/src/pages/last-reads.tsx
index 4af15b1..ebacca1 100644
--- a/src/pages/last-reads.tsx
+++ b/src/pages/last-reads.tsx
@@ -32,7 +32,7 @@ const LastReads = () => {
>
{lastDuas?.map((dua: Dua) => (
openDua(dua)}
>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c3d7b18..696d974 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -14,13 +14,6 @@
font-display: swap;
src: url('/public/fonts/KFGQPC Uthman Taha Naskh Regular.ttf') format('truetype'); /* Correct file format */
}
- @font-face {
- font-family: 'Uthmantaha'; /* Give a unique and clear name to your custom font */
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: url('/public/fonts/KFGQPC Uthman Taha Naskh Regular.ttf') format('truetype'); /* Correct file format */
- }
/* Apply the custom font globally */
body {
diff --git a/src/utils/motion/fade-in-left.ts b/src/utils/motion/fade-in-left.ts
new file mode 100644
index 0000000..c2b5a4d
--- /dev/null
+++ b/src/utils/motion/fade-in-left.ts
@@ -0,0 +1,18 @@
+export function fadeInLeft (duration:number = 0.3) {
+ return {
+ from: {
+ left: '-100%',
+ transition: {
+ type: 'easeInOut',
+ duration: duration,
+ }
+ },
+ to: {
+ left: 0,
+ transition: {
+ type: 'easeInOut',
+ duration: duration,
+ }
+ },
+ }
+}
\ No newline at end of file
diff --git a/src/utils/motion/fade-in-out.ts b/src/utils/motion/fade-in-out.ts
new file mode 100644
index 0000000..968d0ff
--- /dev/null
+++ b/src/utils/motion/fade-in-out.ts
@@ -0,0 +1,18 @@
+export function fadeInOut (duration:number = 0.2) {
+ return {
+ from: {
+ opacity: 0,
+ transition: {
+ type: 'easeInOut',
+ duration: duration,
+ }
+ },
+ to: {
+ opacity: 1,
+ transition: {
+ type: 'easeInOut',
+ duration: duration,
+ }
+ },
+ }
+}
\ No newline at end of file
diff --git a/src/utils/motion/fade-in-right.ts b/src/utils/motion/fade-in-right.ts
new file mode 100644
index 0000000..5e62022
--- /dev/null
+++ b/src/utils/motion/fade-in-right.ts
@@ -0,0 +1,18 @@
+export function fadeInRight (duration:number = 0.3) {
+ return {
+ from: {
+ right: '-100%',
+ transition: {
+ type: 'easeInOut',
+ duration: duration,
+ }
+ },
+ to: {
+ right: 0,
+ transition: {
+ type: 'easeInOut',
+ duration: duration,
+ }
+ },
+ }
+}
\ No newline at end of file
diff --git a/src/utils/motion/fade-in-top.ts b/src/utils/motion/fade-in-top.ts
new file mode 100644
index 0000000..7c76a93
--- /dev/null
+++ b/src/utils/motion/fade-in-top.ts
@@ -0,0 +1,22 @@
+export function fadeInTop (duration:number = 0.5) {
+ return {
+ from: {
+ position: 'relative',
+ top: "50px",
+ opacity: 0,
+ transition: {
+ type: 'easeInOut',
+ duration: duration,
+ }
+ },
+ to: {
+ position: 'relative',
+ top: "0",
+ opacity: 1,
+ transition: {
+ type: 'easeInOut',
+ duration: duration,
+ }
+ },
+ }
+}
\ No newline at end of file
diff --git a/src/utils/motion/height-collapse.ts b/src/utils/motion/height-collapse.ts
new file mode 100644
index 0000000..1a680e0
--- /dev/null
+++ b/src/utils/motion/height-collapse.ts
@@ -0,0 +1,18 @@
+export function heightCollapse() {
+ return {
+ from: {
+ opacity: 0,
+ height: 0,
+ transition: {
+ ease: [0.04, 0.62, 0.23, 0.98],
+ },
+ },
+ to: {
+ opacity: 1,
+ height: "auto",
+ transition: {
+ ease: [0.04, 0.62, 0.23, 0.98],
+ },
+ },
+ };
+}
diff --git a/src/utils/motion/zoom-out-in.ts b/src/utils/motion/zoom-out-in.ts
new file mode 100644
index 0000000..f1de4e3
--- /dev/null
+++ b/src/utils/motion/zoom-out-in.ts
@@ -0,0 +1,18 @@
+export function zoomOutIn (duration:number = 0.2) {
+ return {
+ from: {
+ scale: 1.1,
+ transition: {
+ type: 'easeOut',
+ duration: duration,
+ }
+ },
+ to: {
+ scale: 1,
+ transition: {
+ type: 'easeOut',
+ duration: duration,
+ }
+ },
+ }
+}
\ No newline at end of file
diff --git a/src/utils/use-click-outside.ts b/src/utils/use-click-outside.ts
new file mode 100644
index 0000000..7bdde2c
--- /dev/null
+++ b/src/utils/use-click-outside.ts
@@ -0,0 +1,27 @@
+import { useEffect, RefObject } from 'react'
+
+type Event = MouseEvent | TouchEvent
+
+export default function useOnClickOutside(
+ ref: RefObject,
+ handler: (event: Event) => void,
+) {
+ useEffect(
+ () => {
+ const listener = (event: Event) => {
+ const el = ref?.current
+ if (!el || el.contains((event?.target as Node) || null)) {
+ return
+ }
+ handler(event);
+ };
+ document.addEventListener('mousedown', listener);
+ document.addEventListener('touchstart', listener);
+ return () => {
+ document.removeEventListener('mousedown', listener);
+ document.removeEventListener('touchstart', listener);
+ };
+ },
+ [ref, handler]
+ );
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 109807b..e23b3ba 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,6 +8,13 @@ export default {
],
theme: {
extend: {
+ boxShadow: {
+ 'header': '2px -10px 129px 35px #F4846F',
+ 'inner-header': '2px -20px 15px 30px rgba(244,132,111,1);',
+ },
+ fontFamily: {
+ Calibri : ["Calibri"]
+ } ,
colors: {
background: "var(--background)",
foreground: "var(--foreground)",