Merge pull request #10 from Tariha/v2

add contribution button

Dockerfile

@@ -8,4 +8,4 @@ RUN npm install
 
 COPY . .
 
-RUN npm run build
+RUN npm run dev

app/layout.tsx

@@ -15,6 +15,7 @@ import { Toaster } from "@/components/ui/toaster"
 import AudioPlayer from "@/components/AudioPlayer"
 import Footer from "@/components/Footer"
 import Navbar from "@/components/Navbar"
+import RamadanButton from "@/components/Navbar/RamadanButton"
 import { ThemeProvider } from "@/components/theme-provider"
 
 export const metadata: Metadata = {
@@ -92,6 +93,9 @@ export default async function RootLayout({ children }: RootLayoutProps) {
         >
           <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
             <div className="relative flex min-h-screen flex-col pb-12">
+              <div className="flex justify-center py-2 md:hidden md:py-0">
+                <RamadanButton />
+              </div>
               <Navbar />
               <div className="flex-1">{children}</div>
               <Footer />

app/xassida/components/Verses/VerseAndTranslation.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { useMemo } from "react"
 import { readerSelector } from "@/zustand/slices/reader"
 import { useStore } from "@/zustand/store"
 import { Play } from "lucide-react"
@@ -19,11 +19,17 @@ interface Props {
 }
 
 const VerseAndTranslation: React.FC<Props> = ({ verse, font, last, more }) => {
-  const { translation, translationFontScale } = useStore(readerSelector)
+  const { translation, translationFontScale, translationLang } =
+    useStore(readerSelector)
 
   const elemRef = React.useRef(null)
   const ref = useObserveElement(more)
 
+  const getTranslation = useMemo(() => {
+    const trans = verse.translations.filter((t) => t.lang === translationLang)
+    return trans?.[0]
+  }, [translationLang, verse.translations])
+
   React.useEffect(() => {
     ref(elemRef.current)
   }, [ref])
@@ -43,7 +49,7 @@ const VerseAndTranslation: React.FC<Props> = ({ verse, font, last, more }) => {
             className="mt-4 font-sans"
             style={{ fontSize: translationFontScale }}
           >
-            {verse.translations?.[0]?.text}
+            {getTranslation?.text}
           </p>
         )}
       </div>

components/Navbar/NavigationDrawer/DonationCard.tsx

@@ -20,15 +20,15 @@ const DonationCard = () => (
       </p>
     </CardContent>
     <CardFooter>
-      <Button size="lg" className="text-md bg-vert hover:bg-vert/90">
-        <a
-          href="https://koparexpress.com/apps/collectes/r830jt9qe"
-          target="_blank"
-          rel="noreferrer"
-        >
+      <a
+        href="https://koparexpress.com/apps/collectes/r830jt9qe"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <Button size="lg" className="text-md bg-vert hover:bg-vert/90">
           Contribuer
-        </a>
-      </Button>
+        </Button>
+      </a>
     </CardFooter>
   </Card>
 )

components/Navbar/RamadanButton.tsx

@@ -0,0 +1,21 @@
+import { MoonStar } from "lucide-react"
+
+const RamadanButton = () => {
+  return (
+    <div className="flex items-center space-x-2 text-sm">
+      <MoonStar className="text-foreground" />
+      <span>Supportez Xassida.sn en ce Ramadan</span>
+      <a
+        href="https://koparexpress.com/apps/collectes/r830jt9qe"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <span className="rounded-sm bg-vert px-3 py-2 text-xs text-white hover:bg-vert/90">
+          Contribuer
+        </span>
+      </a>
+    </div>
+  )
+}
+
+export default RamadanButton

components/Navbar/index.tsx

@@ -15,6 +15,7 @@ import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"
 import Command from "@/components/Command"
 
 import NavigationDrawer from "./NavigationDrawer"
+import RamadanButton from "./RamadanButton"
 import SettingDrawer from "./SettingDrawer"
 import { UserAccount } from "./UserAccount"
 
@@ -49,6 +50,9 @@ const Navbar = () => {
           <h2 className="font-keania">Xassida.sn</h2>
         </Link>
       </div>
+      <div className="hidden md:block">
+        <RamadanButton />
+      </div>
       <div className="flex items-center space-x-4 text-xl font-bold">
         {user && <UserAccount user={user} />}
         <a