From 98d2747cd7a271ccaab36dee50c1ccd2d26cca89 Mon Sep 17 00:00:00 2001
From: Priyanshu <bartwalpriyanshu00@gmail.com>
Date: Tue, 13 Aug 2024 01:20:19 +0530
Subject: [PATCH 1/2] Responsiveness

---
 .../Header/components/SearchBar.tsx           |  33 ++-
 app/writer/[id]/components/Header.tsx         | 216 ------------------
 app/writer/[id]/components/Header/Header.tsx  | 126 ++++++++++
 app/writer/[id]/components/OptionsResp.tsx    | 148 ++++++++++++
 app/writer/[id]/components/Tabs.tsx           |   2 +-
 .../options/format/ColorHighlight.tsx         |   2 +-
 .../[id]/components/options/format/Font.tsx   |  34 +++
 .../options/format/FormattingBtns.tsx         |  23 ++
 .../components/options/format/Heading.tsx     |  37 +++
 .../options/format/ParagraphBtns.tsx          |  22 ++
 .../components/options/format/functions.ts    |  28 +++
 .../[id]/components/options/format/index.tsx  | 141 +-----------
 .../options/format/textEditorOptions.tsx      |  30 +++
 .../[id]/components/options/insert/index.tsx  |   7 +-
 app/writer/[id]/page.tsx                      |  21 +-
 components/HeaderBtn.tsx                      |  21 ++
 components/LoaderButton.tsx                   |   8 +-
 components/ui/tabs.tsx                        |  55 +++++
 lib/auth.ts                                   |   3 -
 package-lock.json                             |  61 +++++
 package.json                                  |   2 +
 yarn.lock                                     |  31 ++-
 22 files changed, 681 insertions(+), 370 deletions(-)
 delete mode 100644 app/writer/[id]/components/Header.tsx
 create mode 100644 app/writer/[id]/components/Header/Header.tsx
 create mode 100644 app/writer/[id]/components/OptionsResp.tsx
 create mode 100644 app/writer/[id]/components/options/format/Font.tsx
 create mode 100644 app/writer/[id]/components/options/format/FormattingBtns.tsx
 create mode 100644 app/writer/[id]/components/options/format/Heading.tsx
 create mode 100644 app/writer/[id]/components/options/format/ParagraphBtns.tsx
 create mode 100644 app/writer/[id]/components/options/format/functions.ts
 create mode 100644 app/writer/[id]/components/options/format/textEditorOptions.tsx
 create mode 100644 components/HeaderBtn.tsx
 create mode 100644 components/ui/tabs.tsx

diff --git a/app/components/Header/components/SearchBar.tsx b/app/components/Header/components/SearchBar.tsx
index e473d96..3e21587 100644
--- a/app/components/Header/components/SearchBar.tsx
+++ b/app/components/Header/components/SearchBar.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import Image from "next/image";
 import { Search, X } from "lucide-react"
 import { debounce } from 'lodash'
