Update dependency eslint-config-next to v14.2.14

Took 2 minutes

.gitattributes

@@ -1 +0,0 @@
-*.lockb binary diff=lockb

docs/intro.md

@@ -1,5 +1,5 @@
 ---
-title: 'Home'
+title: '🚀 Introduction'
 published: '10-06-2024'
 summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 ---

src/app/[[...slug]]/page.tsx

@@ -2,6 +2,14 @@ import { ReactElement } from "react";
 import { getDocsContent } from "@/lib/mdx";
 import { notFound } from "next/navigation";
 import { CustomMDX } from "@/components/mdx";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { capitalizeWords } from "@/lib/string";
 
 /**
  * The page to render the documentation markdown content.
@@ -20,14 +28,44 @@ const DocsPage = async ({
     // Get the content to display based on the provided slug
     const content: DocsContentMetadata | undefined = getDocsContent().find(
         (metadata: DocsContentMetadata): boolean =>
-            metadata.slug === (slug || "home")
+            metadata.slug === (slug || "intro")
     );
     if (!content) {
         notFound();
     }
+    const splitSlug: string[] = content.slug?.split("/") || [];
 
     return (
-        <main>
+        <main className="flex flex-col">
+            {/* Breadcrumb */}
+            <Breadcrumb className="pt-4 select-none">
+                <BreadcrumbList>
+                    {splitSlug.map(
+                        (part: string, index: number): ReactElement => {
+                            const slug: string = splitSlug
+                                .slice(1, index + 1)
+                                .join("/");
+                            return (
+                                <div className="flex items-center" key={part}>
+                                    <BreadcrumbItem>
+                                        <BreadcrumbLink
+                                            href={slug}
+                                            draggable={false}
+                                        >
+                                            {capitalizeWords(part)}
+                                        </BreadcrumbLink>
+                                    </BreadcrumbItem>
+                                    {index < splitSlug.length - 1 && (
+                                        <BreadcrumbSeparator className="pl-1.5" />
+                                    )}
+                                </div>
+                            );
+                        }
+                    )}
+                </BreadcrumbList>
+            </Breadcrumb>
+
+            {/* Content */}
             <CustomMDX source={content.content} />
         </main>
     );

src/app/layout.tsx

