Update dependency @types/node to v22

.gitattributes

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

docs/home.md

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

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

@@ -2,14 +2,6 @@ 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.
@@ -28,44 +20,14 @@ 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 || "intro")
+            metadata.slug === (slug || "home")
     );
     if (!content) {
         notFound();
     }
-    const splitSlug: string[] = content.slug?.split("/") || [];
 
     return (
-        <main className="flex flex-col">
+        <main>
-            {/* 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,9 +52,7 @@ 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,32 +72,9 @@ 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,11 +50,6 @@ 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="cursor-pointer hover:opacity-85 transition-all transform-gpu select-none"
+                className="hover:opacity-85 transition-all transform-gpu"
                 onClick={() => setOpen(true)}
             >
                 <div className="absolute top-2.5 left-3 z-10">
@@ -69,13 +69,10 @@ const QuickSearchDialog = ({
             {/* Dialog */}
             <CommandDialog open={open} onOpenChange={setOpen}>
                 {/* Input */}
-                <CommandInput
+                <CommandInput placeholder="Start typing to get started..." />
-                    className="select-none"
-                    placeholder="Start typing to get started..."
-                />
 
                 {/* Results */}
-                <CommandList className="select-none">
+                <CommandList>
                     <CommandEmpty className="text-center text-red-500">
                         No results were found.
                     </CommandEmpty>
@@ -88,7 +85,7 @@ const QuickSearchDialog = ({
                             ): ReactElement => (
                                 <CommandItem
                                     key={index}
-                                    className="flex flex-col gap-1 items-start cursor-pointer"
+                                    className="flex flex-col gap-1 items-start"
                                     onSelect={() => {
                                         setOpen(false);
                                         router.push(`/${result.slug}`);

src/components/sidebar/sidebar-links.tsx

@@ -8,6 +8,7 @@ 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";
@@ -46,12 +47,12 @@ const CategoryItem = ({
 }) => {
     const path = usePathname();
     const active =
-        (path === "/" && node.slug === "intro") || path === `/${node.slug}`;
+        (path === "/" && node.slug === "home") || path === `/${node.slug}`;
     const [isOpen, setIsOpen] = useState(true);
     const hasChildren = Object.keys(node.children).length > 0;
 
     return (
-        <div className={`relative ${depth > 0 ? "ml-2.5" : ""} select-none`}>
+        <div className={`relative ${depth > 0 ? "ml-4" : ""}`}>
             {/* Indentation */}
             {depth > 0 && (
                 <div
@@ -70,12 +71,12 @@ const CategoryItem = ({
                         draggable={false}
                     >
                         <Button
+                            variant="ghost"
                             className={cn(
-                                `relative px-1.5 ${depth > 0 ? "pl-4" : ""} w-full justify-between`,
+                                `relative ${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,40 +3,13 @@ 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="h-full flex flex-col justify-between">
+        <div className="min-w-32 w-44 py-3 flex flex-col justify-between">
-            {/* Top */}
+            {/* Links */}
             <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 justify-start items-center hover:opacity-85 select-none"
+            className="p-1.5 flex gap-7 items-center hover:opacity-85"
             variant="ghost"
             onClick={() => setTheme(isLight ? "dark" : "light")}
         >
@@ -38,7 +38,7 @@ const ThemeSwitcher = (): ReactElement => {
                     }}
                     transition={{ duration: 0.5 }}
                 >
-                    <Sun className="w-[1.1rem] h-[1.1rem]" />
+                    <Sun className="w-[1.2rem] h-[1.2rem]" />
                 </motion.div>
                 <motion.div
                     className="absolute"
@@ -49,10 +49,10 @@ const ThemeSwitcher = (): ReactElement => {
                     }}
                     transition={{ duration: 0.5 }}
                 >
-                    <MoonStar className="w-[1.1rem] h-[1.1rem]" />
+                    <MoonStar className="w-[1.2rem] h-[1.2rem]" />
                 </motion.div>
             </div>
-            <span>{capitalizeWords(theme)}</span>
+            <span className="font-semibold">{capitalizeWords(theme)}</span>
         </Button>
     ) : (
         <></>

src/components/ui/breadcrumb.tsx

@@ -1,115 +0,0 @@
-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 * as React from "react"
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority";
+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 * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog";
+import { type DialogProps } from "@radix-ui/react-dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
-import { Command as CommandPrimitive } from "cmdk";
+import { Command as CommandPrimitive } from "cmdk"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+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,15 +62,12 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-        className={cn(
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-            "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>,
@@ -81,9 +78,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>,
@@ -97,9 +94,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>,
@@ -110,8 +107,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>,
@@ -125,9 +122,9 @@ const CommandItem = React.forwardRef<
     )}
     {...props}
   />
-));
+))
 
-CommandItem.displayName = CommandPrimitive.Item.displayName;
+CommandItem.displayName = CommandPrimitive.Item.displayName
 
 const CommandShortcut = ({
   className,
@@ -141,9 +138,9 @@ const CommandShortcut = ({
       )}
       {...props}
     />
-    );
+  )
-};
+}
-CommandShortcut.displayName = "CommandShortcut";
+CommandShortcut.displayName = "CommandShortcut"
 
 export {
   Command,
@@ -155,4 +152,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 React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons";
+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 React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+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,15 +19,13 @@ const Separator = React.forwardRef<
       orientation={orientation}
       className={cn(
         "shrink-0 bg-border",
-                orientation === "horizontal"
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-                    ? "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

@@ -1,138 +0,0 @@
-"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,
-};