@@ -30,6 +30,8 @@ type SearchResponse = {
 export default function SearchBar() {
   const router = useRouter();
 
+  const searchedResponseRef = useRef<HTMLDivElement>(null);
+
   const [searchResponse, setSearchResponse] = useState<SearchResponse | undefined>(undefined);
   const [searchValue, setSearchValue] = useState("");
   const [isFocused, setIsFocused] = useState(false);
@@ -47,8 +49,25 @@ export default function SearchBar() {
     [search]
   );
 
+  const handleDocumentClick = (e: any) => {
+    if (
+      searchedResponseRef.current &&
+      !searchedResponseRef.current.contains(e.target)
+    ) {
+      setIsFocused(false);
+    }
+  };
+  useEffect(() => {
+    document.addEventListener('mousedown', handleDocumentClick);
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentClick);
+    };
+  }, []);
+
   return (
-    <div className={`transform relative hidden md:block lg:w-[30rem] lg:translate-x-1/4`}>
+    <div
+      className={`transform relative hidden md:block lg:w-[30rem] lg:translate-x-1/4`}
+    >
       <div className="relative">
         <Input
           className={
@@ -57,19 +76,18 @@ export default function SearchBar() {
               : "rounded-full"} px-8 `
           }
           onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
           value={searchValue}
           onChange={(e) => {
             setSearchValue(e.target.value);
             if (!e.target.value) return setSearchResponse(undefined);
-            debouncedSearch(e.target.value)
+            debouncedSearch(e.target.value);
           }}
           placeholder="Search documents..."
         />
         <Search size={20} className="absolute text-slate-500 top-1/2 transform -translate-y-1/2 ml-2" />
         <X
           size={20}
-          onClick={() => setSearchValue("")}
+          onClick={() => setSearchValue('')}
           className={
             `${!searchValue
               ? "hidden"
@@ -78,6 +96,7 @@ export default function SearchBar() {
       </div>
 
       <div
+        ref={searchedResponseRef}
         className={
           `${isFocused && searchResponse
             ? "block"
@@ -124,5 +143,5 @@ export default function SearchBar() {
         }
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/app/writer/[id]/components/Header.tsx b/app/writer/[id]/components/Header.tsx
deleted file mode 100644
index a99194f..0000000
--- a/app/writer/[id]/components/Header.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import { useRouter } from 'next/navigation';
-import {
-  Redo,
-  Triangle,
-  Undo,
-} from 'lucide-react'
-import { Editor } from "@tiptap/react";
-import { Button } from '@/components/ui/button';
-
-// import {
-//   Drawer,
-//   DrawerContent,
-//   DrawerDescription,
-//   DrawerHeader,
-//   DrawerTitle,
-//   DrawerTrigger,
-// } from "@/components/ui/drawer"
-// import {
-//   Select,
-//   SelectContent,
-//   SelectItem,
-//   SelectTrigger,
-//   SelectValue,
-// } from "@/components/ui/select"
-// import { Label } from "@/components/ui/label"
-// import { Input } from "@/components/ui/input"
-// import { Textarea } from "@/components/ui/textarea"
-
-type HeaderPropType = {
-  editor: Editor | null,
-  name: string
-  isSaving: boolean;
-}
-
-export default function Header({ editor, name, isSaving }: HeaderPropType) {
-  const router = useRouter();
-
-  return (
-    <header className="flex h-[57px] items-center gap-1 border-b bg-background">
-      <div className="p-2 border-r">
-        <Button variant="outline" size="icon" onClick={() => router.push("/")} >
-          <Triangle
-            className="size-5 fill-foreground"
-          />
-        </Button>
-      </div>
-      {name ? <h1 className="text-xl font-semibold mx-4">{name}</h1>
-        : <div className='h-7 w-40 rounded bg-neutral-100 animate-pulse mx-4'></div>}
-      <Undo
-        size={35}
-        onClick={() => editor?.chain().focus().undo().run()}
-        className={`${editor?.can().chain().focus().undo().run()
-          ? "cursor-pointer hover:bg-neutral-100"
-          : ""} border rounded bg-white p-2 `}
-        color={`${editor?.can().chain().focus().undo().run()
-          ? "black"
-          : "#ababab"}`}
-      />
-      <Redo
-        size={35}
-        onClick={() => editor?.chain().focus().redo().run()}
-        className={`${editor?.can().chain().focus().redo().run()
-          ? "cursor-pointer hover:bg-neutral-100"
-          : ""} border rounded bg-white p-2 `}
-        color={`${editor?.can().chain().focus().redo().run()
-          ? "black"
-          : "#ababab"}`}
-      />
-
-      {isSaving ?
-        <>
-          <svg
-            className="animate-spin lucide lucide-loader-circle ml-4"
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
-            height="20"
-            viewBox="0 0 24 24"
-            fill="none" stroke="currentColor"
-            stroke-width="1" stroke-linecap="round"
-            stroke-linejoin="round">
-            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-          </svg>
-          <p>Saving...</p>
-        </> : <></>}
-
-      {/* <Drawer> */}
-      {/*   <DrawerTrigger asChild> */}
-      {/*     <Button variant="ghost" size="icon" className="md:hidden"> */}
-      {/*       <Settings className="size-4" /> */}
-      {/*       <span className="sr-only">Settings</span> */}
-      {/*     </Button> */}
-      {/*   </DrawerTrigger> */}
-      {/*   <DrawerContent className="max-h-[80vh]"> */}
-      {/*     <DrawerHeader> */}
-      {/*       <DrawerTitle>Format</DrawerTitle> */}
-      {/*       <DrawerDescription> */}
-      {/*         Format the text. */}
-      {/*       </DrawerDescription> */}
-      {/*     </DrawerHeader> */}
-      {/*     <form className="grid w-full items-start gap-6 overflow-auto p-4 pt-0"> */}
-      {/*       <fieldset className="grid gap-6 rounded-lg border p-4"> */}
-      {/*         <legend className="-ml-1 px-1 text-sm font-medium"> */}
-      {/*           Settings */}
-      {/*         </legend> */}
-      {/*         <div className="grid gap-3"> */}
-      {/*           <Label htmlFor="model">Model</Label> */}
-      {/*           <Select> */}
-      {/*             <SelectTrigger */}
-      {/*               id="model" */}
-      {/*               className="items-start [&_[data-description]]:hidden" */}
-      {/*             > */}
-      {/*               <SelectValue placeholder="Select a model" /> */}
-      {/*             </SelectTrigger> */}
-      {/*             <SelectContent> */}
-      {/*               <SelectItem value="genesis"> */}
-      {/*                 <div className="flex items-start gap-3 text-muted-foreground"> */}
-      {/*                   <Rabbit className="size-5" /> */}
-      {/*                   <div className="grid gap-0.5"> */}
-      {/*                     <p> */}
-      {/*                       Neural{" "} */}
-      {/*                       <span className="font-medium text-foreground"> */}
-      {/*                         Genesis */}
-      {/*                       </span> */}
-      {/*                     </p> */}
-      {/*                     <p className="text-xs" data-description> */}
-      {/*                       Our fastest model for general use cases. */}
-      {/*                     </p> */}
-      {/*                   </div> */}
-      {/*                 </div> */}
-      {/*               </SelectItem> */}
-      {/*               <SelectItem value="explorer"> */}
-      {/*                 <div className="flex items-start gap-3 text-muted-foreground"> */}
-      {/*                   <Bird className="size-5" /> */}
-      {/*                   <div className="grid gap-0.5"> */}
-      {/*                     <p> */}
-      {/*                       Neural{" "} */}
-      {/*                       <span className="font-medium text-foreground"> */}
-      {/*                         Explorer */}
-      {/*                       </span> */}
-      {/*                     </p> */}
-      {/*                     <p className="text-xs" data-description> */}
-      {/*                       Performance and speed for efficiency. */}
-      {/*                     </p> */}
-      {/*                   </div> */}
-      {/*                 </div> */}
-      {/*               </SelectItem> */}
-      {/*               <SelectItem value="quantum"> */}
-      {/*                 <div className="flex items-start gap-3 text-muted-foreground"> */}
-      {/*                   <Turtle className="size-5" /> */}
-      {/*                   <div className="grid gap-0.5"> */}
-      {/*                     <p> */}
-      {/*                       Neural{" "} */}
-      {/*                       <span className="font-medium text-foreground"> */}
-      {/*                         Quantum */}
-      {/*                       </span> */}
-      {/*                     </p> */}
-      {/*                     <p className="text-xs" data-description> */}
-      {/*                       The most powerful model for complex */}
-      {/*                       computations. */}
-      {/*                     </p> */}
-      {/*                   </div> */}
-      {/*                 </div> */}
-      {/*               </SelectItem> */}
-      {/*             </SelectContent> */}
-      {/*           </Select> */}
-      {/*         </div> */}
-      {/*         <div className="grid gap-3"> */}
-      {/*           <Label htmlFor="temperature">Temperature</Label> */}
-      {/*           <Input id="temperature" type="number" placeholder="0.4" /> */}
-      {/*         </div> */}
-      {/*         <div className="grid gap-3"> */}
-      {/*           <Label htmlFor="top-p">Top P</Label> */}
-      {/*           <Input id="top-p" type="number" placeholder="0.7" /> */}
-      {/*         </div> */}
-      {/*         <div className="grid gap-3"> */}
-      {/*           <Label htmlFor="top-k">Top K</Label> */}
-      {/*           <Input id="top-k" type="number" placeholder="0.0" /> */}
-      {/*         </div> */}
-      {/*       </fieldset> */}
-      {/*       <fieldset className="grid gap-6 rounded-lg border p-4"> */}
-      {/*         <legend className="-ml-1 px-1 text-sm font-medium"> */}
-      {/*           Messages */}
-      {/*         </legend> */}
-      {/*         <div className="grid gap-3"> */}
-      {/*           <Label htmlFor="role">Role</Label> */}
-      {/*           <Select defaultValue="system"> */}
-      {/*             <SelectTrigger> */}
-      {/*               <SelectValue placeholder="Select a role" /> */}
-      {/*             </SelectTrigger> */}
-      {/*             <SelectContent> */}
-      {/*               <SelectItem value="system">System</SelectItem> */}
-      {/*               <SelectItem value="user">User</SelectItem> */}
-      {/*               <SelectItem value="assistant">Assistant</SelectItem> */}
-      {/*             </SelectContent> */}
-      {/*           </Select> */}
-      {/*         </div> */}
-      {/*         <div className="grid gap-3"> */}
-      {/*           <Label htmlFor="content">Content</Label> */}
-      {/*           <Textarea id="content" placeholder="You are a..." /> */}
-      {/*         </div> */}
-      {/*       </fieldset> */}
-      {/*     </form> */}
-      {/*   </DrawerContent> */}
-      {/* </Drawer> */}
-
-      {/* <Button */}
-      {/*   variant="outline" */}
-      {/*   size="sm" */}
-      {/*   className="ml-auto gap-1.5 text-sm" */}
-      {/* > */}
-      {/*   <Share className="size-3.5" /> */}
-      {/*   Share */}
-      {/* </Button> */}
-    </header>
-  )
-}
diff --git a/app/writer/[id]/components/Header/Header.tsx b/app/writer/[id]/components/Header/Header.tsx
new file mode 100644
index 0000000..6d2a6b5
--- /dev/null
+++ b/app/writer/[id]/components/Header/Header.tsx
@@ -0,0 +1,126 @@
+import { useRouter } from 'next/navigation';
+import {
+  ALargeSmall,
+  Redo,
+  Triangle,
+  Undo,
+  X,
+} from 'lucide-react'
+import { Editor } from "@tiptap/react";
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Button } from '@/components/ui/button';
+
+import Heading from '../options/format/Heading';
+import Font from '../options/format/Font';
+import FormattingBtns from '../options/format/FormattingBtns';
+import ColorHighlight from '../options/format/ColorHighlight';
+import ParagraphBtns from '../options/format/ParagraphBtns';
+
+type HeaderPropType = {
+  editor: Editor | null,
+  name: string,
+  isSaving: boolean,
+}
+
+export default function Header({
+  editor,
+  name,
+  isSaving,
+}: HeaderPropType) {
+  const router = useRouter();
+
+  return (
+    <header className="flex h-[57px] items-center gap-1 border-b bg-background">
+      <div className="p-2 lg:border-r">
+        <Button variant="outline" size="icon" onClick={() => router.push("/")} >
+          <Triangle
+            className="size-5 fill-foreground"
+          />
+        </Button>
+      </div>
+
+      <div className='w-full flex justify-between'>
+        <div className='flex items-center'>
+          {name
+            ? <h1 className="text-md truncate hidden lg:block lg:max-w-[40rem] lg:text-xl font-semibold mx-4">
+              {name}
+            </h1>
+            : <div className='h-7 w-40 rounded hidden lg:block bg-neutral-100 animate-pulse mx-4'></div>}
+
+          <Button
+            onClick={() => editor?.chain().focus().undo().run()}
+            variant="ghost"
+            className='px-3 rounded-md'
+            disabled={!editor?.can().chain().focus().undo().run()}
+          ><Undo size={15} /></Button>
+          <Button
+            onClick={() => editor?.chain().focus().redo().run()}
+            variant="ghost"
+            className='px-3 rounded-md'
+            disabled={!editor?.can().chain().focus().redo().run()}
+          ><Redo size={15} /></Button>
+
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button variant="ghost" className='px-3 rounded-md'>
+                <ALargeSmall size={15} />
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent>
+              <DrawerHeader className='flex justify-between items-center sm:px-20'>
+                <DrawerTitle>Format</DrawerTitle>
+                <DrawerClose>
+                  <Button variant="ghost" className='p-0'>
+                    <X size={20} />
+                  </Button>
+                </DrawerClose>
+              </DrawerHeader>
+              <div className='grid gap-4 grid-cols-12 p-4 sm:px-20'>
+                <Heading editor={editor} />
+                <Font editor={editor} />
+                <FormattingBtns editor={editor} />
+                <ColorHighlight editor={editor} />
+                <ParagraphBtns editor={editor} />
+              </div>
+            </DrawerContent>
+          </Drawer>
+
+          {isSaving ?
+            <>
+              <svg
+                className="hidden lg:block animate-spin lucide lucide-loader-circle ml-4"
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none" stroke="currentColor"
+                stroke-width="1" stroke-linecap="round"
+                stroke-linejoin="round">
+                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+              </svg>
+              <p className='hidden lg:block '>Saving...</p>
+            </> : <></>}
+        </div>
+
+        {/* <Button */}
+        {/*   variant="outline" */}
+        {/*   size="icon" */}
+        {/*   className='mr-4 lg:hidden' */}
+        {/*   onClick={() => setIsDrawerOpen(!isDrawerOpen)} */}
+        {/* > */}
+        {/*   <AlignJustify */}
+        {/*     className="size-5 fill-foreground" */}
+        {/*   /> */}
+        {/* </Button> */}
+      </div>
+    </header>
+  )
+}
diff --git a/app/writer/[id]/components/OptionsResp.tsx b/app/writer/[id]/components/OptionsResp.tsx
new file mode 100644
index 0000000..20d94ad
--- /dev/null
+++ b/app/writer/[id]/components/OptionsResp.tsx
@@ -0,0 +1,148 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button";
+
+import {
+  setDefaultStyleValue,
+  onFontStyleChange,
+  setDefaultFontFamily,
+  onFontFamilyChange
+} from './options/format/functions'
+import {
+  formattingBtns,
+  paragraphBtns,
+  fontFamily
+} from './options/format/textEditorOptions'
+import ColorHighlight from "./options/format/ColorHighlight";
+
+type DrawerRespPropType = {
+  editor: any,
+  isOpen: boolean,
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
+}
+export default function OptionsResp({ editor, isOpen, setIsOpen }: DrawerRespPropType) {
+  return (
+    <>
+      <div className={`${isOpen ? "flex-col" : "hidden"} absolute z-10 bg-red-300 w-fit items-start gap-8`} x-chunk="dashboard-03-chunk-0">
+        <form className="grid w-full items-start gap-6">
+          <fieldset className=" grid gap-6 bg-white rounded-lg border p-4">
+            <legend className="-ml-1 px-1 text-sm font-medium">
+              Style
+            </legend>
+            <div className="grid gap-3">
+              <Select
+                value={setDefaultStyleValue(editor)}
+                onValueChange={value => onFontStyleChange(editor, value)}
+              >
+                <SelectTrigger
+                  id="model"
+                  className="items-start [&_[data-description]]:hidden"
+                >
+                  <SelectValue placeholder="Normal" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="normal">Normal</SelectItem>
+                  <SelectItem value="heading 1">Heading 1</SelectItem>
+                  <SelectItem value="heading 2">Heading 2</SelectItem>
+                  <SelectItem value="heading 3">Heading 3</SelectItem>
+                  <SelectItem value="heading 4">Heading 4</SelectItem>
+                  <SelectItem value="heading 5">Heading 5</SelectItem>
+                  <SelectItem value="heading 6">Heading 6</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </fieldset>
+
+          <fieldset className="grid max-w-fit gap-6 bg-white rounded-lg border p-4">
+            <legend className="-ml-1 px-1 text-sm font-medium">
+              Font
+            </legend>
+            <div className="">
+              <Select
+                defaultValue={setDefaultFontFamily(editor)}
+                onValueChange={value => onFontFamilyChange(editor, value)}
+              >
+                <SelectTrigger
+                  id="model"
+                  className="items-start [&_[data-description]]:hidden col-span-3"
+                >
+                  <SelectValue placeholder="Inter" />
+                </SelectTrigger>
+                <SelectContent>
+                  {fontFamily.map((item) => {
+                    return <SelectItem key={item.title} value={item.font}>{item.title}</SelectItem>
+                  })}
+                </SelectContent>
+              </Select>
+
+              <div className="w-full mt-3 flex justify-between gap-4">
+                <div className="flex cursor-pointer border rounded w-fit col-span-3">
+                  {formattingBtns.map(({ func, name, Icon }, i) => {
+                    return (
+                      <Icon
+                        key={name}
+                        size={35}
+                        // @ts-ignore
+                        onClick={() => editor?.chain().focus()[func]().run()}
+                        className={`${editor?.isActive(name)
+                          ? 'bg-blue-500 text-white hover:bg-blue-500'
+                          : 'hover:bg-slate-100 bg-white'} p-2 rounded ${i === formattingBtns.length - 1
+                            ? "border-none"
+                            : "border-r"}`}
+                      />
+                    )
+                  })}
+                </div>
+                <ColorHighlight editor={editor} />
+              </div>
+
+            </div>
+          </fieldset>
+          <fieldset className="grid gap-6 bg-white rounded-lg border p-4">
+            <legend className="-ml-1 px-1 text-sm font-medium">
+              Paragraph
+            </legend>
+            <div className="grid gap-3">
+              <div className="flex cursor-pointer border rounded w-fit">
+                {paragraphBtns.map(({ align, Icon }, i) => {
+                  return (
+                    <Icon
+                      key={align}
+                      size={35}
+                      onClick={() => editor?.chain().focus().setTextAlign(align).run()}
+                      className={`${editor?.isActive({ textAlign: align })
+                        ? 'bg-blue-500 text-white hover:bg-blue-500'
+                        : 'hover:bg-slate-100 bg-white'} p-2 rounded ${i === paragraphBtns.length - 1
+                          ? "border-none"
+                          : "border-r"}`}
+                    />
+                  )
+                })}
+              </div>
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </>
+  )
+}
diff --git a/app/writer/[id]/components/Tabs.tsx b/app/writer/[id]/components/Tabs.tsx
index bae6b20..2a27885 100644
--- a/app/writer/[id]/components/Tabs.tsx
+++ b/app/writer/[id]/components/Tabs.tsx
@@ -18,7 +18,7 @@ type TabsPropType = {
 }
 export default function Tabs({ option, setOption }: TabsPropType) {
   return (
-    <aside className="bg-white flex h-[calac(100vh - 57px)] justify-between flex-col border-r">
+    <aside className="bg-white h-[calc(100vh - 57px)] justify-between border-r hidden lg:flex lg:flex-col">
       <nav className="grid gap-1 p-2">
         <TooltipProvider>
           <Tooltip>
diff --git a/app/writer/[id]/components/options/format/ColorHighlight.tsx b/app/writer/[id]/components/options/format/ColorHighlight.tsx
index b271afb..2a1c3b1 100644
--- a/app/writer/[id]/components/options/format/ColorHighlight.tsx
+++ b/app/writer/[id]/components/options/format/ColorHighlight.tsx
@@ -32,7 +32,7 @@ export default function ColorHighlight({ editor }: { editor: Editor | null }) {
   }
 
   return (
-    <div className="flex cursor-pointer border rounded w-fit">
+    <div className="flex cursor-pointer border rounded w-fit col-span-6 sm:col-span-4 lg:mb-0">
       <Baseline
         size={35}
         color={fontColor}
diff --git a/app/writer/[id]/components/options/format/Font.tsx b/app/writer/[id]/components/options/format/Font.tsx
new file mode 100644
index 0000000..c03ed66
--- /dev/null
+++ b/app/writer/[id]/components/options/format/Font.tsx
@@ -0,0 +1,34 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+import {
+  setDefaultFontFamily,
+  onFontFamilyChange
+} from './functions'
+import { fontFamily } from './textEditorOptions'
+
+export default function Font({ editor }: any) {
+  return (
+    <Select
+      defaultValue={setDefaultFontFamily(editor)}
+      onValueChange={value => onFontFamilyChange(editor, value)}
+    >
+      <SelectTrigger
+        id="model"
+        className="items-start [&_[data-description]]:hidden col-span-12 sm:col-span-6 lg:col-span-3 lg:mb-0"
+      >
+        <SelectValue placeholder="Inter" />
+      </SelectTrigger>
+      <SelectContent>
+        {fontFamily.map((item) => {
+          return <SelectItem key={item.title} value={item.font}>{item.title}</SelectItem>
+        })}
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/app/writer/[id]/components/options/format/FormattingBtns.tsx b/app/writer/[id]/components/options/format/FormattingBtns.tsx
new file mode 100644
index 0000000..8543461
--- /dev/null
+++ b/app/writer/[id]/components/options/format/FormattingBtns.tsx
@@ -0,0 +1,23 @@
+import { formattingBtns } from "./textEditorOptions"
+
+export default function FormattingBtns({ editor }: any) {
+  return (
+    <div className="flex cursor-pointer border rounded w-fit col-span-6 sm:col-span-4 lg:col-span-3 lg:mb-0">
+      {formattingBtns.map(({ func, name, Icon }, i) => {
+        return (
+          <Icon
+            key={name}
+            size={35}
+            // @ts-ignore
+            onClick={() => editor?.chain().focus()[func]().run()}
+            className={`${editor?.isActive(name)
+              ? 'bg-blue-500 text-white hover:bg-blue-500'
+              : 'hover:bg-slate-100 bg-white'} p-2 rounded ${i === formattingBtns.length - 1
+                ? "border-none"
+                : "border-r"}`}
+          />
+        )
+      })}
+    </div>
+  )
+}
diff --git a/app/writer/[id]/components/options/format/Heading.tsx b/app/writer/[id]/components/options/format/Heading.tsx
new file mode 100644
index 0000000..8c93146
--- /dev/null
+++ b/app/writer/[id]/components/options/format/Heading.tsx
@@ -0,0 +1,37 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+import {
+  setDefaultStyleValue,
+  onFontStyleChange,
+} from './functions'
+
+export default function Heading({ editor }: any) {
+  return (
+    <Select
+      value={setDefaultStyleValue(editor)}
+      onValueChange={value => onFontStyleChange(editor, value)}
+    >
+      <SelectTrigger
+        id="model"
+        className="items-start [&_[data-description]]:hidden col-span-12 sm:col-span-6 lg:mb-0"
+      >
+        <SelectValue placeholder="Normal" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="normal">Normal</SelectItem>
+        <SelectItem value="heading 1">Heading 1</SelectItem>
+        <SelectItem value="heading 2">Heading 2</SelectItem>
+        <SelectItem value="heading 3">Heading 3</SelectItem>
+        <SelectItem value="heading 4">Heading 4</SelectItem>
+        <SelectItem value="heading 5">Heading 5</SelectItem>
+        <SelectItem value="heading 6">Heading 6</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}
diff --git a/app/writer/[id]/components/options/format/ParagraphBtns.tsx b/app/writer/[id]/components/options/format/ParagraphBtns.tsx
new file mode 100644
index 0000000..48f9599
--- /dev/null
+++ b/app/writer/[id]/components/options/format/ParagraphBtns.tsx
@@ -0,0 +1,22 @@
+import { paragraphBtns } from "./textEditorOptions"
+
+export default function ParagraphBtns({ editor }: any) {
+  return (
+    <div className="flex cursor-pointer border rounded w-fit col-span-6 sm:col-span-4">
+      {paragraphBtns.map(({ align, Icon }, i) => {
+        return (
+          <Icon
+            key={align}
+            size={35}
+            onClick={() => editor?.chain().focus().setTextAlign(align).run()}
+            className={`${editor?.isActive({ textAlign: align })
+              ? 'bg-blue-500 text-white hover:bg-blue-500'
+              : 'hover:bg-slate-100 bg-white'} p-2 rounded ${i === paragraphBtns.length - 1
+                ? "border-none"
+                : "border-r"}`}
+          />
+        )
+      })}
+    </div>
+  )
+}
diff --git a/app/writer/[id]/components/options/format/functions.ts b/app/writer/[id]/components/options/format/functions.ts
new file mode 100644
index 0000000..37c7442
--- /dev/null
+++ b/app/writer/[id]/components/options/format/functions.ts
@@ -0,0 +1,28 @@
+import { fontFamily } from "./textEditorOptions"
+
+export const setDefaultStyleValue = (editor: any) => {
+  let level: string = "normal";
+  for (let i = 1; i <= 6; i++) {
+    if (editor?.isActive('heading', { level: i })) return level = `heading ${String(i)}`;
+  }
+  return level;
+}
+
+export const onFontStyleChange = (editor: any, val: string) => {
+  const matcher = val.split(" ")
+  if (matcher[0] === "normal") return editor?.commands.setParagraph();
+  // @ts-ignore
+  return editor?.commands.setHeading({ level: Number(matcher[1]) });
+}
+
+export const setDefaultFontFamily = (editor: any) => {
+  const matcher = fontFamily.find((item) => {
+    return editor?.isActive('textStyle', { fontFamily: item.font });
+  })
+  return matcher?.font || "Inter";
+}
+
+export const onFontFamilyChange = (editor: any, font: string) => {
+  return editor?.chain().focus().setFontFamily(font).run()
+}
+
diff --git a/app/writer/[id]/components/options/format/index.tsx b/app/writer/[id]/components/options/format/index.tsx
index bb7ecb1..7ff721f 100644
--- a/app/writer/[id]/components/options/format/index.tsx
+++ b/app/writer/[id]/components/options/format/index.tsx
@@ -1,139 +1,33 @@
-"use client"
-
 import { Editor } from "@tiptap/react";
-import {
-  AlignCenter,
-  AlignJustify,
-  AlignLeft,
-  AlignRight,
-  Bold,
-  Italic,
-  Strikethrough,
-  Underline,
-} from "lucide-react";
 
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
+import Heading from "./Heading";
+import Font from "./Font";
+import FormattingBtns from "./FormattingBtns";
 import ColorHighlight from "./ColorHighlight";
+import ParagraphBtns from "./ParagraphBtns";
 
-const formattingBtns = [
-  { Icon: Bold, name: "bold", func: "toggleBold" },
-  { Icon: Italic, name: "italic", func: "toggleItalic" },
-  { Icon: Underline, name: "underline", func: "toggleUnderline" },
-  { Icon: Strikethrough, name: "strike", func: "toggleStrike" },
-]
-const paragraphBtns = [
-  { Icon: AlignLeft, align: "left" },
-  { Icon: AlignCenter, align: "center" },
-  { Icon: AlignRight, align: "right" },
-  { Icon: AlignJustify, align: "justify" },
-]
-
-const fontFamily = [
-  { title: "Inter", font: "Inter" },
-  { title: "Comic Sans", font: "Comic Sans MS, Comic Sans" },
-  { title: "Serif", font: "serif" },
-  { title: "Monospace", font: "monospace" },
-  { title: "Cursive", font: "cursive" },
-]
 export default function FormatOptions({ editor }: { editor: Editor | null }) {
-  const setDefaultStyleValue = () => {
-    let level: string = "normal";
-    for (let i = 1; i <= 6; i++) {
-      if (editor?.isActive('heading', { level: i })) return level = `heading ${String(i)}`;
-    }
-    return level;
-  }
-  const onFontStyleChange = (val: string) => {
-    const matcher = val.split(" ")
-    if (matcher[0] === "normal") return editor?.commands.setParagraph();
-    // @ts-ignore
-    return editor?.commands.setHeading({ level: Number(matcher[1]) });
-  }
-
-  const setDefaultFontFamily = () => {
-    const matcher = fontFamily.find((item) => {
-      return editor?.isActive('textStyle', { fontFamily: item.font });
-    })
-    return matcher?.font || "Inter";
-  }
-  const onFontFamilyChange = (font: string) => {
-    return editor?.chain().focus().setFontFamily(font).run()
-  }
-
   return (
-    <div className="w-fit hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0">
+    <div className="w-fit hidden flex-col items-start gap-8 lg:flex" x-chunk="dashboard-03-chunk-0">
       <form className="grid w-full items-start gap-6">
         <fieldset className=" grid gap-6 bg-white rounded-lg border p-4">
           <legend className="-ml-1 px-1 text-sm font-medium">
             Style
           </legend>
           <div className="grid gap-3">
-            <Select value={setDefaultStyleValue()} onValueChange={onFontStyleChange}>
-              <SelectTrigger
-                id="model"
-                className="items-start [&_[data-description]]:hidden"
-              >
-                <SelectValue placeholder="Normal" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="normal">Normal</SelectItem>
-                <SelectItem value="heading 1">Heading 1</SelectItem>
-                <SelectItem value="heading 2">Heading 2</SelectItem>
-                <SelectItem value="heading 3">Heading 3</SelectItem>
-                <SelectItem value="heading 4">Heading 4</SelectItem>
-                <SelectItem value="heading 5">Heading 5</SelectItem>
-                <SelectItem value="heading 6">Heading 6</SelectItem>
-              </SelectContent>
-            </Select>
+            <Heading editor={editor} />
           </div>
         </fieldset>
-
         <fieldset className="grid max-w-fit gap-6 bg-white rounded-lg border p-4">
           <legend className="-ml-1 px-1 text-sm font-medium">
             Font
           </legend>
           <div className="">
-            <Select defaultValue={setDefaultFontFamily()} onValueChange={onFontFamilyChange}>
-              <SelectTrigger
-                id="model"
-                className="items-start [&_[data-description]]:hidden col-span-3"
-              >
-                <SelectValue placeholder="Inter" />
-              </SelectTrigger>
-              <SelectContent>
-                {fontFamily.map((item) => {
-                  return <SelectItem key={item.title} value={item.font}>{item.title}</SelectItem>
-                })}
-              </SelectContent>
-            </Select>
-
-            <div className="w-full mt-3 flex justify-between gap-4">            
-              <div className="flex cursor-pointer border rounded w-fit col-span-3">
-              {formattingBtns.map(({ func, name, Icon }, i) => {
-                return (
-                  <Icon
-                    key={name}
-                    size={35}
-                    // @ts-ignore
-                    onClick={() => editor?.chain().focus()[func]().run()}
-                    className={`${editor?.isActive(name)
-                      ? 'bg-blue-500 text-white hover:bg-blue-500'
-                      : 'hover:bg-slate-100 bg-white'} p-2 rounded ${i === formattingBtns.length - 1
-                        ? "border-none"
-                        : "border-r"}`}
-                  />
-                )
-              })}
-            </div>
+            <Font editor={editor} />
+            <div className="w-full mt-3 flex justify-between gap-4">
+              <FormattingBtns editor={editor} />
               <ColorHighlight editor={editor} />
             </div>
-
           </div>
         </fieldset>
         <fieldset className="grid gap-6 bg-white rounded-lg border p-4">
@@ -141,22 +35,7 @@ export default function FormatOptions({ editor }: { editor: Editor | null }) {
             Paragraph
           </legend>
           <div className="grid gap-3">
-            <div className="flex cursor-pointer border rounded w-fit">
-              {paragraphBtns.map(({ align, Icon }, i) => {
-                return (
-                  <Icon
-                    key={align}
-                    size={35}
-                    onClick={() => editor?.chain().focus().setTextAlign(align).run()}
-                    className={`${editor?.isActive({ textAlign: align })
-                      ? 'bg-blue-500 text-white hover:bg-blue-500'
-                      : 'hover:bg-slate-100 bg-white'} p-2 rounded ${i === paragraphBtns.length - 1
-                        ? "border-none"
-                        : "border-r"}`}
-                  />
-                )
-              })}
-            </div>
+            <ParagraphBtns editor={editor} />
           </div>
         </fieldset>
       </form>
diff --git a/app/writer/[id]/components/options/format/textEditorOptions.tsx b/app/writer/[id]/components/options/format/textEditorOptions.tsx
new file mode 100644
index 0000000..e710361
--- /dev/null
+++ b/app/writer/[id]/components/options/format/textEditorOptions.tsx
@@ -0,0 +1,30 @@
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Italic,
+  Strikethrough,
+  Underline,
+} from "lucide-react";
+
+export const formattingBtns = [
+  { Icon: Bold, name: "bold", func: "toggleBold" },
+  { Icon: Italic, name: "italic", func: "toggleItalic" },
+  { Icon: Underline, name: "underline", func: "toggleUnderline" },
+  { Icon: Strikethrough, name: "strike", func: "toggleStrike" },
+]
+export const paragraphBtns = [
+  { Icon: AlignLeft, align: "left" },
+  { Icon: AlignCenter, align: "center" },
+  { Icon: AlignRight, align: "right" },
+  { Icon: AlignJustify, align: "justify" },
+]
+export const fontFamily = [
+  { title: "Inter", font: "Inter" },
+  { title: "Comic Sans", font: "Comic Sans MS, Comic Sans" },
+  { title: "Serif", font: "serif" },
+  { title: "Monospace", font: "monospace" },
+  { title: "Cursive", font: "cursive" },
+]
diff --git a/app/writer/[id]/components/options/insert/index.tsx b/app/writer/[id]/components/options/insert/index.tsx
index a225df0..f5ce58f 100644
--- a/app/writer/[id]/components/options/insert/index.tsx
+++ b/app/writer/[id]/components/options/insert/index.tsx
@@ -1,5 +1,10 @@
 import { Editor } from "@tiptap/react";
 
-export default function InsertOptions({ editor }: { editor: Editor | null }) {
+
+type InsterOptionsPropTypes = {
+  editor: Editor | null,
+  isOpen: boolean
+};
+export default function InsertOptions({ editor, isOpen }: InsterOptionsPropTypes) {
   return <>Insert</>
 }
diff --git a/app/writer/[id]/page.tsx b/app/writer/[id]/page.tsx
index bd849d2..28f070e 100644
--- a/app/writer/[id]/page.tsx
+++ b/app/writer/[id]/page.tsx
@@ -17,14 +17,16 @@ import html2canvas from 'html2canvas'
 import { ScrollArea } from "@/components/ui/scroll-area"
 
 import { FormatOptions, InsertOptions } from "./components/options"
-import Header from "./components/Header"
+import Header from "./components/Header/Header"
 import Tabs from "./components/Tabs"
+import DrawerResp from './components/OptionsResp'
 import Loading from './components/EditorLoading'
 
 import { extensions, props } from './editor/editorConfig'
 import { GetDocDetails, UpdateDocData, UpdateThumbnail } from './actions'
 import { toast } from 'sonner'
 import useClientSession from '@/lib/customHooks/useClientSession'
+import OptionsResp from './components/OptionsResp'
 
 export default function Dashboard() {
   const params = useParams()
@@ -32,6 +34,7 @@ export default function Dashboard() {
   const session = useClientSession();
 
   const [isSaving, setIsSaving] = useState(false);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [docData, setDocData] = useState<string | JSX.Element | JSX.Element[] | undefined>(undefined);
 
   const editorRef = useRef<HTMLDivElement>(null);
@@ -115,16 +118,26 @@ export default function Dashboard() {
     }
   }, [docData, editor]);
 
-  const Options = [<FormatOptions key={1} editor={editor} />, <InsertOptions key={2} editor={editor} />]
+  const Options = [
+    <FormatOptions key={1} editor={editor} isOpen={isDrawerOpen} />,
+    <InsertOptions key={2} editor={editor} isOpen={isDrawerOpen} />
+  ]
   const [option, setOption] = useState(0)
 
   return (
     <div className="h-screen overflow-y-hidden w-full">
-      <Header editor={editor} name={data?.name || ""} isSaving={isSaving} />
+      <Header
+        editor={editor}
+        name={data?.name || ""}
+        isSaving={isSaving}
+        isDrawerOpen={isDrawerOpen}
+        setIsDrawerOpen={setIsDrawerOpen}
+      />
       <div className="flex h-full">
-        <Tabs option={option} setOption={setOption} />
+        <Tabs option={option} setOption={setOption} isOpen={isDrawerOpen} />
         <div className="w-full flex gap-4 p-4">
           {Options[option]}
+          {/* <OptionsResp editor={editor} isOpen={isDrawerOpen} setIsOpen={setIsDrawerOpen} /> */}
           <ScrollArea className="w-full mb-4 flex justify-center">
             {!data ? <Loading /> :
               <EditorContent editor={editor} ref={editorRef} />
diff --git a/components/HeaderBtn.tsx b/components/HeaderBtn.tsx
new file mode 100644
index 0000000..740c61f
--- /dev/null
+++ b/components/HeaderBtn.tsx
@@ -0,0 +1,21 @@
+import { Button, ButtonProps } from "./ui/button"
+
+type HeaderBtnPropType = {
+  icon?: React.ReactNode,
+  size?: number,
+} & ButtonProps;
+
+export default function HeaderBtn({
+  icon,
+  size,
+  children,
+  ...props
+}: HeaderBtnPropType) {
+  return (
+    <Button
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}
diff --git a/components/LoaderButton.tsx b/components/LoaderButton.tsx
index bbe2b09..8074fc5 100644
--- a/components/LoaderButton.tsx
+++ b/components/LoaderButton.tsx
@@ -1,5 +1,3 @@
-import { Plus } from "lucide-react";
-
 import { Button, ButtonProps } from "./ui/button";
 
 type LoaderButtonType = {
@@ -11,13 +9,13 @@ type LoaderButtonType = {
 } & ButtonProps;
 
 export default function LoaderButton({
-  title,
   onClickFunc,
   isLoading,
   className,
-  icon,
   children,
-  ...props }: LoaderButtonType) {
+  icon,
+  ...props
+}: LoaderButtonType) {
   return (
     <Button
       {...props}
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..26eb109
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/lib/auth.ts b/lib/auth.ts
index 950e9cd..5a97d70 100644
--- a/lib/auth.ts
+++ b/lib/auth.ts
@@ -59,9 +59,6 @@ export const authOptions: NextAuthOptions = {
       }
       return true;
     },
-    // jwt: ({ token }) => {
-    //   return token;
-    // },
     session: async ({ session }: any) => {
       if (session.user) {
         const user = await prisma.user.findFirst(
diff --git a/package-lock.json b/package-lock.json
index fd9bd4c..6b14a78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,13 @@
         "@auth0/nextjs-auth0": "^3.5.0",
         "@prisma/client": "^5.16.2",
         "@radix-ui/react-avatar": "^1.1.0",
+        "@radix-ui/react-dialog": "^1.1.1",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-scroll-area": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@tanstack/react-query": "^5.50.1",
         "@tanstack/react-query-devtools": "^5.50.1",
@@ -1056,6 +1058,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-scroll-area": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.1.0.tgz",
@@ -1148,6 +1180,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.0.tgz",
+      "integrity": "sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz",
diff --git a/package.json b/package.json
index ab4e3d7..4cc4ae3 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,13 @@
     "@auth0/nextjs-auth0": "^3.5.0",
     "@prisma/client": "^5.16.2",
     "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/react-query": "^5.50.1",
     "@tanstack/react-query-devtools": "^5.50.1",
diff --git a/yarn.lock b/yarn.lock
index 5d1122d..cdf095a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -309,7 +309,7 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz"
   integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==
 
-"@radix-ui/react-dialog@^1.0.4":
+"@radix-ui/react-dialog@^1.0.4", "@radix-ui/react-dialog@^1.1.1":
   version "1.1.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz"
   integrity sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg==
@@ -433,6 +433,21 @@
   dependencies:
     "@radix-ui/react-slot" "1.1.0"
 
+"@radix-ui/react-roving-focus@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz"
+  integrity sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-collection" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-scroll-area@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.1.0.tgz"
@@ -482,6 +497,20 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.0"
 
+"@radix-ui/react-tabs@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.0.tgz"
+  integrity sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-tooltip@^1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz"

From 0468ccc9082df0df6820ccf98f2b93eb0010aabd Mon Sep 17 00:00:00 2001
From: Priyanshu <bartwalpriyanshu00@gmail.com>
Date: Tue, 13 Aug 2024 01:24:38 +0530
Subject: [PATCH 2/2] Build error fix

---
 .../[id]/components/options/insert/index.tsx  |   3 +-
 app/writer/[id]/page.tsx                      |  11 +-
 package-lock.json                             | 523 +++++++++++++++++-
 package.json                                  |   1 +
 yarn.lock                                     |  64 ++-
 5 files changed, 590 insertions(+), 12 deletions(-)

diff --git a/app/writer/[id]/components/options/insert/index.tsx b/app/writer/[id]/components/options/insert/index.tsx
index f5ce58f..22dfbcc 100644
--- a/app/writer/[id]/components/options/insert/index.tsx
+++ b/app/writer/[id]/components/options/insert/index.tsx
@@ -3,8 +3,7 @@ import { Editor } from "@tiptap/react";
 
 type InsterOptionsPropTypes = {
   editor: Editor | null,
-  isOpen: boolean
 };
-export default function InsertOptions({ editor, isOpen }: InsterOptionsPropTypes) {
+export default function InsertOptions({ editor }: InsterOptionsPropTypes) {
   return <>Insert</>
 }
diff --git a/app/writer/[id]/page.tsx b/app/writer/[id]/page.tsx
index 28f070e..cd35f09 100644
--- a/app/writer/[id]/page.tsx
+++ b/app/writer/[id]/page.tsx
@@ -19,14 +19,12 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { FormatOptions, InsertOptions } from "./components/options"
 import Header from "./components/Header/Header"
 import Tabs from "./components/Tabs"
-import DrawerResp from './components/OptionsResp'
 import Loading from './components/EditorLoading'
 
 import { extensions, props } from './editor/editorConfig'
 import { GetDocDetails, UpdateDocData, UpdateThumbnail } from './actions'
 import { toast } from 'sonner'
 import useClientSession from '@/lib/customHooks/useClientSession'
-import OptionsResp from './components/OptionsResp'
 
 export default function Dashboard() {
   const params = useParams()
@@ -119,8 +117,8 @@ export default function Dashboard() {
   }, [docData, editor]);
 
   const Options = [
-    <FormatOptions key={1} editor={editor} isOpen={isDrawerOpen} />,
-    <InsertOptions key={2} editor={editor} isOpen={isDrawerOpen} />
+    <FormatOptions key={1} editor={editor} />,
+    <InsertOptions key={2} editor={editor} />
   ]
   const [option, setOption] = useState(0)
 
@@ -130,14 +128,11 @@ export default function Dashboard() {
         editor={editor}
         name={data?.name || ""}
         isSaving={isSaving}
-        isDrawerOpen={isDrawerOpen}
-        setIsDrawerOpen={setIsDrawerOpen}
       />
       <div className="flex h-full">
-        <Tabs option={option} setOption={setOption} isOpen={isDrawerOpen} />
+        <Tabs option={option} setOption={setOption} />
         <div className="w-full flex gap-4 p-4">
           {Options[option]}
-          {/* <OptionsResp editor={editor} isOpen={isDrawerOpen} setIsOpen={setIsDrawerOpen} /> */}
           <ScrollArea className="w-full mb-4 flex justify-center">
             {!data ? <Loading /> :
               <EditorContent editor={editor} ref={editorRef} />
diff --git a/package-lock.json b/package-lock.json
index 6b14a78..e9ce747 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,7 @@
         "react-colorful": "^5.6.1",
         "react-dom": "^18",
         "react-hook-form": "^7.52.1",
+        "sharp": "^0.33.4",
         "sonner": "^1.5.0",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
@@ -125,6 +126,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz",
+      "integrity": "sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -272,6 +282,437 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz",
+      "integrity": "sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.4.tgz",
+      "integrity": "sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=11",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=10.13",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz",
+      "integrity": "sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz",
+      "integrity": "sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz",
+      "integrity": "sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz",
+      "integrity": "sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz",
+      "integrity": "sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz",
+      "integrity": "sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.4.tgz",
+      "integrity": "sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.4.tgz",
+      "integrity": "sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.4.tgz",
+      "integrity": "sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.31",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.4.tgz",
+      "integrity": "sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.4.tgz",
+      "integrity": "sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.4.tgz",
+      "integrity": "sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.4.tgz",
+      "integrity": "sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.4.tgz",
+      "integrity": "sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.4.tgz",
+      "integrity": "sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2854,6 +3295,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2872,6 +3325,15 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -3129,6 +3591,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -4469,6 +4939,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -6639,7 +7114,6 @@
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
       "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
-      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -6682,6 +7156,45 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/sharp": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.4.tgz",
+      "integrity": "sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.0"
+      },
+      "engines": {
+        "libvips": ">=8.15.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.4",
+        "@img/sharp-darwin-x64": "0.33.4",
+        "@img/sharp-libvips-darwin-arm64": "1.0.2",
+        "@img/sharp-libvips-darwin-x64": "1.0.2",
+        "@img/sharp-libvips-linux-arm": "1.0.2",
+        "@img/sharp-libvips-linux-arm64": "1.0.2",
+        "@img/sharp-libvips-linux-s390x": "1.0.2",
+        "@img/sharp-libvips-linux-x64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+        "@img/sharp-linux-arm": "0.33.4",
+        "@img/sharp-linux-arm64": "0.33.4",
+        "@img/sharp-linux-s390x": "0.33.4",
+        "@img/sharp-linux-x64": "0.33.4",
+        "@img/sharp-linuxmusl-arm64": "0.33.4",
+        "@img/sharp-linuxmusl-x64": "0.33.4",
+        "@img/sharp-wasm32": "0.33.4",
+        "@img/sharp-win32-ia32": "0.33.4",
+        "@img/sharp-win32-x64": "0.33.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6734,6 +7247,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/package.json b/package.json
index 4cc4ae3..e4f237d 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
     "react-colorful": "^5.6.1",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "sharp": "^0.33.4",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/yarn.lock b/yarn.lock
index cdf095a..37dda13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1349,11 +1349,27 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-string@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz"
+  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
+color@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz"
+  integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
+  dependencies:
+    color-convert "^2.0.1"
+    color-string "^1.9.0"
+
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
@@ -1515,6 +1531,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+detect-libc@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
 detect-node-es@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
@@ -2271,6 +2292,11 @@ is-array-buffer@^3.0.2, is-array-buffer@^3.0.4:
     call-bind "^1.0.2"
     get-intrinsic "^1.2.1"
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
+
 is-async-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz"
@@ -3515,6 +3541,35 @@ set-function-name@^2.0.1, set-function-name@^2.0.2:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.2"
 
+sharp@^0.33.4:
+  version "0.33.4"
+  resolved "https://registry.npmjs.org/sharp/-/sharp-0.33.4.tgz"
+  integrity sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.3"
+    semver "^7.6.0"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.33.4"
+    "@img/sharp-darwin-x64" "0.33.4"
+    "@img/sharp-libvips-darwin-arm64" "1.0.2"
+    "@img/sharp-libvips-darwin-x64" "1.0.2"
+    "@img/sharp-libvips-linux-arm" "1.0.2"
+    "@img/sharp-libvips-linux-arm64" "1.0.2"
+    "@img/sharp-libvips-linux-s390x" "1.0.2"
+    "@img/sharp-libvips-linux-x64" "1.0.2"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.0.2"
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.2"
+    "@img/sharp-linux-arm" "0.33.4"
+    "@img/sharp-linux-arm64" "0.33.4"
+    "@img/sharp-linux-s390x" "0.33.4"
+    "@img/sharp-linux-x64" "0.33.4"
+    "@img/sharp-linuxmusl-arm64" "0.33.4"
+    "@img/sharp-linuxmusl-x64" "0.33.4"
+    "@img/sharp-wasm32" "0.33.4"
+    "@img/sharp-win32-ia32" "0.33.4"
+    "@img/sharp-win32-x64" "0.33.4"
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -3542,6 +3597,13 @@ signal-exit@^4.0.1:
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
+  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
+  dependencies:
+    is-arrayish "^0.3.1"
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"