@@ -52,7 +52,9 @@ const RootLayout = ({
                 <div className="px-7 max-w-[90rem] mx-auto min-h-screen flex flex-col">
                     <Navbar />
                     <div className="w-full h-full flex flex-grow gap-5">
+                        <div className="hidden xs:flex">
                             <Sidebar />
+                        </div>
                         {children}
                     </div>
                 </div>

src/app/styles/globals.css

@@ -72,9 +72,32 @@ body {
 @layer base {
     * {
         @apply border-border;
+
+        /* Scrollbar (Firefox) */
+        scrollbar-color: hsl(var(--accent)) hsl(var(--background));
+        scrollbar-width: thin;
     }
 
     body {
         @apply bg-background text-foreground;
     }
 }
+
+/* Scrollbar (Chrome & Safari) */
+@layer base {
+    ::-webkit-scrollbar {
+        @apply w-1.5;
+    }
+
+    ::-webkit-scrollbar-track {
+        @apply bg-inherit;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        @apply bg-accent rounded-3xl;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        @apply bg-opacity-80;
+    }
+}

src/components/navbar/navbar.tsx

@@ -2,9 +2,9 @@ import { ReactElement } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
-import { Input } from "@/components/ui/input";
 import QuickSearchDialog from "@/components/navbar/search-dialog";
 import { getDocsContent } from "@/lib/mdx";
+import Sidebar from "@/components/sidebar/sidebar";
 
 const Navbar = (): ReactElement => {
     const pages: DocsContentMetadata[] = getDocsContent();
@@ -50,6 +50,11 @@ const Navbar = (): ReactElement => {
                         icon="/media/discord.svg"
                     />
                 </div>
+
+                {/* Mobile Sidebar */}
+                <div className="flex xs:hidden">
+                    <Sidebar />
+                </div>
             </div>
         </nav>
     );

src/components/navbar/search-dialog.tsx

@@ -44,7 +44,7 @@ const QuickSearchDialog = ({
         <>
             {/* Button to open */}
             <div
-                className="hover:opacity-85 transition-all transform-gpu"
+                className="cursor-pointer hover:opacity-85 transition-all transform-gpu select-none"
                 onClick={() => setOpen(true)}
             >
                 <div className="absolute top-2.5 left-3 z-10">
@@ -69,10 +69,13 @@ const QuickSearchDialog = ({
             {/* Dialog */}
             <CommandDialog open={open} onOpenChange={setOpen}>
                 {/* Input */}
-                <CommandInput placeholder="Start typing to get started..." />
+                <CommandInput
+                    className="select-none"
+                    placeholder="Start typing to get started..."
+                />
 
                 {/* Results */}
-                <CommandList>
+                <CommandList className="select-none">
                     <CommandEmpty className="text-center text-red-500">
                         No results were found.
                     </CommandEmpty>
@@ -85,7 +88,7 @@ const QuickSearchDialog = ({
                             ): ReactElement => (
                                 <CommandItem
                                     key={index}
-                                    className="flex flex-col gap-1 items-start"
+                                    className="flex flex-col gap-1 items-start cursor-pointer"
                                     onSelect={() => {
                                         setOpen(false);
                                         router.push(`/${result.slug}`);

src/components/sidebar/sidebar-links.tsx

@@ -8,7 +8,6 @@ import {
 } from "@/components/ui/collapsible";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { ChevronRight } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
 import { AnimatePresence, motion } from "framer-motion";
@@ -47,12 +46,12 @@ const CategoryItem = ({
 }) => {
     const path = usePathname();
     const active =
-        (path === "/" && node.slug === "home") || path === `/${node.slug}`;
+        (path === "/" && node.slug === "intro") || path === `/${node.slug}`;
     const [isOpen, setIsOpen] = useState(true);
     const hasChildren = Object.keys(node.children).length > 0;
 
     return (
-        <div className={`relative ${depth > 0 ? "ml-4" : ""}`}>
+        <div className={`relative ${depth > 0 ? "ml-2.5" : ""} select-none`}>
             {/* Indentation */}
             {depth > 0 && (
                 <div
@@ -71,12 +70,12 @@ const CategoryItem = ({
                         draggable={false}
                     >
                         <Button
-                            variant="ghost"
                             className={cn(
-                                `relative ${depth > 0 ? "pl-4" : ""} w-full justify-between`,
+                                `relative px-1.5 ${depth > 0 ? "pl-4" : ""} w-full justify-between`,
                                 active &&
                                     "bg-primary/15 hover:bg-primary/20 text-primary/95 hover:text-primary"
                             )}
+                            variant="ghost"
                         >
                             {node.title}
                             {hasChildren && (

src/components/sidebar/sidebar.tsx

@@ -3,13 +3,40 @@ import { Separator } from "@/components/ui/separator";
 import { getDocsContent } from "@/lib/mdx";
 import SidebarLinks from "@/components/sidebar/sidebar-links";
 import ThemeSwitcher from "@/components/theme-switcher";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import QuickSearchDialog from "@/components/navbar/search-dialog";
+import { Bars3BottomRightIcon } from "@heroicons/react/24/outline";
 
-const Sidebar = (): ReactElement => {
+const Sidebar = (): ReactElement => (
+    <>
+        {/* Mobile */}
+        <div className="xs:hidden">
+            <Sheet>
+                <SheetTrigger className="flex items-center">
+                    <Bars3BottomRightIcon className="w-6 h-6" />
+                </SheetTrigger>
+                <SheetContent className="h-full px-11 pt-10" side="top">
+                    <SidebarContent />
+                </SheetContent>
+            </Sheet>
+        </div>
+
+        {/* Desktop */}
+        <div className="hidden min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
+            <SidebarContent />
+        </div>
+    </>
+);
+
+const SidebarContent = (): ReactElement => {
     const pages: DocsContentMetadata[] = getDocsContent();
     return (
-        <div className="min-w-32 w-44 py-3 flex flex-col justify-between">
-            {/* Links */}
+        <div className="h-full flex flex-col justify-between">
+            {/* Top */}
             <div className="flex flex-col">
+                <div className="xs:hidden pb-3">
+                    <QuickSearchDialog pages={pages} />
+                </div>
                 <SidebarLinks pages={pages} />
             </div>
 

src/components/theme-switcher.tsx

@@ -24,7 +24,7 @@ const ThemeSwitcher = (): ReactElement => {
 
     return mounted ? (
         <Button
-            className="p-1.5 flex gap-7 items-center hover:opacity-85"
+            className="p-1.5 flex gap-7 justify-start items-center hover:opacity-85 select-none"
             variant="ghost"
             onClick={() => setTheme(isLight ? "dark" : "light")}
         >
@@ -38,7 +38,7 @@ const ThemeSwitcher = (): ReactElement => {
                     }}
                     transition={{ duration: 0.5 }}
                 >
-                    <Sun className="w-[1.2rem] h-[1.2rem]" />
+                    <Sun className="w-[1.1rem] h-[1.1rem]" />
                 </motion.div>
                 <motion.div
                     className="absolute"
@@ -49,10 +49,10 @@ const ThemeSwitcher = (): ReactElement => {
                     }}
                     transition={{ duration: 0.5 }}
                 >
-                    <MoonStar className="w-[1.2rem] h-[1.2rem]" />
+                    <MoonStar className="w-[1.1rem] h-[1.1rem]" />
                 </motion.div>
             </div>
-            <span className="font-semibold">{capitalizeWords(theme)}</span>
+            <span>{capitalizeWords(theme)}</span>
         </Button>
     ) : (
         <></>

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+    HTMLElement,
+    React.ComponentPropsWithoutRef<"nav"> & {
+        separator?: React.ReactNode;
+    }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+    HTMLOListElement,
+    React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+    <ol
+        ref={ref}
+        className={cn(
+            "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+            className
+        )}
+        {...props}
+    />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+    <li
+        ref={ref}
+        className={cn("inline-flex items-center gap-1.5", className)}
+        {...props}
+    />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+    HTMLAnchorElement,
+    React.ComponentPropsWithoutRef<"a"> & {
+        asChild?: boolean;
+    }
+>(({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+
+    return (
+        <Comp
+            ref={ref}
+            className={cn("transition-colors hover:text-foreground", className)}
+            {...props}
+        />
+    );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+    HTMLSpanElement,
+    React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+    <span
+        ref={ref}
+        role="link"
+        aria-disabled="true"
+        aria-current="page"
+        className={cn("font-normal text-foreground", className)}
+        {...props}
+    />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+    children,
+    className,
+    ...props
+}: React.ComponentProps<"li">) => (
+    <li
+        role="presentation"
+        aria-hidden="true"
+        className={cn("[&>svg]:size-3.5", className)}
+        {...props}
+    >
+        {children ?? <ChevronRightIcon />}
+    </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+    className,
+    ...props
+}: React.ComponentProps<"span">) => (
+    <span
+        role="presentation"
+        aria-hidden="true"
+        className={cn("flex h-9 w-9 items-center justify-center", className)}
+        {...props}
+    >
+        <DotsHorizontalIcon className="h-4 w-4" />
+        <span className="sr-only">More</span>
+    </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+    Breadcrumb,
+    BreadcrumbList,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbEllipsis,
+};

src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
     "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
@@ -32,26 +32,26 @@ const buttonVariants = cva(
             size: "default",
         },
     }
-)
+);
 
 export interface ButtonProps
     extends React.ButtonHTMLAttributes<HTMLButtonElement>,
         VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+    asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+        const Comp = asChild ? Slot : "button";
         return (
             <Comp
                 className={cn(buttonVariants({ variant, size, className }))}
                 ref={ref}
                 {...props}
             />
-    )
+        );
     }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/collapsible.tsx

@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/components/ui/command.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
-import { Command as CommandPrimitive } from "cmdk"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive>,
@@ -20,8 +20,8 @@ const Command = React.forwardRef<
         )}
         {...props}
     />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 interface CommandDialogProps extends DialogProps {}
 
@@ -34,8 +34,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
                 </Command>
             </DialogContent>
         </Dialog>
-  )
-}
+    );
+};
 
 const CommandInput = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive.Input>,
@@ -52,9 +52,9 @@ const CommandInput = React.forwardRef<
             {...props}
         />
     </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive.List>,
@@ -62,12 +62,15 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <CommandPrimitive.List
         ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+        className={cn(
+            "max-h-[300px] overflow-y-auto overflow-x-hidden",
+            className
+        )}
         {...props}
     />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -78,9 +81,9 @@ const CommandEmpty = React.forwardRef<
         className="py-6 text-center text-sm"
         {...props}
     />
-))
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive.Group>,
@@ -94,9 +97,9 @@ const CommandGroup = React.forwardRef<
         )}
         {...props}
     />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -107,8 +110,8 @@ const CommandSeparator = React.forwardRef<
         className={cn("-mx-1 h-px bg-border", className)}
         {...props}
     />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive.Item>,
@@ -122,9 +125,9 @@ const CommandItem = React.forwardRef<
         )}
         {...props}
     />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
     className,
@@ -138,9 +141,9 @@ const CommandShortcut = ({
             )}
             {...props}
         />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+    );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
     Command,
@@ -152,4 +155,4 @@ export {
     CommandItem,
     CommandShortcut,
     CommandSeparator,
-}
+};

src/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -26,8 +26,8 @@ const DialogOverlay = React.forwardRef<
         )}
         {...props}
     />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Content>,
@@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
             </DialogPrimitive.Close>
         </DialogPrimitive.Content>
     </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
     className,
@@ -64,8 +64,8 @@ const DialogHeader = ({
         )}
         {...props}
     />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
     className,
@@ -78,8 +78,8 @@ const DialogFooter = ({
         )}
         {...props}
     />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Title>,
@@ -93,8 +93,8 @@ const DialogTitle = React.forwardRef<
         )}
         {...props}
     />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +105,8 @@ const DialogDescription = React.forwardRef<
         className={cn("text-sm text-muted-foreground", className)}
         {...props}
     />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
     Dialog,
