fixed ReciterCard ui bug

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 AudioListSheet from "@/components/ReciterList/AudioListSheet"
 import { ThemeProvider } from "@/components/theme-provider"
 
 import { NextAuthProvider } from "./provider"

components/AudioList/AudioCard.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { usePathname } from "next/navigation"
 import { Audio } from "@/types"
 import { playerStore } from "@/zustand/playerStore"

components/ReciterList/AudioListSheet.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react"
 import { Reciter } from "@/types"
 
 import { ScrollArea } from "@/components/ui/scroll-area"
@@ -7,19 +8,23 @@ import {
   SheetDescription,
   SheetHeader,
   SheetTitle,
-  SheetTrigger,
 } from "@/components/ui/sheet"
 import AudioList from "@/components/AudioList"
 import InfiniteList from "@/components/InfiniteList"
 
+import ReciterCard from "./ReciterCard"
+
 interface Props extends React.PropsWithChildren {
   reciter: Reciter
 }
 
 const AudioListSheet: React.FC<Props> = ({ children, reciter }) => {
+  const [open, setOpen] = useState<boolean>(false)
   return (
-    <Sheet>
-      <SheetTrigger>{children}</SheetTrigger>
+    <Sheet open={open} onOpenChange={setOpen}>
+      <div>
+        <ReciterCard setOpen={() => setOpen(true)} data={reciter} />
+      </div>
       <SheetContent
         autoFocus={false}
         className="h-1/2 rounded-t-lg"

components/ReciterList/ReciterCard.tsx

@@ -1,4 +1,3 @@
-import path from "path"
 import { useState } from "react"
 import { usePathname } from "next/navigation"
 import { Author, Reciter } from "@/types"
@@ -26,10 +25,10 @@ import ReciterModalForm from "@/app/(admin)/dashboard/reciters/components/Recita
 
 interface Props {
   data: Author | Reciter
-  link?: string
+  setOpen?: () => void
 }
 
-const ReciterCard: React.FC<Props> = ({ data, link = "author" }) => {
+const ReciterCard: React.FC<Props> = ({ data, setOpen }) => {
   const pathname = usePathname()
   return (
     <Card className="max-h-18 group relative cursor-pointer border-gray-500 bg-transparent ring-[#2ca4ab] hover:border-0 hover:ring-1">
@@ -38,7 +37,7 @@ const ReciterCard: React.FC<Props> = ({ data, link = "author" }) => {
           <ReciterCardMenu data={data} />
         </div>
       )}
-      <CardHeader className="p-3">
+      <CardHeader onClick={setOpen} className="p-3">
         <CardTitle className="flex items-center justify-center">
           <Avatar className="h-20 w-20 lg:h-32 lg:w-32">
             <AvatarImage src={data.picture} />
@@ -76,7 +75,6 @@ const ReciterCardMenu: React.FC<Props> = ({ data }) => {
         setOpen(false)
       })
       .catch((err) => {
-        console.log(err)
         return toast({
           title: "Quelque chose s'est mal passé",
           description: "",

components/ReciterList/index.tsx

@@ -1,22 +1,21 @@
 import { Reciter } from "@/types"
 
-import AuthorCard from "../AuthorList/AuthorCard"
 import AudioListSheet from "./AudioListSheet"
 import ReciterCard from "./ReciterCard"
 
 interface ReciterListProps {
   data: Reciter[]
 }
 
-const ReciterList = ({ data }: ReciterListProps) => (
-  <div className="grid grid-cols-2 gap-4 overflow-x-scroll px-1 py-2 scrollbar-hide sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6 lg:px-2">
-    {data &&
-      data.map((reciter) => (
-        <AudioListSheet key={reciter.id} reciter={reciter}>
-          <ReciterCard data={reciter} key={reciter.id} />
-        </AudioListSheet>
-      ))}
-  </div>
-)
+const ReciterList = ({ data }: ReciterListProps) => {
+  return (
+    <div className="grid grid-cols-2 gap-4 overflow-x-scroll px-1 py-2 scrollbar-hide sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6 lg:px-2">
+      {data &&
+        data.map((reciter) => (
+          <AudioListSheet reciter={reciter} key={reciter.id} />
+        ))}
+    </div>
+  )
+}
 
 export default ReciterList

zustand/store.js

@@ -14,7 +14,7 @@ export const useStore = create(
       ...favoriteSlice(...a),
       ...historySlice(...a),
       ...navbarSlice(...a),
-      ...mutatorSlice(...a)
+      ...mutatorSlice(...a),
     }),
     {
       name: "xassida-app",