Update dependency @types/node to v22

2024-10-06 21:05:33 +00:00
18 changed files with 334 additions and 688 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -0,0 +1 @@
+*.lockb binary diff=lockb
--- a/docs/intro.md
+++ b/docs/intro.md
@ -1,5 +1,5 @@
 ---
-title: '🚀 Introduction'
+title: 'Home'
 published: '10-06-2024'
 summary: 'petentium usu tota noluisse errem elaboraret auctor.'
 ---
--- a/src/app/[[...slug]]/page.tsx
+++ b/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">
-            {/* 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 */}
+        <main>
            <CustomMDX source={content.content} />
        </main>
    );
--- a/src/app/layout.tsx
+++ b/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>
--- a/src/app/styles/globals.css
+++ b/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;
-    }
-}
--- a/src/components/navbar/navbar.tsx
+++ b/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>
    );
--- a/src/components/navbar/search-dialog.tsx
+++ b/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
-                    className="select-none"
-                    placeholder="Start typing to get started..."
-                />
+                <CommandInput 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}`);
--- a/src/components/sidebar/sidebar-links.tsx
+++ b/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 && (
--- a/src/components/sidebar/sidebar.tsx
+++ b/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 => (
-    <>
-        {/* 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 Sidebar = (): ReactElement => {
    const pages: DocsContentMetadata[] = getDocsContent();
    return (
-        <div className="h-full flex flex-col justify-between">
-            {/* Top */}
+        <div className="min-w-32 w-44 py-3 flex flex-col justify-between">
+            {/* Links */}
            <div className="flex flex-col">
-                <div className="xs:hidden pb-3">
-                    <QuickSearchDialog pages={pages} />
-                </div>
                <SidebarLinks pages={pages} />
            </div>

--- a/src/components/theme-switcher.tsx
+++ b/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>
    ) : (
        <></>
--- a/src/components/ui/breadcrumb.tsx
+++ b/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,
-};
--- a/src/components/ui/button.tsx
+++ b/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 }
--- a/src/components/ui/collapsible.tsx
+++ b/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 }
--- a/src/components/ui/command.tsx
+++ b/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,15 +62,12 @@ 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>,
@ -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,
-};
+}
--- a/src/components/ui/dialog.tsx
+++ b/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,
-};
+}
--- a/src/components/ui/input.tsx
+++ b/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 }
--- a/src/components/ui/separator.tsx
+++ b/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,15 +19,13 @@ 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 }
--- a/src/components/ui/sheet.tsx
+++ b/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,
-};