feat(app): embed drawer with zustand

package.json

@@ -64,7 +64,8 @@
         "tailwindcss": "3.3.5",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "5.2.2",
-        "vaul": "^0.7.9"
+        "vaul": "^0.7.9",
+        "zustand": "^4.5.0"
     },
     "devDependencies": {
         "@changesets/cli": "^2.27.1",

src/components/StudyMaterial.tsx

@@ -48,7 +48,7 @@ const StudyMaterial = ({
         defaultValue: [],
     });
 
-    const [embed, setEmbed] = useEmbed();
+    const embed = useEmbed();
 
     const addFavorite = (materialId: string) => {
         setFavorites((current) => {
@@ -79,10 +79,10 @@ const StudyMaterial = ({
         if (download) {
             return DownloadFile(d.id);
         }
-        return setEmbed({
+        return embed.onOpen({
             embedLink: d.webViewLink.slice(0, -17) + "preview",
             name: d.name.slice(0, -4),
-            isOpen: true,
+            embedId: d.id,
         });
     };
 

src/components/modals/embed-modal.tsx

@@ -4,19 +4,29 @@ import { useEmbed } from "@/hooks/use-embed";
 import { useMediaQuery } from "@mantine/hooks";
 import { FC } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "../ui/drawer";
 
 interface EmbedModalProps {}
 
 const EmbedModal: FC<EmbedModalProps> = ({}) => {
-    const [embed, setEmbed] = useEmbed();
+    const embed = useEmbed();
     const isDesktop = useMediaQuery("(min-width: 768px)");
 
-    const closeEmbed = () => {
-        setEmbed({ embedLink: "", name: "", isOpen: false });
-    };
+    if (!isDesktop) {
+        return (
+            <Drawer open={embed.isOpen} onClose={embed.onClose}>
+                <DrawerContent>
+                    <DrawerHeader>
+                        <DrawerTitle>{embed.name}</DrawerTitle>
+                    </DrawerHeader>
+                    <Viewer />
+                </DrawerContent>
+            </Drawer>
+        );
+    }
 
     return (
-        <Dialog open={embed.isOpen} onOpenChange={closeEmbed}>
+        <Dialog open={embed.isOpen} onOpenChange={embed.onClose}>
             <DialogContent className="max-w-4xl">
                 <DialogHeader>
                     <DialogTitle>{embed.name}</DialogTitle>
@@ -28,7 +38,7 @@ const EmbedModal: FC<EmbedModalProps> = ({}) => {
 };
 
 function Viewer() {
-    const [embed] = useEmbed();
+    const embed = useEmbed();
 
     return (
         <div className="rounded-md bg-accent p-2">

src/components/ui/drawer.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
+import { useConfig } from "@/hooks/use-config";
 import { cn } from "@/lib/utils";
 
 const Drawer = ({
@@ -37,22 +38,32 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 const DrawerContent = React.forwardRef<
     React.ElementRef<typeof DrawerPrimitive.Content>,
     React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-    <DrawerPortal>
-        <DrawerOverlay />
-        <DrawerPrimitive.Content
-            ref={ref}
-            className={cn(
-                "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-                className
-            )}
-            {...props}
-        >
-            <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-            {children}
-        </DrawerPrimitive.Content>
-    </DrawerPortal>
-));
+>(({ className, children, ...props }, ref) => {
+    const [config] = useConfig();
+
+    return (
+        <DrawerPortal>
+            <DrawerOverlay />
+            <DrawerPrimitive.Content
+                ref={ref}
+                className={cn(
+                    "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+                    `theme-${config.theme}`,
+                    className
+                )}
+                style={
+                    {
+                        "--radius": `${config.radius}rem`,
+                    } as React.CSSProperties
+                }
+                {...props}
+            >
+                <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+                {children}
+            </DrawerPrimitive.Content>
+        </DrawerPortal>
+    );
+});
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
@@ -106,13 +117,13 @@ DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
     Drawer,
-    DrawerPortal,
-    DrawerOverlay,
-    DrawerTrigger,
     DrawerClose,
     DrawerContent,
-    DrawerHeader,
+    DrawerDescription,
     DrawerFooter,
+    DrawerHeader,
+    DrawerOverlay,
+    DrawerPortal,
     DrawerTitle,
-    DrawerDescription,
+    DrawerTrigger,
 };

src/hooks/use-embed.ts

@@ -1,13 +1,28 @@
-import { atom, useAtom } from "jotai";
+import { create } from "zustand";
 
 type Embed = {
-    embedLink: string;
+    embedId: string;
     name: string;
-    isOpen: boolean;
+    embedLink: string;
 };
 
-const embedAtom = atom<Embed>({ name: "", embedLink: "", isOpen: false });
+type EmbedStore = Embed & {
+    isOpen: boolean;
+    onOpen: (value: Embed) => void;
+    onClose: () => void;
+};
 
-export function useEmbed() {
-    return useAtom(embedAtom);
-}
+export const useEmbed = create<EmbedStore>((set, get) => ({
+    embedId: "",
+    embedLink: "",
+    name: "",
+    isOpen: false,
+    onOpen: (value) =>
+        set({
+            isOpen: true,
+            embedId: value.embedId,
+            embedLink: value.embedLink,
+            name: value.name,
+        }),
+    onClose: () => set({ embedId: "", embedLink: "", name: "", isOpen: false }),
+}));