@@ -119,4 +119,4 @@ export {
     DialogFooter,
     DialogTitle,
     DialogDescription,
-}
+};

src/components/ui/input.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface InputProps
     extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -17,9 +17,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 ref={ref}
                 {...props}
             />
-    )
+        );
     }
-)
-Input.displayName = "Input"
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

src/components/ui/separator.tsx

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Separator = React.forwardRef<
     React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -19,13 +19,15 @@ const Separator = React.forwardRef<
             orientation={orientation}
             className={cn(
                 "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+                orientation === "horizontal"
+                    ? "h-[1px] w-full"
+                    : "h-full w-[1px]",
                 className
             )}
             {...props}
         />
     )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };

src/components/ui/sheet.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Overlay
+        className={cn(
+            "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+    "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-[450ms] data-[state=open]:duration-[450ms] data-[state=open]:animate-in data-[state=closed]:animate-out",
+    {
+        variants: {
+            side: {
+                top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+                bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+                right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+            },
+        },
+        defaultVariants: {
+            side: "right",
+        },
+    }
+);
+
+interface SheetContentProps
+    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+        VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Content>,
+    SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+            ref={ref}
+            className={cn(sheetVariants({ side }), className)}
+            {...props}
+        >
+            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                <Cross2Icon className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+            {children}
+        </SheetPrimitive.Content>
+    </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col space-y-2 text-center sm:text-left",
+            className
+        )}
+        {...props}
+    />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+            className
+        )}
+        {...props}
+    />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Title
+        ref={ref}
+        className={cn("text-lg font-semibold text-foreground", className)}
+        {...props}
+    />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Description
+        ref={ref}
+        className={cn("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+    Sheet,
+    SheetPortal,
+    SheetOverlay,
+    SheetTrigger,
+    SheetClose,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+};