From f6e3ce3354767d825e1ce51eee473f5df2b2d75d Mon Sep 17 00:00:00 2001
From: steeeee0223 <mr.steven7@gmail.com>
Date: Thu, 11 Jan 2024 03:42:04 +0000
Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=A7=A9=20`ui`=20Added=20`shadcn-ui`?=
 =?UTF-8?q?=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/package.json                      |   8 +
 packages/ui/src/components/ui/accordion.tsx   |  58 +++
 .../ui/src/components/ui/alert-dialog.tsx     | 141 +++++++
 packages/ui/src/components/ui/avatar.tsx      |  50 +++
 packages/ui/src/components/ui/command.tsx     | 155 +++++++
 packages/ui/src/components/ui/dialog.tsx      | 122 ++++++
 packages/ui/src/components/ui/index.ts        |  11 +
 packages/ui/src/components/ui/separator.tsx   |  31 ++
 packages/ui/src/components/ui/sheet.tsx       | 140 +++++++
 packages/ui/src/components/ui/skeleton.tsx    |  15 +
 packages/ui/src/components/ui/tabs.tsx        |  55 +++
 packages/ui/src/components/ui/textarea.tsx    |  24 ++
 packages/ui/src/components/ui/tooltip.tsx     |  30 ++
 pnpm-lock.yaml                                | 379 +++++++++++++++++-
 14 files changed, 1217 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/src/components/ui/accordion.tsx
 create mode 100644 packages/ui/src/components/ui/alert-dialog.tsx
 create mode 100644 packages/ui/src/components/ui/avatar.tsx
 create mode 100644 packages/ui/src/components/ui/command.tsx
 create mode 100644 packages/ui/src/components/ui/dialog.tsx
 create mode 100644 packages/ui/src/components/ui/separator.tsx
 create mode 100644 packages/ui/src/components/ui/sheet.tsx
 create mode 100644 packages/ui/src/components/ui/skeleton.tsx
 create mode 100644 packages/ui/src/components/ui/tabs.tsx
 create mode 100644 packages/ui/src/components/ui/textarea.tsx
 create mode 100644 packages/ui/src/components/ui/tooltip.tsx

diff --git a/packages/ui/package.json b/packages/ui/package.json
index e75811c1..4a1974f5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -18,12 +18,20 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
+    "cmdk": "^0.2.0",
     "next-themes": "^0.2.1",
     "react-hook-form": "^7.49.2",
     "sonner": "^1.3.1",
diff --git a/packages/ui/src/components/ui/accordion.tsx b/packages/ui/src/components/ui/accordion.tsx
new file mode 100644
index 00000000..24c788c2
--- /dev/null
+++ b/packages/ui/src/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/packages/ui/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..25e7b474
--- /dev/null
+++ b/packages/ui/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.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}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/packages/ui/src/components/ui/avatar.tsx b/packages/ui/src/components/ui/avatar.tsx
new file mode 100644
index 00000000..51e507ba
--- /dev/null
+++ b/packages/ui/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
new file mode 100644
index 00000000..17cc641e
--- /dev/null
+++ b/packages/ui/src/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
new file mode 100644
index 00000000..01ff19c7
--- /dev/null
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    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}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/packages/ui/src/components/ui/index.ts b/packages/ui/src/components/ui/index.ts
index 78962695..accb7c1a 100644
--- a/packages/ui/src/components/ui/index.ts
+++ b/packages/ui/src/components/ui/index.ts
@@ -1,8 +1,19 @@
+export * from "./accordion";
+export * from "./alert-dialog";
+export * from "./avatar";
 export * from "./button";
+export * from "./command";
+export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./form";
 export * from "./input";
 export * from "./label";
 export * from "./popover";
+export * from "./separator";
+export * from "./sheet";
+export * from "./skeleton";
+export * from "./tabs";
+export * from "./textarea";
 export * from "./theme";
 export * from "./toast";
+export * from "./tooltip";
diff --git a/packages/ui/src/components/ui/separator.tsx b/packages/ui/src/components/ui/separator.tsx
new file mode 100644
index 00000000..12d81c4a
--- /dev/null
+++ b/packages/ui/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/packages/ui/src/components/ui/sheet.tsx b/packages/ui/src/components/ui/sheet.tsx
new file mode 100644
index 00000000..a37f17ba
--- /dev/null
+++ b/packages/ui/src/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+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=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    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}
+    >
+      {children}
+      <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">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </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,
+}
diff --git a/packages/ui/src/components/ui/skeleton.tsx b/packages/ui/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..01b8b6d4
--- /dev/null
+++ b/packages/ui/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/packages/ui/src/components/ui/tabs.tsx b/packages/ui/src/components/ui/tabs.tsx
new file mode 100644
index 00000000..26eb1091
--- /dev/null
+++ b/packages/ui/src/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/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..9f9a6dc5
--- /dev/null
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..30fc44d9
--- /dev/null
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2972f3d..49c48dbd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -404,6 +404,18 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.3.4
         version: 3.3.4(react-hook-form@7.49.2)
+      '@radix-ui/react-accordion':
+        specifier: ^1.1.2
+        version: 1.1.2(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-alert-dialog':
+        specifier: ^1.0.5
+        version: 1.0.5(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-avatar':
+        specifier: ^1.0.4
+        version: 1.0.4(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-dialog':
+        specifier: ^1.0.5
+        version: 1.0.5(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.0.6
         version: 2.0.6(react-dom@18.2.0)(react@18.2.0)
@@ -416,12 +428,24 @@ importers:
       '@radix-ui/react-popover':
         specifier: ^1.0.7
         version: 1.0.7(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-separator':
+        specifier: ^1.0.3
+        version: 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-tabs':
+        specifier: ^1.0.4
+        version: 1.0.4(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-tooltip':
+        specifier: ^1.0.7
+        version: 1.0.7(react-dom@18.2.0)(react@18.2.0)
       class-variance-authority:
         specifier: ^0.7.0
         version: 0.7.0
+      cmdk:
+        specifier: ^0.2.0
+        version: 0.2.0(react-dom@18.2.0)(react@18.2.0)
       next-themes:
         specifier: ^0.2.1
         version: 0.2.1(next@14.0.4)(react-dom@18.2.0)(react@18.2.0)
@@ -3681,6 +3705,57 @@ packages:
     dependencies:
       '@babel/runtime': 7.23.7
 
+  /@radix-ui/react-accordion@1.1.2(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collapsible': 1.0.3(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-alert-dialog@1.0.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-dialog': 1.0.5(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.46)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
     peerDependencies:
@@ -3701,6 +3776,54 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
+  /@radix-ui/react-avatar@1.0.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@radix-ui/react-collapsible@1.0.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==}
     peerDependencies:
@@ -3768,6 +3891,65 @@ packages:
       '@types/react': 18.2.46
       react: 18.2.0
 
+  /@radix-ui/react-dialog@1.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Yn9YU+QlHYLWwV1XfKiqnGVpWYWk6MeBVM6x/bcoyPvxgjQGoeT35482viLPctTMWoMw0PoHgqfSox7Ig+957Q==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      '@radix-ui/react-context': 1.0.0(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.0(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.0(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.0(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.0(react@18.2.0)
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.4(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
+  /@radix-ui/react-dialog@1.0.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.46)(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-direction@1.0.0(react@18.2.0):
     resolution: {integrity: sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==}
     peerDependencies:
@@ -3790,6 +3972,22 @@ packages:
       '@types/react': 18.2.46
       react: 18.2.0
 
+  /@radix-ui/react-dismissable-layer@1.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.0.0(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
@@ -3863,6 +4061,15 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-focus-guards@1.0.0(react@18.2.0):
+    resolution: {integrity: sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.46)(react@18.2.0):
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
     peerDependencies:
@@ -3876,6 +4083,20 @@ packages:
       '@types/react': 18.2.46
       react: 18.2.0
 
+  /@radix-ui/react-focus-scope@1.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-focus-scope@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==}
     peerDependencies:
@@ -3928,6 +4149,16 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-id@1.0.0(react@18.2.0):
+    resolution: {integrity: sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-id@1.0.1(@types/react@18.2.46)(react@18.2.0):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
@@ -4088,6 +4319,18 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-portal@1.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/react-primitive': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==}
     peerDependencies:
@@ -4161,6 +4404,18 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-primitive@1.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/react-slot': 1.0.0(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-primitive@1.0.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==}
     peerDependencies:
@@ -4301,7 +4556,16 @@ packages:
       '@types/react-dom': 18.2.18
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
+
+  /@radix-ui/react-slot@1.0.0(react@18.2.0):
+    resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      react: 18.2.0
+    dev: false
 
   /@radix-ui/react-slot@1.0.1(react@18.2.0):
     resolution: {integrity: sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==}
@@ -4327,6 +4591,32 @@ packages:
       '@types/react': 18.2.46
       react: 18.2.0
 
+  /@radix-ui/react-tabs@1.0.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==}
     peerDependencies:
@@ -4404,6 +4694,36 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
+  /@radix-ui/react-tooltip@1.0.7(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.3(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.46)(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0):
     resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
     peerDependencies:
@@ -4426,6 +4746,16 @@ packages:
       '@types/react': 18.2.46
       react: 18.2.0
 
+  /@radix-ui/react-use-controllable-state@1.0.0(react@18.2.0):
+    resolution: {integrity: sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.46)(react@18.2.0):
     resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
     peerDependencies:
@@ -4440,6 +4770,16 @@ packages:
       '@types/react': 18.2.46
       react: 18.2.0
 
+  /@radix-ui/react-use-escape-keydown@1.0.0(react@18.2.0):
+    resolution: {integrity: sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.23.7
+      '@radix-ui/react-use-callback-ref': 1.0.0(react@18.2.0)
+      react: 18.2.0
+    dev: false
+
   /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.46)(react@18.2.0):
     resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==}
     peerDependencies:
@@ -4537,7 +4877,6 @@ packages:
       '@types/react-dom': 18.2.18
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
-    dev: true
 
   /@radix-ui/rect@1.0.1:
     resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==}
@@ -8262,6 +8601,20 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /cmdk@0.2.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      '@radix-ui/react-dialog': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      command-score: 0.1.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -8313,6 +8666,10 @@ packages:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
     dev: false
 
+  /command-score@0.1.2:
+    resolution: {integrity: sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w==}
+    dev: false
+
   /commander@10.0.1:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
@@ -14507,6 +14864,24 @@ packages:
       react-style-singleton: 2.2.1(@types/react@18.2.46)(react@18.2.0)
       tslib: 2.5.0
 
+  /react-remove-scroll@2.5.4(react@18.2.0):
+    resolution: {integrity: sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      react: 18.2.0
+      react-remove-scroll-bar: 2.3.4(@types/react@18.2.46)(react@18.2.0)
+      react-style-singleton: 2.2.1(@types/react@18.2.46)(react@18.2.0)
+      tslib: 2.5.0
+      use-callback-ref: 1.3.1(@types/react@18.2.46)(react@18.2.0)
+      use-sidecar: 1.1.2(@types/react@18.2.46)(react@18.2.0)
+    dev: false
+
   /react-remove-scroll@2.5.5(@types/react@18.2.46)(react@18.2.0):
     resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==}
     engines: {node: '>=10'}

From 611f5cbf560ea90d7fae5c866f4ac888055cc67d Mon Sep 17 00:00:00 2001
From: steeeee0223 <mr.steven7@gmail.com>
Date: Thu, 11 Jan 2024 07:40:17 +0000
Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=A7=A9=20`ui`=20Add=20custom=20compon?=
 =?UTF-8?q?ents:=20cover(-picker),=20forms,=20image=20dropzone,=20activity?=
 =?UTF-8?q?=20item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/custom/activity-item.stories.tsx  |  25 +
 .../stories/custom/cover-picker.stories.tsx   |  30 +
 .../src/stories/custom/cover.stories.tsx      |  22 +
 .../src/stories/custom/spinner.stories.tsx    |  17 +
 .../dnd/single-image-dropzone.stories.tsx     |  17 +
 .../src/stories/form/form-errors.stories.tsx  |  22 +
 .../src/stories/form/form-submit.stories.tsx  |  17 +
 packages/ui/package.json                      |   5 +-
 .../custom/activity-item/index.test.tsx       |  19 +
 .../components/custom/activity-item/index.tsx |  30 +
 .../custom/activity-item/index.utils.ts       |  32 +
 .../custom/cover-picker/index.test.tsx        |  15 +
 .../components/custom/cover-picker/index.tsx  | 112 +++
 .../custom/cover-picker/unsplash.tsx          |  92 ++
 .../components/custom/cover/index.test.tsx    |  10 +
 .../ui/src/components/custom/cover/index.tsx  |  80 ++
 packages/ui/src/components/custom/index.ts    |   4 +
 .../components/custom/spinner/index.test.tsx  |  10 +
 .../src/components/custom/spinner/index.tsx   |  24 +
 packages/ui/src/components/dnd/index.ts       |   1 +
 .../dnd/single-image-dropzone/index.test.tsx  |  10 +
 .../dnd/single-image-dropzone/index.tsx       | 228 +++++
 .../form/form-errors/index.test.tsx           |  15 +
 .../src/components/form/form-errors/index.tsx |  31 +
 .../form/form-submit/index.test.tsx           |  10 +
 .../src/components/form/form-submit/index.tsx |  32 +
 packages/ui/src/components/form/index.ts      |   2 +
 packages/ui/src/components/index.ts           |   3 +
 packages/ui/src/components/ui/button.tsx      |   2 +-
 packages/ui/src/constants/images.ts           | 948 ++++++++++++++++++
 packages/ui/src/constants/keyboard.ts         |   1 +
 pnpm-lock.yaml                                |  42 +
 32 files changed, 1906 insertions(+), 2 deletions(-)
 create mode 100644 apps/storybook/src/stories/custom/activity-item.stories.tsx
 create mode 100644 apps/storybook/src/stories/custom/cover-picker.stories.tsx
 create mode 100644 apps/storybook/src/stories/custom/cover.stories.tsx
 create mode 100644 apps/storybook/src/stories/custom/spinner.stories.tsx
 create mode 100644 apps/storybook/src/stories/dnd/single-image-dropzone.stories.tsx
 create mode 100644 apps/storybook/src/stories/form/form-errors.stories.tsx
 create mode 100644 apps/storybook/src/stories/form/form-submit.stories.tsx
 create mode 100644 packages/ui/src/components/custom/activity-item/index.test.tsx
 create mode 100644 packages/ui/src/components/custom/activity-item/index.tsx
 create mode 100644 packages/ui/src/components/custom/activity-item/index.utils.ts
 create mode 100644 packages/ui/src/components/custom/cover-picker/index.test.tsx
 create mode 100644 packages/ui/src/components/custom/cover-picker/index.tsx
 create mode 100644 packages/ui/src/components/custom/cover-picker/unsplash.tsx
 create mode 100644 packages/ui/src/components/custom/cover/index.test.tsx
 create mode 100644 packages/ui/src/components/custom/cover/index.tsx
 create mode 100644 packages/ui/src/components/custom/index.ts
 create mode 100644 packages/ui/src/components/custom/spinner/index.test.tsx
 create mode 100644 packages/ui/src/components/custom/spinner/index.tsx
 create mode 100644 packages/ui/src/components/dnd/index.ts
 create mode 100644 packages/ui/src/components/dnd/single-image-dropzone/index.test.tsx
 create mode 100644 packages/ui/src/components/dnd/single-image-dropzone/index.tsx
 create mode 100644 packages/ui/src/components/form/form-errors/index.test.tsx
 create mode 100644 packages/ui/src/components/form/form-errors/index.tsx
 create mode 100644 packages/ui/src/components/form/form-submit/index.test.tsx
 create mode 100644 packages/ui/src/components/form/form-submit/index.tsx
 create mode 100644 packages/ui/src/components/form/index.ts
 create mode 100644 packages/ui/src/constants/images.ts
 create mode 100644 packages/ui/src/constants/keyboard.ts

diff --git a/apps/storybook/src/stories/custom/activity-item.stories.tsx b/apps/storybook/src/stories/custom/activity-item.stories.tsx
new file mode 100644
index 00000000..e65789f9
--- /dev/null
+++ b/apps/storybook/src/stories/custom/activity-item.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ActivityItem } from "@acme/ui/components";
+
+const meta = {
+  title: "custom/Activity Item",
+  component: ActivityItem,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ActivityItem>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: {
+      username: "John Doe",
+      avatar: "https://github.com/shadcn.png",
+      action: "CREATE",
+      entity: { entityId: "1", title: "README.md", type: "note" },
+      createdAt: new Date(),
+    },
+  },
+};
diff --git a/apps/storybook/src/stories/custom/cover-picker.stories.tsx b/apps/storybook/src/stories/custom/cover-picker.stories.tsx
new file mode 100644
index 00000000..75ef2186
--- /dev/null
+++ b/apps/storybook/src/stories/custom/cover-picker.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ImageIcon } from "lucide-react";
+
+import { Button, CoverPicker } from "@acme/ui/components";
+
+const meta = {
+  title: "custom/Cover Picker",
+  component: CoverPicker,
+  tags: ["autodocs"],
+} satisfies Meta<typeof CoverPicker>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    asChild: true,
+    onUploadChange: async (file) => console.log(`Uploading file: ${file.name}`),
+    onRemove: async () => console.log(`Removing file`),
+    onUnsplash: async (url) => console.log(`Uploading unsplash image: ${url}`),
+    children: (
+      <>
+        <Button variant="outline">
+          <ImageIcon className="mr-2 h-4 w-4" />
+          Change cover
+        </Button>
+      </>
+    ),
+  },
+};
diff --git a/apps/storybook/src/stories/custom/cover.stories.tsx b/apps/storybook/src/stories/custom/cover.stories.tsx
new file mode 100644
index 00000000..4d0ef7ec
--- /dev/null
+++ b/apps/storybook/src/stories/custom/cover.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import image from "@/stories/assets/addon-library.png";
+
+import { Cover } from "@acme/ui/components";
+
+const meta = {
+  title: "custom/Cover",
+  component: Cover,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Cover>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    url: image.src,
+    onUnsplash: async (url) => console.log(`Uploading unsplash image: ${url}`),
+    onUploadChange: async (file) => console.log(`Uploading file: ${file.name}`),
+    onRemove: async () => console.log(`Removing file`),
+  },
+};
diff --git a/apps/storybook/src/stories/custom/spinner.stories.tsx b/apps/storybook/src/stories/custom/spinner.stories.tsx
new file mode 100644
index 00000000..4e21b961
--- /dev/null
+++ b/apps/storybook/src/stories/custom/spinner.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Spinner } from "@acme/ui/components";
+
+const meta = {
+    title: "custom/Spinner",
+    component: Spinner,
+    parameters: { layout: "centered" },
+    tags: ["autodocs"],
+} satisfies Meta<typeof Spinner>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};
diff --git a/apps/storybook/src/stories/dnd/single-image-dropzone.stories.tsx b/apps/storybook/src/stories/dnd/single-image-dropzone.stories.tsx
new file mode 100644
index 00000000..b369065e
--- /dev/null
+++ b/apps/storybook/src/stories/dnd/single-image-dropzone.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SingleImageDropzone } from "@acme/ui/components";
+
+const meta = {
+    title: "dnd/Single Image Dropzone",
+    component: SingleImageDropzone,
+    parameters: { layout: "centered" },
+    tags: ["autodocs"],
+} satisfies Meta<typeof SingleImageDropzone>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};
diff --git a/apps/storybook/src/stories/form/form-errors.stories.tsx b/apps/storybook/src/stories/form/form-errors.stories.tsx
new file mode 100644
index 00000000..b2b869d6
--- /dev/null
+++ b/apps/storybook/src/stories/form/form-errors.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { FormErrors } from "@acme/ui/components";
+
+const meta = {
+  title: "form/Form Errors",
+  component: FormErrors,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FormErrors>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: "email",
+    errors: {
+      email: ["Email should contain an `@` sign"],
+    },
+  },
+};
diff --git a/apps/storybook/src/stories/form/form-submit.stories.tsx b/apps/storybook/src/stories/form/form-submit.stories.tsx
new file mode 100644
index 00000000..5357c77e
--- /dev/null
+++ b/apps/storybook/src/stories/form/form-submit.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { FormSubmit } from "@acme/ui/components";
+
+const meta = {
+  title: "form/Form Submit",
+  component: FormSubmit,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FormSubmit>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Submit" },
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4a1974f5..dfd3f45f 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -32,11 +32,14 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^0.2.0",
+    "date-fns": "^3.2.0",
     "next-themes": "^0.2.1",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "unsplash-js": "^7.0.19"
   },
   "devDependencies": {
     "@acme/eslint-config": "workspace:^0.2.0",
diff --git a/packages/ui/src/components/custom/activity-item/index.test.tsx b/packages/ui/src/components/custom/activity-item/index.test.tsx
new file mode 100644
index 00000000..5faba781
--- /dev/null
+++ b/packages/ui/src/components/custom/activity-item/index.test.tsx
@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+
+import type { Log } from "./index.utils";
+import { ActivityItem } from ".";
+
+const mockData: Log = {
+  username: "John Doe",
+  avatar: "https://github.com/shadcn.png",
+  action: "CREATE",
+  entity: { entityId: "1", title: "README.md", type: "note" },
+  createdAt: new Date(),
+};
+
+describe("<ActivityItem />", () => {
+  it("should render the username", () => {
+    const { getByText } = render(<ActivityItem data={mockData} />);
+    expect(getByText(mockData.username)).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/custom/activity-item/index.tsx b/packages/ui/src/components/custom/activity-item/index.tsx
new file mode 100644
index 00000000..d20a19d3
--- /dev/null
+++ b/packages/ui/src/components/custom/activity-item/index.tsx
@@ -0,0 +1,30 @@
+import { Avatar, AvatarImage } from "@/components/ui";
+import { format } from "date-fns";
+
+import type { Log } from "./index.utils";
+import { generateLogMessage } from "./index.utils";
+
+interface ActivityItemProps {
+  data: Log;
+}
+
+export const ActivityItem = ({ data }: ActivityItemProps) => {
+  const createdAt = format(new Date(data.createdAt), "MMM d, yyyy 'at' h:mm a");
+
+  return (
+    <li className="flex items-center gap-x-2">
+      <Avatar className="h-8 w-8">
+        <AvatarImage src={data.avatar} alt="avatar" />
+      </Avatar>
+      <div className="flex flex-col space-y-0.5">
+        <p className="text-sm text-muted-foreground">
+          <span className="font-semibold lowercase text-secondary-foreground">
+            {data.username}
+          </span>{" "}
+          {generateLogMessage(data)}
+        </p>
+        <p className="text-xs text-muted-foreground">{createdAt}</p>
+      </div>
+    </li>
+  );
+};
diff --git a/packages/ui/src/components/custom/activity-item/index.utils.ts b/packages/ui/src/components/custom/activity-item/index.utils.ts
new file mode 100644
index 00000000..23cbfde6
--- /dev/null
+++ b/packages/ui/src/components/custom/activity-item/index.utils.ts
@@ -0,0 +1,32 @@
+export type ACTION = "CREATE" | "UPDATE" | "DELETE";
+
+export interface Entity {
+  entityId: string;
+  type: string;
+  title: string;
+}
+
+export interface Log {
+  username: string;
+  avatar?: string;
+  action: ACTION;
+  entity: Entity;
+  createdAt: Date;
+}
+
+export const generateLogMessage = (log: Log): string => {
+  const {
+    action,
+    entity: { title, type },
+  } = log;
+  switch (action) {
+    case "CREATE":
+      return `created ${type.toLowerCase()} "${title}"`;
+    case "UPDATE":
+      return `updated ${type.toLowerCase()} "${title}"`;
+    case "DELETE":
+      return `deleted ${type.toLowerCase()} "${title}"`;
+    default:
+      return `unknown action ${type.toLowerCase()} "${title}"`;
+  }
+};
diff --git a/packages/ui/src/components/custom/cover-picker/index.test.tsx b/packages/ui/src/components/custom/cover-picker/index.test.tsx
new file mode 100644
index 00000000..e3d5aa34
--- /dev/null
+++ b/packages/ui/src/components/custom/cover-picker/index.test.tsx
@@ -0,0 +1,15 @@
+import { Button } from "@/components/ui";
+import { render } from "@testing-library/react";
+
+import { CoverPicker } from ".";
+
+describe("<CoverPicker />", () => {
+  it("should render the default text", () => {
+    const { getByText } = render(
+      <CoverPicker asChild>
+        <Button variant="outline">Change cover</Button>
+      </CoverPicker>,
+    );
+    expect(getByText("Change cover")).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/custom/cover-picker/index.tsx b/packages/ui/src/components/custom/cover-picker/index.tsx
new file mode 100644
index 00000000..ccaaa2c2
--- /dev/null
+++ b/packages/ui/src/components/custom/cover-picker/index.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { useState } from "react";
+import { SingleImageDropzone } from "@/components/dnd";
+import { FormSubmit } from "@/components/form";
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui";
+import { cn } from "@/lib";
+
+import { Unsplash } from "./unsplash";
+
+/** Styles */
+const tabTriggerStyle = cn(
+  "relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 py-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none",
+);
+const tabContentStyle = cn(
+  "relative px-4 py-2 [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold",
+);
+
+export interface CoverPickerProps extends PropsWithChildren {
+  asChild?: boolean;
+  onUploadChange?: (file: File) => Promise<void>;
+  onUnsplash?: (url: string) => Promise<void>;
+  onRemove?: () => Promise<void>;
+}
+
+export const CoverPicker = ({
+  children,
+  asChild,
+  onUploadChange,
+  onUnsplash,
+  onRemove,
+}: CoverPickerProps) => {
+  /** Upload */
+  const [file, setFile] = useState<File>();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const onClose = () => {
+    setFile(undefined);
+    setIsSubmitting(false);
+  };
+  const handleUpload = async (file?: File) => {
+    if (file) {
+      setIsSubmitting(true);
+      setFile(file);
+      await onUploadChange?.(file);
+    }
+    onClose();
+  };
+  /** Unsplash */
+  const handleUnsplash = async (formData: FormData) => {
+    const image = (formData.get("image") as string) ?? "";
+    const [, , url] = image.split("|");
+    await onUnsplash?.(url!);
+    onClose();
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild={asChild}>{children}</PopoverTrigger>
+      <PopoverContent className="z-[99999] w-96 p-0 shadow-none">
+        <Tabs defaultValue="upload" className="relative mt-1 w-full">
+          <TabsList className="flex w-full justify-start rounded-none border-b bg-transparent p-0">
+            <div className="grow">
+              <TabsTrigger value="upload" className={tabTriggerStyle}>
+                Upload
+              </TabsTrigger>
+              <TabsTrigger value="unsplash" className={tabTriggerStyle}>
+                Unsplash
+              </TabsTrigger>
+            </div>
+            <div className="grow-0">
+              <Button
+                onClick={onRemove}
+                size="sm"
+                className="mx-2 my-1 border-none p-1"
+                variant="outline"
+              >
+                Remove
+              </Button>
+            </div>
+          </TabsList>
+          <TabsContent value="upload" className={tabContentStyle}>
+            <SingleImageDropzone
+              className="w-full outline-none"
+              disabled={isSubmitting}
+              value={file}
+              onChange={handleUpload}
+            />
+            <p className="p-4 text-center text-xs text-muted-foreground">
+              Images wider than 1500 pixels work best.
+            </p>
+          </TabsContent>
+          <TabsContent value="unsplash" className={tabContentStyle}>
+            <form action={handleUnsplash} className="space-y-4">
+              <Unsplash id="image" />
+              <FormSubmit className="w-full">Select</FormSubmit>
+            </form>
+          </TabsContent>
+        </Tabs>
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/packages/ui/src/components/custom/cover-picker/unsplash.tsx b/packages/ui/src/components/custom/cover-picker/unsplash.tsx
new file mode 100644
index 00000000..71f6c39e
--- /dev/null
+++ b/packages/ui/src/components/custom/cover-picker/unsplash.tsx
@@ -0,0 +1,92 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { FormErrors } from "@/components/form";
+import { defaultImages } from "@/constants/images";
+import { cn } from "@/lib/utils";
+import { Check, Loader2 } from "lucide-react";
+
+export interface UnsplashProps {
+  id: string;
+  errors?: Record<string, string[] | undefined>;
+  isLoading?: boolean;
+  pending?: boolean;
+}
+export interface UnsplashImage {
+  id: string;
+  user: { name: string };
+  links: { html: string };
+  urls: { thumb: string; full: string };
+}
+export const Unsplash = ({
+  id,
+  errors,
+  isLoading = false,
+  pending = false,
+}: UnsplashProps) => {
+  const [images] = useState<UnsplashImage[]>(defaultImages);
+  const [selectedImageId, setSelectedImageId] = useState<string | null>(null);
+
+  return isLoading ? (
+    <div className="flex items-center justify-center p-6">
+      <Loader2 className="h-6 w-6 animate-spin text-sky-700" />
+    </div>
+  ) : (
+    <div className="relative">
+      <div className="mb-2 grid grid-cols-3 gap-2">
+        {images.map((image) => (
+          <div
+            key={image.id}
+            className={cn(
+              "group relative aspect-video cursor-pointer bg-muted transition hover:opacity-75",
+              pending && "cursor-auto opacity-50 hover:opacity-50",
+            )}
+            onClick={() => {
+              if (pending) return;
+              setSelectedImageId(image.id);
+            }}
+          >
+            <input
+              type="radio"
+              id={id}
+              name={id}
+              className="hidden"
+              checked={selectedImageId === image.id}
+              readOnly
+              disabled={pending}
+              value={`${image.id}|${image.urls.thumb}|${image.urls.full}|${image.links.html}|${image.user.name}`}
+            />
+            <Image
+              src={image.urls.thumb}
+              alt="Unsplash image"
+              className="rounded-sm object-cover"
+              fill
+            />
+            {selectedImageId === image.id && (
+              <div
+                className={cn(
+                  "h-full w-full",
+                  "flex items-center",
+                  "absolute inset-y-0 justify-center bg-black/30",
+                )}
+              >
+                <Check className="h-4 w-4 text-white" />
+              </div>
+            )}
+            <Link
+              href={image.links.html}
+              target="_blank"
+              className="absolute bottom-0 w-full truncate bg-black/50 p-1 text-[10px] text-white opacity-0 hover:underline group-hover:opacity-100"
+            >
+              {image.user.name}
+            </Link>
+          </div>
+        ))}
+      </div>
+      <FormErrors id="image" errors={errors} />
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/custom/cover/index.test.tsx b/packages/ui/src/components/custom/cover/index.test.tsx
new file mode 100644
index 00000000..34a09266
--- /dev/null
+++ b/packages/ui/src/components/custom/cover/index.test.tsx
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+
+import { Cover } from ".";
+
+describe("<Cover />", () => {
+  it("should render the default component", () => {
+    const { container } = render(<Cover url="/" />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/custom/cover/index.tsx b/packages/ui/src/components/custom/cover/index.tsx
new file mode 100644
index 00000000..3b612f67
--- /dev/null
+++ b/packages/ui/src/components/custom/cover/index.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import type { ButtonProps } from "@/components/ui";
+import Image from "next/image";
+import { CoverPicker } from "@/components/custom";
+import { Button, Skeleton } from "@/components/ui";
+import { cn } from "@/lib";
+import { ImageIcon, X } from "lucide-react";
+
+interface CoverImageProps {
+  url: string | null;
+  preview?: boolean;
+  onUploadChange?: (file: File) => Promise<void>;
+  onUnsplash?: (url: string) => Promise<void>;
+  onRemove?: () => Promise<void>;
+}
+
+export const Cover = ({
+  url,
+  preview,
+  onUploadChange,
+  onUnsplash,
+  onRemove,
+}: CoverImageProps) => {
+  /** Styles */
+  const buttonProps: ButtonProps = {
+    className: "text-muted-foreground text-xs",
+    variant: "outline",
+    size: "sm",
+  };
+
+  return (
+    <div
+      className={cn(
+        "group relative h-[35vh] w-full",
+        url ? "bg-muted" : "h-[12vh]",
+      )}
+    >
+      {!!url && (
+        <Image
+          src={url}
+          fill
+          sizes="100%"
+          priority
+          alt="Cover"
+          className="object-cover"
+          unoptimized
+        />
+      )}
+      {url && !preview && (
+        <div
+          className={cn(
+            "flex items-center gap-x-2",
+            "absolute bottom-5 right-5 opacity-0 group-hover:opacity-100",
+          )}
+        >
+          <CoverPicker
+            asChild
+            onUploadChange={onUploadChange}
+            onUnsplash={onUnsplash}
+            onRemove={onRemove}
+          >
+            <Button {...buttonProps}>
+              <ImageIcon className="mr-2 h-4 w-4" />
+              Change cover
+            </Button>
+          </CoverPicker>
+          <Button onClick={onRemove} {...buttonProps}>
+            <X className="mr-2 h-4 w-4" />
+            Remove
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Cover.Skeleton = function CoverSkeleton() {
+  return <Skeleton className="h-[35vh] w-full" />;
+};
diff --git a/packages/ui/src/components/custom/index.ts b/packages/ui/src/components/custom/index.ts
new file mode 100644
index 00000000..38f7f82b
--- /dev/null
+++ b/packages/ui/src/components/custom/index.ts
@@ -0,0 +1,4 @@
+export * from "./activity-item";
+export * from "./cover";
+export * from "./cover-picker";
+export * from "./spinner";
diff --git a/packages/ui/src/components/custom/spinner/index.test.tsx b/packages/ui/src/components/custom/spinner/index.test.tsx
new file mode 100644
index 00000000..e60f2af3
--- /dev/null
+++ b/packages/ui/src/components/custom/spinner/index.test.tsx
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+
+import { Spinner } from ".";
+
+describe("<Spinner />", () => {
+  it("should render the component", () => {
+    const { container } = render(<Spinner />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/custom/spinner/index.tsx b/packages/ui/src/components/custom/spinner/index.tsx
new file mode 100644
index 00000000..bfe74c41
--- /dev/null
+++ b/packages/ui/src/components/custom/spinner/index.tsx
@@ -0,0 +1,24 @@
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { cva } from "class-variance-authority";
+import { Loader } from "lucide-react";
+
+const spinnerVariants = cva("animate-spin text-muted-foreground", {
+  variants: {
+    size: {
+      default: "h-4 w-4",
+      sm: "h-2 w-2",
+      lg: "h-6 w-6",
+      icon: "h-10 w-10",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+export type SpinnerProps = VariantProps<typeof spinnerVariants>;
+
+export const Spinner = ({ size }: SpinnerProps) => {
+  return <Loader className={cn(spinnerVariants({ size }))} />;
+};
diff --git a/packages/ui/src/components/dnd/index.ts b/packages/ui/src/components/dnd/index.ts
new file mode 100644
index 00000000..6ed007b9
--- /dev/null
+++ b/packages/ui/src/components/dnd/index.ts
@@ -0,0 +1 @@
+export * from "./single-image-dropzone";
\ No newline at end of file
diff --git a/packages/ui/src/components/dnd/single-image-dropzone/index.test.tsx b/packages/ui/src/components/dnd/single-image-dropzone/index.test.tsx
new file mode 100644
index 00000000..a61f7a2a
--- /dev/null
+++ b/packages/ui/src/components/dnd/single-image-dropzone/index.test.tsx
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+
+import { SingleImageDropzone } from ".";
+
+describe("<SingleImageDropzone />", () => {
+  it("should render the default component", () => {
+    const { container } = render(<SingleImageDropzone />);
+    expect(container).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/dnd/single-image-dropzone/index.tsx b/packages/ui/src/components/dnd/single-image-dropzone/index.tsx
new file mode 100644
index 00000000..78b61808
--- /dev/null
+++ b/packages/ui/src/components/dnd/single-image-dropzone/index.tsx
@@ -0,0 +1,228 @@
+"use client";
+
+import type { DropzoneOptions } from "react-dropzone";
+import * as React from "react";
+import { Spinner } from "@/components/custom";
+import { UploadCloudIcon, X } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import { twMerge } from "tailwind-merge";
+
+const variants = {
+  base: "relative rounded-md flex justify-center items-center flex-col cursor-pointer min-h-[150px] min-w-[200px] border border-dashed border-gray-400 dark:border-gray-300 transition-colors duration-200 ease-in-out",
+  image:
+    "border-0 p-0 min-h-0 min-w-0 relative shadow-md bg-slate-200 dark:bg-slate-900 rounded-md",
+  active: "border-2",
+  disabled:
+    "bg-gray-200 border-gray-300 cursor-default pointer-events-none bg-opacity-30 dark:bg-gray-700",
+  accept: "border border-blue-500 bg-blue-500 bg-opacity-10",
+  reject: "border border-red-700 bg-red-700 bg-opacity-10",
+};
+
+export interface SingleImageDropzoneProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  value?: File | string;
+  onChange?: (file?: File) => void | Promise<void>;
+  disabled?: boolean;
+  dropzoneOptions?: Omit<DropzoneOptions, "disabled">;
+}
+
+const ERROR_MESSAGES = {
+  fileTooLarge(maxSize: number) {
+    return `The file is too large. Max size is ${formatFileSize(maxSize)}.`;
+  },
+  fileInvalidType() {
+    return "Invalid file type.";
+  },
+  tooManyFiles(maxFiles: number) {
+    return `You can only add ${maxFiles} file(s).`;
+  },
+  fileNotSupported() {
+    return "The file is not supported.";
+  },
+};
+
+const SingleImageDropzone = React.forwardRef<
+  HTMLInputElement,
+  SingleImageDropzoneProps
+>(
+  (
+    { dropzoneOptions, width, height, value, className, disabled, onChange },
+    ref,
+  ) => {
+    const imageUrl = React.useMemo(() => {
+      if (typeof value === "string") {
+        // in case a url is passed in, use it to display the image
+        return value;
+      } else if (value) {
+        // in case a file is passed in, create a base64 url to display the image
+        return URL.createObjectURL(value);
+      }
+      return null;
+    }, [value]);
+
+    // dropzone configuration
+    const {
+      getRootProps,
+      getInputProps,
+      acceptedFiles,
+      fileRejections,
+      isFocused,
+      isDragAccept,
+      isDragReject,
+    } = useDropzone({
+      accept: { "image/*": [] },
+      multiple: false,
+      disabled,
+      onDrop: (acceptedFiles) => {
+        const file = acceptedFiles[0];
+        if (file) {
+          void onChange?.(file);
+        }
+      },
+      ...dropzoneOptions,
+    });
+
+    // styling
+    const dropZoneClassName = React.useMemo(
+      () =>
+        twMerge(
+          variants.base,
+          isFocused && variants.active,
+          disabled && variants.disabled,
+          imageUrl && variants.image,
+          (isDragReject ?? fileRejections[0]) && variants.reject,
+          isDragAccept && variants.accept,
+          className,
+        ).trim(),
+      [
+        isFocused,
+        imageUrl,
+        fileRejections,
+        isDragAccept,
+        isDragReject,
+        disabled,
+        className,
+      ],
+    );
+
+    // error validation messages
+    const errorMessage = React.useMemo(() => {
+      if (fileRejections[0]) {
+        const { errors } = fileRejections[0];
+        if (errors[0]?.code === "file-too-large") {
+          return ERROR_MESSAGES.fileTooLarge(dropzoneOptions?.maxSize ?? 0);
+        } else if (errors[0]?.code === "file-invalid-type") {
+          return ERROR_MESSAGES.fileInvalidType();
+        } else if (errors[0]?.code === "too-many-files") {
+          return ERROR_MESSAGES.tooManyFiles(dropzoneOptions?.maxFiles ?? 0);
+        } else {
+          return ERROR_MESSAGES.fileNotSupported();
+        }
+      }
+      return undefined;
+    }, [fileRejections, dropzoneOptions]);
+
+    return (
+      <div className="relative">
+        {disabled && (
+          <div className="absolute inset-y-0 z-50 flex h-full w-full items-center justify-center bg-background/80">
+            <Spinner size="lg" />
+          </div>
+        )}
+        <div
+          {...getRootProps({
+            className: dropZoneClassName,
+            style: {
+              width,
+              height,
+            },
+          })}
+        >
+          {/* Main File Input */}
+          <input ref={ref} {...getInputProps()} />
+
+          {imageUrl ? (
+            // Image Preview
+            <img
+              className="h-full w-full rounded-md object-cover"
+              src={imageUrl}
+              alt={acceptedFiles[0]?.name}
+            />
+          ) : (
+            // Upload Icon
+            <div className="flex flex-col items-center justify-center text-xs text-gray-400">
+              <UploadCloudIcon className="mb-2 h-7 w-7" />
+              <div className="text-gray-400">
+                Click or drag file to this area
+              </div>
+            </div>
+          )}
+
+          {/* Remove Image Icon */}
+          {imageUrl && !disabled && (
+            <div
+              className="group absolute right-0 top-0 -translate-y-1/4 translate-x-1/4 transform"
+              onClick={(e) => {
+                e.stopPropagation();
+                void onChange?.(undefined);
+              }}
+            >
+              <div className="flex h-5 w-5 items-center justify-center rounded-md border border-solid border-gray-500 bg-white transition-all duration-300 hover:h-6 hover:w-6 dark:border-gray-400 dark:bg-black">
+                <X
+                  className="text-gray-500 dark:text-gray-400"
+                  width={16}
+                  height={16}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Error Text */}
+        <div className="mt-1 text-xs text-red-500">{errorMessage}</div>
+      </div>
+    );
+  },
+);
+SingleImageDropzone.displayName = "SingleImageDropzone";
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <button
+      className={twMerge(
+        // base
+        "inline-flex cursor-pointer items-center justify-center 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",
+        // color
+        "border border-gray-400 text-gray-400 shadow hover:bg-gray-100 hover:text-gray-500 dark:border-gray-600 dark:text-gray-100 dark:hover:bg-gray-700",
+        // size
+        "h-6 rounded-md px-2 text-xs",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Button.displayName = "Button";
+
+function formatFileSize(bytes?: number) {
+  if (!bytes) {
+    return "0 Bytes";
+  }
+  bytes = Number(bytes);
+  if (bytes === 0) {
+    return "0 Bytes";
+  }
+  const k = 1024;
+  const dm = 2;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+
+export { SingleImageDropzone };
diff --git a/packages/ui/src/components/form/form-errors/index.test.tsx b/packages/ui/src/components/form/form-errors/index.test.tsx
new file mode 100644
index 00000000..fd2a4ea7
--- /dev/null
+++ b/packages/ui/src/components/form/form-errors/index.test.tsx
@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react";
+
+import { FormErrors } from ".";
+
+const mockData = {
+  id: "email",
+  errors: { email: ["Email should contain an `@` sign"] },
+};
+
+describe("<FormErrors />", () => {
+  it("should render the default text", () => {
+    const { getByText } = render(<FormErrors {...mockData} />);
+    expect(getByText(mockData.errors.email.toString())).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/form/form-errors/index.tsx b/packages/ui/src/components/form/form-errors/index.tsx
new file mode 100644
index 00000000..751782bf
--- /dev/null
+++ b/packages/ui/src/components/form/form-errors/index.tsx
@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils";
+import { XCircle } from "lucide-react";
+
+export interface FormErrorProps {
+  id: string;
+  errors?: Record<string, string[] | undefined>;
+}
+
+export const FormErrors = ({ id, errors }: FormErrorProps) => {
+  if (!errors) return null;
+  return (
+    <div
+      className="mt-2 text-xs text-rose-500"
+      aria-live="polite"
+      id={`${id}-error`}
+    >
+      {errors?.[id]?.map((error) => (
+        <div
+          key={error}
+          className={cn(
+            "flex items-center",
+            "rounded-sm border border-rose-500 bg-rose-500/10 p-2 font-medium",
+          )}
+        >
+          <XCircle className="mr-2 h-4 w-4" />
+          {error}
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/form/form-submit/index.test.tsx b/packages/ui/src/components/form/form-submit/index.test.tsx
new file mode 100644
index 00000000..d10e995e
--- /dev/null
+++ b/packages/ui/src/components/form/form-submit/index.test.tsx
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+
+import { FormSubmit } from ".";
+
+describe("<FormSubmit />", () => {
+  it("should render the default text", () => {
+    const { getByText } = render(<FormSubmit>Submit</FormSubmit>);
+    expect(getByText("Submit")).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/form/form-submit/index.tsx b/packages/ui/src/components/form/form-submit/index.tsx
new file mode 100644
index 00000000..eb795162
--- /dev/null
+++ b/packages/ui/src/components/form/form-submit/index.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import type { ButtonProps } from "@/components/ui";
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui";
+import { cn } from "@/lib/utils";
+
+export interface FormSubmitProps {
+  children: ReactNode;
+  disabled?: boolean;
+  className?: string;
+  variant?: ButtonProps["variant"];
+}
+
+export const FormSubmit = ({
+  children,
+  disabled,
+  className,
+  variant,
+}: FormSubmitProps) => {
+  return (
+    <Button
+      type="submit"
+      disabled={disabled}
+      variant={variant}
+      size="sm"
+      className={cn(className)}
+    >
+      {children}
+    </Button>
+  );
+};
diff --git a/packages/ui/src/components/form/index.ts b/packages/ui/src/components/form/index.ts
new file mode 100644
index 00000000..36d21d6e
--- /dev/null
+++ b/packages/ui/src/components/form/index.ts
@@ -0,0 +1,2 @@
+export * from "./form-submit";
+export * from "./form-errors";
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 4aedf593..461caf43 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1 +1,4 @@
+export * from "./custom";
+export * from "./dnd";
+export * from "./form";
 export * from "./ui";
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
index 97e1a42f..8e3e8486 100644
--- a/packages/ui/src/components/ui/button.tsx
+++ b/packages/ui/src/components/ui/button.tsx
@@ -36,7 +36,7 @@ const buttonVariants = cva(
   },
 );
 
-interface ButtonProps
+export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
diff --git a/packages/ui/src/constants/images.ts b/packages/ui/src/constants/images.ts
new file mode 100644
index 00000000..f5ce908f
--- /dev/null
+++ b/packages/ui/src/constants/images.ts
@@ -0,0 +1,948 @@
+export const defaultImages = [
+    {
+        id: "HUiNRjXr-bQ",
+        slug: "selective-focus-photography-of-brown-leaves-HUiNRjXr-bQ",
+        created_at: "2017-10-12T04:46:43Z",
+        updated_at: "2023-11-11T05:02:31Z",
+        promoted_at: "2017-10-12T17:00:48Z",
+        width: 5184,
+        height: 3456,
+        color: "#592626",
+        blur_hash: "LZK]V|IU0gxuxuIpt6S30#Ipxt%1",
+        description: "Maple Leaves",
+        alt_description: "selective focus photography of brown leaves",
+        breadcrumbs: [],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1507783548227-544c3b8fc065?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1507783548227-544c3b8fc065?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1507783548227-544c3b8fc065?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1507783548227-544c3b8fc065?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1507783548227-544c3b8fc065?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1507783548227-544c3b8fc065",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/selective-focus-photography-of-brown-leaves-HUiNRjXr-bQ",
+            html: "https://unsplash.com/photos/selective-focus-photography-of-brown-leaves-HUiNRjXr-bQ",
+            download:
+                "https://unsplash.com/photos/HUiNRjXr-bQ/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/HUiNRjXr-bQ/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 944,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {},
+        user: {
+            id: "gGlMyHI3glI",
+            updated_at: "2023-11-06T21:57:26Z",
+            username: "timothyeberly",
+            name: "Timothy Eberly",
+            first_name: "Timothy",
+            last_name: "Eberly",
+            twitter_username: "JestNinja",
+            portfolio_url: "https://www.timothyeberly.com/",
+            bio: "Graphic designer and photographer from the inland NW. God first. Camera second. My website is my name. It would be great to have you stop by and say hello! ",
+            location: null,
+            links: {
+                self: "https://api.unsplash.com/users/timothyeberly",
+                html: "https://unsplash.com/@timothyeberly",
+                photos: "https://api.unsplash.com/users/timothyeberly/photos",
+                likes: "https://api.unsplash.com/users/timothyeberly/likes",
+                portfolio:
+                    "https://api.unsplash.com/users/timothyeberly/portfolio",
+                following:
+                    "https://api.unsplash.com/users/timothyeberly/following",
+                followers:
+                    "https://api.unsplash.com/users/timothyeberly/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/profile-1555356959863-ee27d76a1d6e?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/profile-1555356959863-ee27d76a1d6e?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/profile-1555356959863-ee27d76a1d6e?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: "iam_timothy_eberly",
+            total_collections: 0,
+            total_likes: 31,
+            total_photos: 422,
+            total_promoted_photos: 51,
+            accepted_tos: true,
+            for_hire: true,
+            social: {
+                instagram_username: "iam_timothy_eberly",
+                portfolio_url: "https://www.timothyeberly.com/",
+                twitter_username: "JestNinja",
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: "Canon",
+            model: "Canon EOS REBEL T3i",
+            name: "Canon, EOS REBEL T3i",
+            exposure_time: "1/3200",
+            aperture: "1.8",
+            focal_length: "50.0",
+            iso: 100,
+        },
+        location: {
+            name: null,
+            city: null,
+            country: null,
+            position: {
+                latitude: null,
+                longitude: null,
+            },
+        },
+        views: 12811696,
+        downloads: 58168,
+    },
+    {
+        id: "GGDuawxHUwo",
+        slug: "snow-covered-mountains-during-daytime-GGDuawxHUwo",
+        created_at: "2021-08-17T17:38:32Z",
+        updated_at: "2023-11-11T05:24:33Z",
+        promoted_at: "2021-08-18T10:30:02Z",
+        width: 4000,
+        height: 6000,
+        color: "#262626",
+        blur_hash: "LTD+G3fQNGoL~BayWCjt9uj[xZWV",
+        description: null,
+        alt_description: "snow covered mountains during daytime",
+        breadcrumbs: [],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1629221892514-7abb71a803f7?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1629221892514-7abb71a803f7?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1629221892514-7abb71a803f7?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1629221892514-7abb71a803f7?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1629221892514-7abb71a803f7?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1629221892514-7abb71a803f7",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/snow-covered-mountains-during-daytime-GGDuawxHUwo",
+            html: "https://unsplash.com/photos/snow-covered-mountains-during-daytime-GGDuawxHUwo",
+            download:
+                "https://unsplash.com/photos/GGDuawxHUwo/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/GGDuawxHUwo/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 546,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {
+            wallpapers: {
+                status: "approved",
+                approved_on: "2021-08-20T15:41:07Z",
+            },
+            nature: {
+                status: "approved",
+                approved_on: "2021-08-25T15:13:19Z",
+            },
+        },
+        user: {
+            id: "oV79Kpt1X28",
+            updated_at: "2023-11-11T09:48:01Z",
+            username: "gantas",
+            name: "Gantas Vaičiulėnas",
+            first_name: "Gantas",
+            last_name: "Vaičiulėnas",
+            twitter_username: null,
+            portfolio_url: "http://www.gantasv.com",
+            bio: "Lithuania is home. Travel worldwide. Feel free to contact me for work or collaboration. ",
+            location: "Lithuania",
+            links: {
+                self: "https://api.unsplash.com/users/gantas",
+                html: "https://unsplash.com/@gantas",
+                photos: "https://api.unsplash.com/users/gantas/photos",
+                likes: "https://api.unsplash.com/users/gantas/likes",
+                portfolio: "https://api.unsplash.com/users/gantas/portfolio",
+                following: "https://api.unsplash.com/users/gantas/following",
+                followers: "https://api.unsplash.com/users/gantas/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/profile-1594981205756-88eda384bff2image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/profile-1594981205756-88eda384bff2image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/profile-1594981205756-88eda384bff2image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: "gantasv",
+            total_collections: 0,
+            total_likes: 428,
+            total_photos: 403,
+            total_promoted_photos: 165,
+            accepted_tos: true,
+            for_hire: true,
+            social: {
+                instagram_username: "gantasv",
+                portfolio_url: "http://www.gantasv.com",
+                twitter_username: null,
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: "SONY",
+            model: "ILCE-7M3",
+            name: "SONY, ILCE-7M3",
+            exposure_time: "1/320",
+            aperture: "1.4",
+            focal_length: "35.0",
+            iso: 100,
+        },
+        location: {
+            name: null,
+            city: null,
+            country: null,
+            position: {
+                latitude: null,
+                longitude: null,
+            },
+        },
+        views: 16454653,
+        downloads: 49789,
+    },
+    {
+        id: "qmM6L-4f0eE",
+        slug: "green-leafed-plant-qmM6L-4f0eE",
+        created_at: "2016-11-08T13:35:49Z",
+        updated_at: "2023-11-10T21:01:05Z",
+        promoted_at: null,
+        width: 4000,
+        height: 6000,
+        color: "#d9c0c0",
+        blur_hash: "LaI=DI?HoMa{~Wt7NGs;%2D*WBax",
+        description: "Tree branch macro image",
+        alt_description: "green-leafed plant",
+        breadcrumbs: [],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1478612068036-1eff8080e24b?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1478612068036-1eff8080e24b?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1478612068036-1eff8080e24b?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1478612068036-1eff8080e24b?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1478612068036-1eff8080e24b?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1478612068036-1eff8080e24b",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/green-leafed-plant-qmM6L-4f0eE",
+            html: "https://unsplash.com/photos/green-leafed-plant-qmM6L-4f0eE",
+            download:
+                "https://unsplash.com/photos/qmM6L-4f0eE/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/qmM6L-4f0eE/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 456,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {},
+        user: {
+            id: "hnq0aaqF_Qo",
+            updated_at: "2023-11-05T22:52:02Z",
+            username: "scottwebb",
+            name: "Scott Webb",
+            first_name: "Scott",
+            last_name: "Webb",
+            twitter_username: null,
+            portfolio_url: "https://scottwebb.me/",
+            bio: "If you like my work and you'd like to support me, you can consider a donation 👉  http://www.paypal.me/scottrwebb | Donation goal for a new lens: $351.01 of $449 | Thank you Jay D. 🙏",
+            location: "London, Ontario, Canada",
+            links: {
+                self: "https://api.unsplash.com/users/scottwebb",
+                html: "https://unsplash.com/@scottwebb",
+                photos: "https://api.unsplash.com/users/scottwebb/photos",
+                likes: "https://api.unsplash.com/users/scottwebb/likes",
+                portfolio: "https://api.unsplash.com/users/scottwebb/portfolio",
+                following: "https://api.unsplash.com/users/scottwebb/following",
+                followers: "https://api.unsplash.com/users/scottwebb/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/profile-1598557047185-d94f7fc56f69image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/profile-1598557047185-d94f7fc56f69image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/profile-1598557047185-d94f7fc56f69image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: "scottwebb",
+            total_collections: 46,
+            total_likes: 4179,
+            total_photos: 804,
+            total_promoted_photos: 387,
+            accepted_tos: true,
+            for_hire: true,
+            social: {
+                instagram_username: "scottwebb",
+                portfolio_url: "https://scottwebb.me/",
+                twitter_username: null,
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: "SONY",
+            model: "ILCE-7M2",
+            name: "SONY, ILCE-7M2",
+            exposure_time: "1/100",
+            aperture: "5.6",
+            focal_length: "29.0",
+            iso: 1000,
+        },
+        location: {
+            name: "Royal Botanical Gardens, Burlington, Canada",
+            city: "Burlington",
+            country: "Canada",
+            position: {
+                latitude: 43.2899264,
+                longitude: -79.8761253,
+            },
+        },
+        views: 3469139,
+        downloads: 17568,
+    },
+    {
+        id: "Qx4Jfk9lQZA",
+        slug: "brown-and-gray-mountains-under-blue-sky-during-daytime-Qx4Jfk9lQZA",
+        created_at: "2021-01-25T18:02:27Z",
+        updated_at: "2023-11-11T08:20:08Z",
+        promoted_at: "2021-01-25T22:54:02Z",
+        width: 5988,
+        height: 3992,
+        color: "#c0d9d9",
+        blur_hash: "LfM*Q*ozM{ofP;jZjYay9FWBjakC",
+        description: null,
+        alt_description:
+            "brown and gray mountains under blue sky during daytime",
+        breadcrumbs: [],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1611597617014-9970403724e9?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1611597617014-9970403724e9?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1611597617014-9970403724e9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1611597617014-9970403724e9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1611597617014-9970403724e9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1611597617014-9970403724e9",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/brown-and-gray-mountains-under-blue-sky-during-daytime-Qx4Jfk9lQZA",
+            html: "https://unsplash.com/photos/brown-and-gray-mountains-under-blue-sky-during-daytime-Qx4Jfk9lQZA",
+            download:
+                "https://unsplash.com/photos/Qx4Jfk9lQZA/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/Qx4Jfk9lQZA/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 56,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {
+            nature: {
+                status: "rejected",
+            },
+            wallpapers: {
+                status: "rejected",
+            },
+        },
+        user: {
+            id: "QVRWQH_C_pw",
+            updated_at: "2023-11-08T01:21:00Z",
+            username: "zamax",
+            name: "Gustavo Zambelli",
+            first_name: "Gustavo",
+            last_name: "Zambelli",
+            twitter_username: "zamax4",
+            portfolio_url: "http://www.zamax.design",
+            bio: "I'm a graphic designer \u0026 illustrator currently working at Sticker Mule. I really enjoy taking photos, so these are for you. ",
+            location: "Neuquén, Argentina",
+            links: {
+                self: "https://api.unsplash.com/users/zamax",
+                html: "https://unsplash.com/@zamax",
+                photos: "https://api.unsplash.com/users/zamax/photos",
+                likes: "https://api.unsplash.com/users/zamax/likes",
+                portfolio: "https://api.unsplash.com/users/zamax/portfolio",
+                following: "https://api.unsplash.com/users/zamax/following",
+                followers: "https://api.unsplash.com/users/zamax/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/profile-1690302280077-f1791a11da86image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/profile-1690302280077-f1791a11da86image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/profile-1690302280077-f1791a11da86image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: "zamax4",
+            total_collections: 17,
+            total_likes: 868,
+            total_photos: 157,
+            total_promoted_photos: 44,
+            accepted_tos: true,
+            for_hire: false,
+            social: {
+                instagram_username: "zamax4",
+                portfolio_url: "http://www.zamax.design",
+                twitter_username: "zamax4",
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: "Canon",
+            model: "Canon EOS Rebel SL2",
+            name: "Canon, EOS Rebel SL2",
+            exposure_time: "1/1600",
+            aperture: "6.3",
+            focal_length: "85.0",
+            iso: 400,
+        },
+        location: {
+            name: "La atravesada, Neuquén, Argentina",
+            city: null,
+            country: "Argentina",
+            position: {
+                latitude: -38.949769,
+                longitude: -70.613689,
+            },
+        },
+        views: 9861761,
+        downloads: 34517,
+    },
+    {
+        id: "C5mrwhFTEvY",
+        slug: "black-bird-on-person-left-hand-C5mrwhFTEvY",
+        created_at: "2017-07-18T13:23:54Z",
+        updated_at: "2023-11-11T01:01:53Z",
+        promoted_at: "2017-07-19T15:43:17Z",
+        width: 6000,
+        height: 4000,
+        color: "#f3f3f3",
+        blur_hash: "LcMQ^s-=W=D%~qxut7IU9ZIoIU-;",
+        description:
+            "Last winter I went with some good friends on the mountain “Säntis”. We had luck the sunset was beautiful and I had the chance to feed this awesome bird. By the way it was a Alpine chough.",
+        alt_description: "black bird on person left hand",
+        breadcrumbs: [],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1500384066616-8a8d547abfc9?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1500384066616-8a8d547abfc9?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1500384066616-8a8d547abfc9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1500384066616-8a8d547abfc9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1500384066616-8a8d547abfc9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1500384066616-8a8d547abfc9",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/black-bird-on-person-left-hand-C5mrwhFTEvY",
+            html: "https://unsplash.com/photos/black-bird-on-person-left-hand-C5mrwhFTEvY",
+            download:
+                "https://unsplash.com/photos/C5mrwhFTEvY/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/C5mrwhFTEvY/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 1183,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {
+            animals: {
+                status: "approved",
+                approved_on: "2020-05-01T11:26:23Z",
+            },
+        },
+        user: {
+            id: "XVCdiBcQBGs",
+            updated_at: "2023-09-25T05:20:32Z",
+            username: "flobyderman",
+            name: "Florian Biedermann",
+            first_name: "Florian",
+            last_name: "Biedermann",
+            twitter_username: null,
+            portfolio_url: "https://500px.com/flobyderman_photography",
+            bio: "My name is Florian and I live in Switzerland. Landscape photography is my passion. You can follow my adventures on instagram @flobyderman.",
+            location: null,
+            links: {
+                self: "https://api.unsplash.com/users/flobyderman",
+                html: "https://unsplash.com/@flobyderman",
+                photos: "https://api.unsplash.com/users/flobyderman/photos",
+                likes: "https://api.unsplash.com/users/flobyderman/likes",
+                portfolio:
+                    "https://api.unsplash.com/users/flobyderman/portfolio",
+                following:
+                    "https://api.unsplash.com/users/flobyderman/following",
+                followers:
+                    "https://api.unsplash.com/users/flobyderman/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/profile-1500381536202-a7552d8fc38a?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/profile-1500381536202-a7552d8fc38a?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/profile-1500381536202-a7552d8fc38a?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: "Flobyderman",
+            total_collections: 0,
+            total_likes: 1,
+            total_photos: 3,
+            total_promoted_photos: 1,
+            accepted_tos: false,
+            for_hire: false,
+            social: {
+                instagram_username: "Flobyderman",
+                portfolio_url: "https://500px.com/flobyderman_photography",
+                twitter_username: null,
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: "NIKON CORPORATION",
+            model: "NIKON D7200",
+            name: "NIKON CORPORATION, NIKON D7200",
+            exposure_time: "1/500",
+            aperture: "4.0",
+            focal_length: "12.0",
+            iso: 160,
+        },
+        location: {
+            name: "Säntis, Schwende District, Switzerland",
+            city: "Schwende District",
+            country: "Switzerland",
+            position: {
+                latitude: 47.249385,
+                longitude: 9.343234299999949,
+            },
+        },
+        views: 12429113,
+        downloads: 36310,
+    },
+    {
+        id: "UjcM2ak00KQ",
+        slug: "rocks-by-the-sea-UjcM2ak00KQ",
+        created_at: "2019-04-20T14:13:21Z",
+        updated_at: "2023-11-11T00:07:27Z",
+        promoted_at: "2019-04-23T05:53:42Z",
+        width: 3578,
+        height: 5367,
+        color: "#737373",
+        blur_hash: "LmFYDWRjIpNH~BRjNHR*$%WVWVay",
+        description: null,
+        alt_description: "rocks by the sea",
+        breadcrumbs: [],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1555769571-2ca68b9197cb?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1555769571-2ca68b9197cb?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1555769571-2ca68b9197cb?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1555769571-2ca68b9197cb?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1555769571-2ca68b9197cb?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1555769571-2ca68b9197cb",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/rocks-by-the-sea-UjcM2ak00KQ",
+            html: "https://unsplash.com/photos/rocks-by-the-sea-UjcM2ak00KQ",
+            download:
+                "https://unsplash.com/photos/UjcM2ak00KQ/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/UjcM2ak00KQ/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 143,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {},
+        user: {
+            id: "v0JWsTdPwKI",
+            updated_at: "2023-11-09T02:08:30Z",
+            username: "danielmorris",
+            name: "Daniel Morris",
+            first_name: "Daniel",
+            last_name: "Morris",
+            twitter_username: null,
+            portfolio_url: "https://www.danielmorris.photography/",
+            bio: null,
+            location: "Wales, UK",
+            links: {
+                self: "https://api.unsplash.com/users/danielmorris",
+                html: "https://unsplash.com/@danielmorris",
+                photos: "https://api.unsplash.com/users/danielmorris/photos",
+                likes: "https://api.unsplash.com/users/danielmorris/likes",
+                portfolio:
+                    "https://api.unsplash.com/users/danielmorris/portfolio",
+                following:
+                    "https://api.unsplash.com/users/danielmorris/following",
+                followers:
+                    "https://api.unsplash.com/users/danielmorris/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/profile-1578388447051-a3e6c5576f32image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/profile-1578388447051-a3e6c5576f32image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/profile-1578388447051-a3e6c5576f32image?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: "danielmorris51",
+            total_collections: 0,
+            total_likes: 38,
+            total_photos: 65,
+            total_promoted_photos: 22,
+            accepted_tos: true,
+            for_hire: false,
+            social: {
+                instagram_username: "danielmorris51",
+                portfolio_url: "https://www.danielmorris.photography/",
+                twitter_username: null,
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: "NIKON CORPORATION",
+            model: "NIKON D500",
+            name: "NIKON CORPORATION, NIKON D500",
+            exposure_time: "3",
+            aperture: "16.0",
+            focal_length: "38.0",
+            iso: 50,
+        },
+        location: {
+            name: "Aberfelin, Pembrokeshire Coast National Park, Wales",
+            city: null,
+            country: "Wales",
+            position: {
+                latitude: null,
+                longitude: null,
+            },
+        },
+        views: 5949346,
+        downloads: 6333,
+    },
+    {
+        id: "bWI4Vd4vI3w",
+        slug: "aerial-photography-of-buildings-inside-city-bWI4Vd4vI3w",
+        created_at: "2016-08-15T10:11:23Z",
+        updated_at: "2023-11-10T22:00:51Z",
+        promoted_at: "2016-08-15T10:11:23Z",
+        width: 3500,
+        height: 2333,
+        color: "#0c2626",
+        blur_hash: "LEC?+PShV?%M01Mx%1xZ-pslM{IU",
+        description: "Drone Manhattan shadow",
+        alt_description: "aerial photography of buildings inside city",
+        breadcrumbs: [],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1471255618142-bc3ea8675f3a?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1471255618142-bc3ea8675f3a?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1471255618142-bc3ea8675f3a?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1471255618142-bc3ea8675f3a?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1471255618142-bc3ea8675f3a?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1471255618142-bc3ea8675f3a",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/aerial-photography-of-buildings-inside-city-bWI4Vd4vI3w",
+            html: "https://unsplash.com/photos/aerial-photography-of-buildings-inside-city-bWI4Vd4vI3w",
+            download:
+                "https://unsplash.com/photos/bWI4Vd4vI3w/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/bWI4Vd4vI3w/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 1267,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {},
+        user: {
+            id: "BBkUG4Y4EQ4",
+            updated_at: "2023-09-12T23:02:20Z",
+            username: "gianpaololapaglia",
+            name: "Gianpaolo La Paglia",
+            first_name: "Gianpaolo",
+            last_name: "La Paglia",
+            twitter_username: "GianpaoloLP",
+            portfolio_url: "http://www.gianpaololapaglia.com",
+            bio: "Street and documentary photographer passionate about people, technology and travel - Available for assignments - Donations: paypal.me/GianpaoloLaPaglia",
+            location: "Dublin - Ireland",
+            links: {
+                self: "https://api.unsplash.com/users/gianpaololapaglia",
+                html: "https://unsplash.com/@gianpaololapaglia",
+                photos: "https://api.unsplash.com/users/gianpaololapaglia/photos",
+                likes: "https://api.unsplash.com/users/gianpaololapaglia/likes",
+                portfolio:
+                    "https://api.unsplash.com/users/gianpaololapaglia/portfolio",
+                following:
+                    "https://api.unsplash.com/users/gianpaololapaglia/following",
+                followers:
+                    "https://api.unsplash.com/users/gianpaololapaglia/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/profile-1470072831310-f345e0839302?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/profile-1470072831310-f345e0839302?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/profile-1470072831310-f345e0839302?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: "gianpaololapaglia",
+            total_collections: 0,
+            total_likes: 5,
+            total_photos: 4,
+            total_promoted_photos: 3,
+            accepted_tos: false,
+            for_hire: false,
+            social: {
+                instagram_username: "gianpaololapaglia",
+                portfolio_url: "http://www.gianpaololapaglia.com",
+                twitter_username: "GianpaoloLP",
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: "Canon",
+            model: "Canon EOS 5D Mark II",
+            name: "Canon, EOS 5D Mark II",
+            exposure_time: "1/100",
+            aperture: "8.0",
+            focal_length: "154.0",
+            iso: 100,
+        },
+        location: {
+            name: "Manhattan, New York, United States",
+            city: "New York",
+            country: "United States",
+            position: {
+                latitude: 40.7830603,
+                longitude: -73.9712488,
+            },
+        },
+        views: 10158103,
+        downloads: 32320,
+    },
+    {
+        id: "UYgrVfIhBec",
+        slug: "pink-green-and-blue-abstract-painting-UYgrVfIhBec",
+        created_at: "2021-04-07T10:31:02Z",
+        updated_at: "2023-11-10T13:22:01Z",
+        promoted_at: "2021-04-07T13:30:01Z",
+        width: 3360,
+        height: 2100,
+        color: "#59408c",
+        blur_hash: "LE9Q,|GuR?NGV*exXlbwmiq]m.XL",
+        description: "FAKURIAN.com",
+        alt_description: "pink green and blue abstract painting",
+        breadcrumbs: [
+            {
+                slug: "images",
+                title: "1,000,000+ Free Images",
+                index: 0,
+                type: "landing_page",
+            },
+            {
+                slug: "feelings",
+                title: "Feelings Images",
+                index: 1,
+                type: "landing_page",
+            },
+            {
+                slug: "transformation",
+                title: "Transformation Pictures",
+                index: 2,
+                type: "landing_page",
+            },
+        ],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1617791160505-6f00504e3519?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1617791160505-6f00504e3519?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1617791160505-6f00504e3519?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1617791160505-6f00504e3519?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1617791160505-6f00504e3519",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/pink-green-and-blue-abstract-painting-UYgrVfIhBec",
+            html: "https://unsplash.com/photos/pink-green-and-blue-abstract-painting-UYgrVfIhBec",
+            download:
+                "https://unsplash.com/photos/UYgrVfIhBec/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/UYgrVfIhBec/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 1222,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {
+            "textures-patterns": {
+                status: "approved",
+                approved_on: "2023-01-10T16:59:47Z",
+            },
+            "arts-culture": {
+                status: "rejected",
+            },
+            wallpapers: {
+                status: "approved",
+                approved_on: "2021-04-09T12:16:56Z",
+            },
+            "3d-renders": {
+                status: "approved",
+                approved_on: "2021-09-15T08:37:03Z",
+            },
+            technology: {
+                status: "rejected",
+            },
+        },
+        user: {
+            id: "Kg7OSqFJfQE",
+            updated_at: "2023-11-11T02:59:39Z",
+            username: "fakurian",
+            name: "Milad Fakurian",
+            first_name: "Milad",
+            last_name: "Fakurian",
+            twitter_username: "miladfakurian",
+            portfolio_url: "https://linktr.ee/fakurian",
+            bio: "Brand designer l 3D artist with a passion for minimalism.\r\nIstanbul based l collaborating worldwide l  Let's talk mbfakurian@gmail.com l  onXRP team member  ",
+            location: "Istanbul ",
+            links: {
+                self: "https://api.unsplash.com/users/fakurian",
+                html: "https://unsplash.com/@fakurian",
+                photos: "https://api.unsplash.com/users/fakurian/photos",
+                likes: "https://api.unsplash.com/users/fakurian/likes",
+                portfolio: "https://api.unsplash.com/users/fakurian/portfolio",
+                following: "https://api.unsplash.com/users/fakurian/following",
+                followers: "https://api.unsplash.com/users/fakurian/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/profile-1692035354777-e7e3ec591b4eimage?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/profile-1692035354777-e7e3ec591b4eimage?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/profile-1692035354777-e7e3ec591b4eimage?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: "fakuriandesign",
+            total_collections: 0,
+            total_likes: 1560,
+            total_photos: 563,
+            total_promoted_photos: 191,
+            accepted_tos: true,
+            for_hire: true,
+            social: {
+                instagram_username: "fakuriandesign",
+                portfolio_url: "https://linktr.ee/fakurian",
+                twitter_username: "miladfakurian",
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: null,
+            model: null,
+            name: null,
+            exposure_time: null,
+            aperture: null,
+            focal_length: null,
+            iso: null,
+        },
+        location: {
+            name: "United Kingdom",
+            city: null,
+            country: "United Kingdom",
+            position: {
+                latitude: 55.378051,
+                longitude: -3.435973,
+            },
+        },
+        views: 30055822,
+        downloads: 133057,
+    },
+    {
+        id: "H1SOELwNtTw",
+        slug: "aerial-photography-of-snow-capped-mountain-during-daytime-H1SOELwNtTw",
+        created_at: "2019-05-11T18:45:14Z",
+        updated_at: "2023-11-10T16:07:19Z",
+        promoted_at: "2019-05-13T07:25:06Z",
+        width: 6000,
+        height: 4000,
+        color: "#f3f3f3",
+        blur_hash: "L+LXV+M{M{WB?baxWBof01t6oeoe",
+        description: null,
+        alt_description:
+            "aerial photography of snow capped mountain during daytime",
+        breadcrumbs: [],
+        urls: {
+            raw: "https://images.unsplash.com/photo-1557600280-9ceddf1a3cc3?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3",
+            full: "https://images.unsplash.com/photo-1557600280-9ceddf1a3cc3?crop=entropy\u0026cs=srgb\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=85",
+            regular:
+                "https://images.unsplash.com/photo-1557600280-9ceddf1a3cc3?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=1080",
+            small: "https://images.unsplash.com/photo-1557600280-9ceddf1a3cc3?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=400",
+            thumb: "https://images.unsplash.com/photo-1557600280-9ceddf1a3cc3?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8\u0026ixlib=rb-4.0.3\u0026q=80\u0026w=200",
+            small_s3:
+                "https://s3.us-west-2.amazonaws.com/images.unsplash.com/small/photo-1557600280-9ceddf1a3cc3",
+        },
+        links: {
+            self: "https://api.unsplash.com/photos/aerial-photography-of-snow-capped-mountain-during-daytime-H1SOELwNtTw",
+            html: "https://unsplash.com/photos/aerial-photography-of-snow-capped-mountain-during-daytime-H1SOELwNtTw",
+            download:
+                "https://unsplash.com/photos/H1SOELwNtTw/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+            download_location:
+                "https://api.unsplash.com/photos/H1SOELwNtTw/download?ixid=M3w1MjY4NzN8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTk2OTcyNDN8",
+        },
+        likes: 426,
+        liked_by_user: false,
+        current_user_collections: [],
+        sponsorship: null,
+        topic_submissions: {
+            nature: {
+                status: "approved",
+                approved_on: "2020-04-06T14:20:12Z",
+            },
+        },
+        user: {
+            id: "_Rd-iE6cAkU",
+            updated_at: "2023-09-13T04:14:00Z",
+            username: "doubleweber",
+            name: "Jeremy Weber",
+            first_name: "Jeremy",
+            last_name: "Weber",
+            twitter_username: null,
+            portfolio_url: null,
+            bio: null,
+            location: null,
+            links: {
+                self: "https://api.unsplash.com/users/doubleweber",
+                html: "https://unsplash.com/@doubleweber",
+                photos: "https://api.unsplash.com/users/doubleweber/photos",
+                likes: "https://api.unsplash.com/users/doubleweber/likes",
+                portfolio:
+                    "https://api.unsplash.com/users/doubleweber/portfolio",
+                following:
+                    "https://api.unsplash.com/users/doubleweber/following",
+                followers:
+                    "https://api.unsplash.com/users/doubleweber/followers",
+            },
+            profile_image: {
+                small: "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=32\u0026h=32",
+                medium: "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=64\u0026h=64",
+                large: "https://images.unsplash.com/placeholder-avatars/extra-large.jpg?ixlib=rb-4.0.3\u0026crop=faces\u0026fit=crop\u0026w=128\u0026h=128",
+            },
+            instagram_username: null,
+            total_collections: 0,
+            total_likes: 0,
+            total_photos: 5,
+            total_promoted_photos: 4,
+            accepted_tos: true,
+            for_hire: false,
+            social: {
+                instagram_username: null,
+                portfolio_url: null,
+                twitter_username: null,
+                paypal_email: null,
+            },
+        },
+        exif: {
+            make: "Canon",
+            model: "Canon EOS 750D",
+            name: "Canon, EOS 750D",
+            exposure_time: "1/4000",
+            aperture: "4.0",
+            focal_length: "70.0",
+            iso: 100,
+        },
+        location: {
+            name: null,
+            city: null,
+            country: null,
+            position: {
+                latitude: null,
+                longitude: null,
+            },
+        },
+        views: 14158181,
+        downloads: 20538,
+    },
+];
diff --git a/packages/ui/src/constants/keyboard.ts b/packages/ui/src/constants/keyboard.ts
new file mode 100644
index 00000000..9430b76b
--- /dev/null
+++ b/packages/ui/src/constants/keyboard.ts
@@ -0,0 +1 @@
+export const SPECIAL_KEYS = new Set(["⌘", "⇧", "⌥", "⇪", "⌃", "⌫", "↩", "⇥"]);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 49c48dbd..53a678ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -446,9 +446,15 @@ importers:
       cmdk:
         specifier: ^0.2.0
         version: 0.2.0(react-dom@18.2.0)(react@18.2.0)
+      date-fns:
+        specifier: ^3.2.0
+        version: 3.2.0
       next-themes:
         specifier: ^0.2.1
         version: 0.2.1(next@14.0.4)(react-dom@18.2.0)(react@18.2.0)
+      react-dropzone:
+        specifier: ^14.2.3
+        version: 14.2.3(react@18.2.0)
       react-hook-form:
         specifier: ^7.49.2
         version: 7.49.2(react@18.2.0)
@@ -461,6 +467,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.0)
+      unsplash-js:
+        specifier: ^7.0.19
+        version: 7.0.19
     devDependencies:
       '@acme/eslint-config':
         specifier: workspace:^0.2.0
@@ -7897,6 +7906,11 @@ packages:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
     dev: true
 
+  /attr-accept@2.2.2:
+    resolution: {integrity: sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==}
+    engines: {node: '>=4'}
+    dev: false
+
   /autoprefixer@10.4.16(postcss@8.4.32):
     resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -9026,6 +9040,10 @@ packages:
       whatwg-url: 14.0.0
     dev: true
 
+  /date-fns@3.2.0:
+    resolution: {integrity: sha512-E4KWKavANzeuusPi0jUjpuI22SURAznGkx7eZV+4i6x2A+IZxAMcajgkvuDAU1bg40+xuhW1zRdVIIM/4khuIg==}
+    dev: false
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -10412,6 +10430,13 @@ packages:
     dependencies:
       flat-cache: 3.0.4
 
+  /file-selector@0.6.0:
+    resolution: {integrity: sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==}
+    engines: {node: '>= 12'}
+    dependencies:
+      tslib: 2.5.0
+    dev: false
+
   /file-system-cache@2.3.0:
     resolution: {integrity: sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==}
     dependencies:
@@ -14799,6 +14824,18 @@ packages:
       react: 18.2.0
       scheduler: 0.23.0
 
+  /react-dropzone@14.2.3(react@18.2.0):
+    resolution: {integrity: sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==}
+    engines: {node: '>= 10.13'}
+    peerDependencies:
+      react: '>= 16.8 || 18.0.0'
+    dependencies:
+      attr-accept: 2.2.2
+      file-selector: 0.6.0
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /react-element-to-jsx-string@15.0.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==}
     peerDependencies:
@@ -16982,6 +17019,11 @@ packages:
       webpack-virtual-modules: 0.6.1
     dev: true
 
+  /unsplash-js@7.0.19:
+    resolution: {integrity: sha512-j6qT2floy5Q2g2d939FJpwey1yw/GpQecFiSouyJtsHQPj3oqmqq3K4rI+GF8vU1zwGCT7ZwIGQd2dtCQLjYJw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /unstorage@1.10.1:
     resolution: {integrity: sha512-rWQvLRfZNBpF+x8D3/gda5nUCQL2PgXy2jNG4U7/Rc9BGEv9+CAJd0YyGCROUBKs9v49Hg8huw3aih5Bf5TAVw==}
     peerDependencies:

From 5443dbc62ba83004a3255929223c222d990808de Mon Sep 17 00:00:00 2001
From: steeeee0223 <mr.steven7@gmail.com>
Date: Fri, 12 Jan 2024 07:55:47 +0000
Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=A7=A9=20`ui`=20Add=20custom=20compon?=
 =?UTF-8?q?ent:=20hint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/stories/custom/hint.stories.tsx       | 22 +++++++++++++
 packages/ui/package.json                      |  1 +
 .../src/components/custom/hint/index.test.tsx | 23 ++++++++++++++
 .../ui/src/components/custom/hint/index.tsx   | 31 +++++++++++++++++++
 packages/ui/src/components/custom/index.ts    |  2 ++
 pnpm-lock.yaml                                | 12 +++++++
 6 files changed, 91 insertions(+)
 create mode 100644 apps/storybook/src/stories/custom/hint.stories.tsx
 create mode 100644 packages/ui/src/components/custom/hint/index.test.tsx
 create mode 100644 packages/ui/src/components/custom/hint/index.tsx

diff --git a/apps/storybook/src/stories/custom/hint.stories.tsx b/apps/storybook/src/stories/custom/hint.stories.tsx
new file mode 100644
index 00000000..c4eb7a4f
--- /dev/null
+++ b/apps/storybook/src/stories/custom/hint.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HelpCircle } from "lucide-react";
+
+import { Hint } from "@acme/ui/components";
+
+const meta = {
+  title: "custom/Hint",
+  component: Hint,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Hint>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    // sideOffset: 40,
+    description: "Shows some messages",
+    children: <HelpCircle className="h-4 w-4" />,
+  },
+};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index dfd3f45f..47167f00 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -48,6 +48,7 @@
     "@acme/tsconfig": "workspace:^0.1.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.10.6",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
diff --git a/packages/ui/src/components/custom/hint/index.test.tsx b/packages/ui/src/components/custom/hint/index.test.tsx
new file mode 100644
index 00000000..6d4134ed
--- /dev/null
+++ b/packages/ui/src/components/custom/hint/index.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Hint } from ".";
+
+const description = "Shows some messages";
+
+describe("<Hint />", () => {
+  it("should render the default text", () => {
+    const { getByText } = render(<Hint description={description}>Hover</Hint>);
+    expect(getByText("Hover")).toBeDefined();
+  });
+
+  it("should render description on hover", async () => {
+    const user = userEvent.setup();
+    const hint = render(<Hint description={description}>Hover</Hint>);
+    const ui = screen.getByRole("button");
+    await user.hover(ui);
+    await waitFor(() => {
+      expect(hint.getByRole("tooltip")).toHaveTextContent(description);
+    });
+  });
+});
diff --git a/packages/ui/src/components/custom/hint/index.tsx b/packages/ui/src/components/custom/hint/index.tsx
new file mode 100644
index 00000000..02a39beb
--- /dev/null
+++ b/packages/ui/src/components/custom/hint/index.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui";
+
+export interface HintProps {
+    children: ReactNode;
+    description: string;
+    side?: "left" | "right" | "top" | "bottom";
+    sideOffset?: number;
+}
+
+export const Hint = ({
+    children,
+    description,
+    side = "bottom",
+    sideOffset,
+}: HintProps) => {
+    return (
+        <TooltipProvider>
+            <Tooltip delayDuration={0}>
+                <TooltipTrigger>{children}</TooltipTrigger>
+                <TooltipContent
+                    sideOffset={sideOffset}
+                    side={side}
+                    className="text-xs max-w-[220px] break-words"
+                >
+                    {description}
+                </TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
+    );
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/custom/index.ts b/packages/ui/src/components/custom/index.ts
index 38f7f82b..f20e60b5 100644
--- a/packages/ui/src/components/custom/index.ts
+++ b/packages/ui/src/components/custom/index.ts
@@ -2,3 +2,5 @@ export * from "./activity-item";
 export * from "./cover";
 export * from "./cover-picker";
 export * from "./spinner";
+
+export * from "./hint";
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53a678ef..f181aaaa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -489,6 +489,9 @@ importers:
       '@testing-library/react':
         specifier: ^14.1.2
         version: 14.1.2(react-dom@18.2.0)(react@18.2.0)
+      '@testing-library/user-event':
+        specifier: ^14.5.2
+        version: 14.5.2(@testing-library/dom@9.3.4)
       '@types/node':
         specifier: ^20.10.6
         version: 20.10.6
@@ -6355,6 +6358,15 @@ packages:
       '@testing-library/dom': 9.3.4
     dev: true
 
+  /@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4):
+    resolution: {integrity: sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+    dependencies:
+      '@testing-library/dom': 9.3.4
+    dev: true
+
   /@tippyjs/react@4.2.6(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==}
     peerDependencies:

From 13edfa548f7a9ad2d8ca58ff0b753d8fa3160719 Mon Sep 17 00:00:00 2001
From: steeeee0223 <mr.steven7@gmail.com>
Date: Sun, 14 Jan 2024 05:31:26 +0000
Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=A7=A9=20`ui`=20Add=20custom=20compon?=
 =?UTF-8?q?ent:=20crud-item?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/stories/custom/crud-item.stories.tsx  |  61 +++++++
 .../custom/crud-item/index.test.tsx           |  11 ++
 .../src/components/custom/crud-item/index.tsx | 170 ++++++++++++++++++
 packages/ui/src/components/custom/index.ts    |   3 +-
 4 files changed, 244 insertions(+), 1 deletion(-)
 create mode 100644 apps/storybook/src/stories/custom/crud-item.stories.tsx
 create mode 100644 packages/ui/src/components/custom/crud-item/index.test.tsx
 create mode 100644 packages/ui/src/components/custom/crud-item/index.tsx

diff --git a/apps/storybook/src/stories/custom/crud-item.stories.tsx b/apps/storybook/src/stories/custom/crud-item.stories.tsx
new file mode 100644
index 00000000..caa73dad
--- /dev/null
+++ b/apps/storybook/src/stories/custom/crud-item.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Folder, PlusCircle, SearchIcon, SettingsIcon } from "lucide-react";
+
+import { CRUDItem } from "@acme/ui/components";
+
+const meta = {
+  title: "custom/Crud Item",
+  component: CRUDItem,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+  argTypes: {},
+  render: (args) => {
+    return (
+      <div className="group/sidebar relative z-[99999] flex h-full w-60 flex-col overflow-y-auto bg-secondary">
+        <CRUDItem {...args} />
+      </div>
+    );
+  },
+} satisfies Meta<typeof CRUDItem>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "New Page",
+    icon: PlusCircle,
+    onCreate: () => alert("Added New Page"),
+  },
+};
+export const Search: Story = {
+  args: {
+    label: "Search",
+    icon: SearchIcon,
+    onClick: () => alert("Opened Search Bar"),
+    shortcut: "⌘K",
+  },
+};
+export const Settings: Story = {
+  args: {
+    label: "Search",
+    icon: SettingsIcon,
+    onClick: () => alert("Opened Settings Block"),
+    shortcut: "⌘,",
+  },
+};
+export const TreeItem: Story = {
+  args: {
+    id: "test-id",
+    username: "John Doe",
+    label: "Folder",
+    icon: Folder,
+    onClick: () => alert(`Clicked item`),
+    active: true,
+    level: 0,
+    expanded: true,
+    onExpand: () => alert(`Expanded item`),
+    onCreate: () => alert(`Created item`),
+    onDelete: () => alert(`Deleted item`),
+  },
+};
diff --git a/packages/ui/src/components/custom/crud-item/index.test.tsx b/packages/ui/src/components/custom/crud-item/index.test.tsx
new file mode 100644
index 00000000..6b35060e
--- /dev/null
+++ b/packages/ui/src/components/custom/crud-item/index.test.tsx
@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+import { File } from "lucide-react";
+
+import { CRUDItem } from ".";
+
+describe("<CRUDItem />", () => {
+  it("should render the default text", () => {
+    const { getByText } = render(<CRUDItem label="Item" icon={File} />);
+    expect(getByText("Item")).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/custom/crud-item/index.tsx b/packages/ui/src/components/custom/crud-item/index.tsx
new file mode 100644
index 00000000..896912e3
--- /dev/null
+++ b/packages/ui/src/components/custom/crud-item/index.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import type { MouseEvent } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Skeleton,
+} from "@/components/ui";
+import { SPECIAL_KEYS } from "@/constants/keyboard";
+import { cn } from "@/lib";
+import {
+  ChevronDown,
+  ChevronRight,
+  MoreHorizontal,
+  Plus,
+  Trash,
+} from "lucide-react";
+
+/** Styles */
+const bgHover = "hover:bg-neutral-300 dark:hover:bg-neutral-600";
+const iconSize = "h-4 w-4";
+
+export interface CRUDItemProps {
+  username?: string;
+  label: string;
+  icon: LucideIcon;
+  id?: string;
+  documentIcon?: string | null;
+  active?: boolean;
+  expanded?: boolean;
+  level?: number;
+  shortcut?: string;
+  onClick?: () => void;
+  onExpand?: () => void;
+  onCreate?: () => void;
+  onDelete?: (itemId: string) => void;
+}
+
+export const CRUDItem = ({
+  id,
+  username = "admin",
+  label,
+  icon: Icon,
+  active,
+  documentIcon,
+  level = 0,
+  expanded,
+  shortcut,
+  onClick,
+  onExpand,
+  onCreate,
+  onDelete,
+}: CRUDItemProps) => {
+  const ExpandIcon = expanded ? ChevronDown : ChevronRight;
+  const handleExpand = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    onExpand?.();
+  };
+  const handleCreate = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    onCreate?.();
+    if (!expanded) onExpand?.();
+  };
+  const handleDelete = (e: MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    if (id) onDelete?.(id);
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      role="button"
+      style={{ paddingLeft: `${((level ?? 0) + 1) * 12}px` }}
+      className={cn(
+        "flex items-center",
+        "group min-h-[27px] w-full py-1 pr-3 text-sm font-medium text-muted-foreground hover:bg-primary/5",
+        active && "bg-primary/5 text-primary",
+      )}
+    >
+      {!!id && (
+        <div
+          role="button"
+          className={cn(bgHover, "mr-1 h-full rounded-sm p-0.5")}
+          onClick={handleExpand}
+        >
+          <ExpandIcon
+            className={cn(iconSize, "shrink-0 text-muted-foreground/50")}
+          />
+        </div>
+      )}
+      {documentIcon ? (
+        <div className="mr-2 shrink-0 text-[18px]">{documentIcon}</div>
+      ) : (
+        <Icon className="mr-2 h-[18px] w-[18px] shrink-0 text-muted-foreground" />
+      )}
+      <span className="truncate">{label}</span>
+      {shortcut && (
+        <kbd className="pointer-events-none ml-auto inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+          {Array.from(shortcut).map((key, i) => (
+            <span className={SPECIAL_KEYS.has(key) ? "text-xs" : ""} key={i}>
+              {key}
+            </span>
+          ))}
+        </kbd>
+      )}
+      {!!id && (
+        <div className="ml-auto flex items-center gap-x-1 p-0.5">
+          <DropdownMenu>
+            <DropdownMenuTrigger onClick={(e) => e.stopPropagation()} asChild>
+              <div
+                role="button"
+                className={cn(
+                  bgHover,
+                  "ml-auto h-full rounded-sm p-0.5 opacity-0 group-hover:opacity-100",
+                )}
+              >
+                <MoreHorizontal
+                  className={cn(iconSize, "text-muted-foreground")}
+                />
+              </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="z-[99999] w-60"
+              align="start"
+              side="right"
+              forceMount
+            >
+              <DropdownMenuItem onClick={handleDelete}>
+                <Trash className={cn(iconSize, "mr-2")} />
+                Delete
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <div className="p-2 text-xs text-muted-foreground">
+                Last edited by: {username}
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <div
+            role="button"
+            onClick={handleCreate}
+            className={cn(
+              bgHover,
+              "ml-auto h-full rounded-sm p-0.5 opacity-0 group-hover:opacity-100",
+            )}
+          >
+            <Plus className={cn("h-4 w-4", "text-muted-foreground")} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+CRUDItem.Skeleton = function ItemSkeleton({ level }: { level?: number }) {
+  return (
+    <div
+      style={{
+        paddingLeft: level ? `${level * 12 + 25}px` : "12px",
+      }}
+      className="flex gap-x-2 px-2 py-1.5"
+    >
+      <Skeleton className={cn("h-4 w-4", "w-[18px] bg-primary/5")} />
+      <Skeleton className="h-4 w-full bg-primary/5" />
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/custom/index.ts b/packages/ui/src/components/custom/index.ts
index f20e60b5..5377c60e 100644
--- a/packages/ui/src/components/custom/index.ts
+++ b/packages/ui/src/components/custom/index.ts
@@ -3,4 +3,5 @@ export * from "./cover";
 export * from "./cover-picker";
 export * from "./spinner";
 
-export * from "./hint";
\ No newline at end of file
+export * from "./hint";
+export * from "./crud-item";
\ No newline at end of file

From 62ad6a819c044da22b16c48e86c5c3fa7866ecf1 Mon Sep 17 00:00:00 2001
From: steeeee0223 <mr.steven7@gmail.com>
Date: Sun, 14 Jan 2024 06:51:34 +0000
Subject: [PATCH 5/7] =?UTF-8?q?=F0=9F=A7=A9=20`ui`=20Add=20custom=20compon?=
 =?UTF-8?q?ent:=20icon-picker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../stories/custom/icon-picker/crud-icon.tsx  | 47 +++++++++++++++++++
 .../custom/icon-picker/index.stories.tsx      | 19 ++++++++
 .../ui/__test__/mock/intersection-observer.ts |  7 +++
 packages/ui/package.json                      |  1 +
 .../custom/icon-picker/index.test.tsx         | 23 +++++++++
 .../components/custom/icon-picker/index.tsx   | 39 +++++++++++++++
 packages/ui/src/components/custom/index.ts    |  3 +-
 pnpm-lock.yaml                                | 17 +++++++
 8 files changed, 155 insertions(+), 1 deletion(-)
 create mode 100644 apps/storybook/src/stories/custom/icon-picker/crud-icon.tsx
 create mode 100644 apps/storybook/src/stories/custom/icon-picker/index.stories.tsx
 create mode 100644 packages/ui/__test__/mock/intersection-observer.ts
 create mode 100644 packages/ui/src/components/custom/icon-picker/index.test.tsx
 create mode 100644 packages/ui/src/components/custom/icon-picker/index.tsx

diff --git a/apps/storybook/src/stories/custom/icon-picker/crud-icon.tsx b/apps/storybook/src/stories/custom/icon-picker/crud-icon.tsx
new file mode 100644
index 00000000..23be1f19
--- /dev/null
+++ b/apps/storybook/src/stories/custom/icon-picker/crud-icon.tsx
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { Smile, X } from "lucide-react";
+
+import { Button, IconPicker } from "@acme/ui/components";
+
+const CrudIcon = () => {
+  const [icon, setIcon] = useState("");
+  const onUpdateIcon = (icon: string) => {
+    setIcon(icon);
+  };
+  const onRemoveIcon = () => setIcon("");
+
+  return (
+    <div className="group relative pl-[54px]">
+      {!!icon ? (
+        <div className="group/icon flex items-center gap-x-2 pt-6">
+          <IconPicker onChange={onUpdateIcon}>
+            <p className="text-6xl transition hover:opacity-75">{icon}</p>
+          </IconPicker>
+          <Button
+            onClick={onRemoveIcon}
+            className="rounded-full text-xs text-muted-foreground opacity-0 transition group-hover/icon:opacity-100"
+            variant="outline"
+            size="icon"
+          >
+            <X className="w04 h-4" />
+          </Button>
+        </div>
+      ) : (
+        <div className="flex items-center gap-x-2 py-4">
+          <IconPicker asChild onChange={onUpdateIcon}>
+            <Button
+              className="text-xs text-muted-foreground"
+              variant="ghost"
+              size="sm"
+            >
+              <Smile className="mr-2 h-4 w-4" />
+              Add icon
+            </Button>
+          </IconPicker>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CrudIcon;
diff --git a/apps/storybook/src/stories/custom/icon-picker/index.stories.tsx b/apps/storybook/src/stories/custom/icon-picker/index.stories.tsx
new file mode 100644
index 00000000..65551eaf
--- /dev/null
+++ b/apps/storybook/src/stories/custom/icon-picker/index.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { IconPicker } from "@acme/ui/components";
+
+import CrudIcon from "./crud-icon";
+
+const meta = {
+  title: "custom/Icon Picker",
+  component: IconPicker,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof IconPicker>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <CrudIcon />,
+};
diff --git a/packages/ui/__test__/mock/intersection-observer.ts b/packages/ui/__test__/mock/intersection-observer.ts
new file mode 100644
index 00000000..69f8fcd5
--- /dev/null
+++ b/packages/ui/__test__/mock/intersection-observer.ts
@@ -0,0 +1,7 @@
+export const intersectionObserverMock = () => ({
+  observe: () => null,
+});
+
+window.IntersectionObserver = vi
+  .fn()
+  .mockImplementation(intersectionObserverMock);
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 47167f00..58dd10d2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -33,6 +33,7 @@
     "class-variance-authority": "^0.7.0",
     "cmdk": "^0.2.0",
     "date-fns": "^3.2.0",
+    "emoji-picker-react": "^4.6.9",
     "next-themes": "^0.2.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.2",
diff --git a/packages/ui/src/components/custom/icon-picker/index.test.tsx b/packages/ui/src/components/custom/icon-picker/index.test.tsx
new file mode 100644
index 00000000..658d7ff5
--- /dev/null
+++ b/packages/ui/src/components/custom/icon-picker/index.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { IconPicker } from ".";
+
+import "../../../../__test__/mock/intersection-observer";
+
+describe("<IconPicker />", () => {
+  it("should render the default text", () => {
+    const { getByText } = render(<IconPicker>Icon Picker</IconPicker>);
+    expect(getByText("Icon Picker")).toBeDefined();
+  });
+
+  it("should render the icon menu on click", async () => {
+    const user = userEvent.setup();
+    const iconPicker = render(<IconPicker>Icon Picker</IconPicker>);
+    const ui = screen.getByRole("button");
+    await user.click(ui);
+    await waitFor(() => {
+      expect(iconPicker.getByRole("dialog")).toBeDefined();
+    });
+  });
+});
diff --git a/packages/ui/src/components/custom/icon-picker/index.tsx b/packages/ui/src/components/custom/icon-picker/index.tsx
new file mode 100644
index 00000000..7f41d375
--- /dev/null
+++ b/packages/ui/src/components/custom/icon-picker/index.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui";
+import EmojiPicker, { Theme } from "emoji-picker-react";
+import { useTheme } from "next-themes";
+
+const THEME_MAP = {
+  dark: Theme.DARK,
+  light: Theme.LIGHT,
+};
+
+interface IconPickerProps extends PropsWithChildren {
+  asChild?: boolean;
+  onChange?: (icon: string) => void;
+}
+
+export const IconPicker = ({
+  onChange,
+  children,
+  asChild,
+}: IconPickerProps) => {
+  const { resolvedTheme } = useTheme();
+  const currentTheme = (resolvedTheme ?? "light") as keyof typeof THEME_MAP;
+  const theme = THEME_MAP[currentTheme];
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild={asChild}>{children}</PopoverTrigger>
+      <PopoverContent className="z-[99999] w-full border-none p-0 shadow-none">
+        <EmojiPicker
+          height={350}
+          theme={theme}
+          onEmojiClick={(data) => onChange?.(data.emoji)}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/packages/ui/src/components/custom/index.ts b/packages/ui/src/components/custom/index.ts
index 5377c60e..97448bad 100644
--- a/packages/ui/src/components/custom/index.ts
+++ b/packages/ui/src/components/custom/index.ts
@@ -4,4 +4,5 @@ export * from "./cover-picker";
 export * from "./spinner";
 
 export * from "./hint";
-export * from "./crud-item";
\ No newline at end of file
+export * from "./crud-item";
+export * from "./icon-picker";
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f181aaaa..58656a64 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -449,6 +449,9 @@ importers:
       date-fns:
         specifier: ^3.2.0
         version: 3.2.0
+      emoji-picker-react:
+        specifier: ^4.6.9
+        version: 4.6.9(react@18.2.0)
       next-themes:
         specifier: ^0.2.1
         version: 0.2.1(next@14.0.4)(react-dom@18.2.0)(react@18.2.0)
@@ -9601,6 +9604,16 @@ packages:
       minimalistic-crypto-utils: 1.0.1
     dev: true
 
+  /emoji-picker-react@4.6.9(react@18.2.0):
+    resolution: {integrity: sha512-rXGqo+mQINZmK7GZfh4EWYXYIHQndPcu3xXLEM3gEpbctethEGW/ghR5sRSVOukK38ZrySFS1YxNG8SQcpZeKQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+    dependencies:
+      flairup: 0.0.28
+      react: 18.2.0
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: true
@@ -10552,6 +10565,10 @@ packages:
       path-exists: 5.0.0
     dev: true
 
+  /flairup@0.0.28:
+    resolution: {integrity: sha512-NuMhxKgsVW4HAqLi8NRqemTTKLkbLaVu2HUkHUAvFneDPTPJgMsuZlDcFdjuRhgAKZd00TXslaIWlyZ8BtADQw==}
+    dev: false
+
   /flat-cache@3.0.4:
     resolution: {integrity: sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==}
     engines: {node: ^10.12.0 || >=12.0.0}

From ae7bd221aa0bc1fb4870336d35b73ea11bf5f206 Mon Sep 17 00:00:00 2001
From: steeeee0223 <mr.steven7@gmail.com>
Date: Mon, 15 Jan 2024 08:48:02 +0000
Subject: [PATCH 6/7] =?UTF-8?q?=F0=9F=A7=A9=20`ui`=20Add=20custom=20compon?=
 =?UTF-8?q?ent:=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/storybook/package.json                   |  4 +-
 .../src/stories/custom/tree/_components.tsx   | 50 ++++++++++++++
 .../src/stories/custom/tree/index.stories.tsx | 55 +++++++++++++++
 .../src/stories/custom/tree/utils.ts          | 19 +++++
 .../src/components/custom/crud-item/index.tsx | 25 ++++---
 packages/ui/src/components/custom/index.ts    |  8 +--
 .../src/components/custom/tree/index.test.tsx | 13 ++++
 .../ui/src/components/custom/tree/index.tsx   |  6 ++
 .../src/components/custom/tree/index.types.ts |  9 +++
 .../custom/tree/tree-action-context.tsx       | 21 ++++++
 .../components/custom/tree/tree-actions.tsx   | 51 ++++++++++++++
 .../components/custom/tree/tree-context.tsx   | 22 ++++++
 .../src/components/custom/tree/tree-list.tsx  | 69 +++++++++++++++++++
 .../components/custom/tree/tree-prodiver.tsx  | 59 ++++++++++++++++
 packages/ui/src/hooks/index.ts                |  1 +
 packages/ui/src/hooks/use-fetch.ts            | 58 ++++++++++++++++
 pnpm-lock.yaml                                |  7 +-
 17 files changed, 462 insertions(+), 15 deletions(-)
 create mode 100644 apps/storybook/src/stories/custom/tree/_components.tsx
 create mode 100644 apps/storybook/src/stories/custom/tree/index.stories.tsx
 create mode 100644 apps/storybook/src/stories/custom/tree/utils.ts
 create mode 100644 packages/ui/src/components/custom/tree/index.test.tsx
 create mode 100644 packages/ui/src/components/custom/tree/index.tsx
 create mode 100644 packages/ui/src/components/custom/tree/index.types.ts
 create mode 100644 packages/ui/src/components/custom/tree/tree-action-context.tsx
 create mode 100644 packages/ui/src/components/custom/tree/tree-actions.tsx
 create mode 100644 packages/ui/src/components/custom/tree/tree-context.tsx
 create mode 100644 packages/ui/src/components/custom/tree/tree-list.tsx
 create mode 100644 packages/ui/src/components/custom/tree/tree-prodiver.tsx
 create mode 100644 packages/ui/src/hooks/index.ts
 create mode 100644 packages/ui/src/hooks/use-fetch.ts

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 65efa9d0..275941ef 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -29,7 +29,8 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@acme/eslint-config": "workspace:^0.2.0",
@@ -48,6 +49,7 @@
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
+    "@types/uuid": "^9.0.7",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
     "postcss": "^8.4.32",
diff --git a/apps/storybook/src/stories/custom/tree/_components.tsx b/apps/storybook/src/stories/custom/tree/_components.tsx
new file mode 100644
index 00000000..cbae95f4
--- /dev/null
+++ b/apps/storybook/src/stories/custom/tree/_components.tsx
@@ -0,0 +1,50 @@
+import { PlusCircle } from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
+
+import {
+  CRUDItem,
+  TreeList,
+  useTree,
+  useTreeAction,
+} from "@acme/ui/components";
+
+import { createItem } from "./utils";
+
+export const AddItem = () => {
+  const { dispatch } = useTreeAction();
+  const handleCreate = () =>
+    dispatch({ type: "add", payload: [createItem(uuidv4(), "Untitled")] });
+
+  return <CRUDItem label="New page" icon={PlusCircle} onClick={handleCreate} />;
+};
+
+export const TreeItems = () => {
+  const { isLoading } = useTree();
+  const { dispatch } = useTreeAction();
+  const onAddItem = (parentId?: string) =>
+    dispatch({
+      type: "add",
+      payload: [createItem(uuidv4(), "Untitled", parentId)],
+    });
+  const onDeleteItem = (id: string) =>
+    dispatch({ type: "delete", payload: [id] });
+  return (
+    <div className="mt-4">
+      {isLoading ? (
+        <>
+          <div className="mt-4">
+            {Array.from([0, 1, 0, 1, 1]).map((level, i) => (
+              <CRUDItem.Skeleton key={i} level={level} />
+            ))}
+          </div>
+        </>
+      ) : (
+        <TreeList
+          parentId={null}
+          onAddItem={onAddItem}
+          onDeleteItem={onDeleteItem}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/apps/storybook/src/stories/custom/tree/index.stories.tsx b/apps/storybook/src/stories/custom/tree/index.stories.tsx
new file mode 100644
index 00000000..d06789f3
--- /dev/null
+++ b/apps/storybook/src/stories/custom/tree/index.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FolderIcon } from "lucide-react";
+
+import { TreeItem, TreeProvider } from "@acme/ui/components";
+
+import { AddItem, TreeItems } from "./_components";
+import { createItem, delay } from "./utils";
+
+const meta = {
+  title: "custom/Tree",
+  component: TreeProvider,
+  parameters: { layout: "centered" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof TreeProvider>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Sidebar: Story = {
+  args: {
+    className: "w-80 bg-neutral-200 p-4 rounded-sm",
+    fetchItems: async () => {
+      const items = [] as TreeItem[];
+      await delay(3000);
+      return { data: items };
+    },
+    children: (
+      <div>
+        <AddItem />
+        <TreeItems />
+      </div>
+    ),
+  },
+};
+
+export const FolderSystem: Story = {
+  args: {
+    className: "w-80 bg-neutral-200 p-4 rounded-sm",
+    children: <TreeItems />,
+    fetchItems: async () => {
+      const items: TreeItem[] = [
+        createItem("test-id-1", "app", undefined, FolderIcon),
+        createItem("test-id-2", "page.tsx", "test-id-1"),
+        createItem("test-id-3", "layout.tsx", "test-id-1"),
+        createItem("test-id-4", "globals.css", "test-id-1"),
+        createItem("test-id-5", "docs", "test-id-1", FolderIcon),
+        createItem("test-id-6", "page.tsx", "test-id-5"),
+        createItem("test-id-7", "package.json", undefined),
+        createItem("test-id-8", "tsconfig.json", undefined),
+      ];
+      await delay(2000);
+      return { data: items };
+    },
+  },
+};
diff --git a/apps/storybook/src/stories/custom/tree/utils.ts b/apps/storybook/src/stories/custom/tree/utils.ts
new file mode 100644
index 00000000..5266398f
--- /dev/null
+++ b/apps/storybook/src/stories/custom/tree/utils.ts
@@ -0,0 +1,19 @@
+import type { LucideIcon } from "lucide-react";
+
+import type { TreeItem } from "@acme/ui/components";
+
+export const createItem = (
+  id: string,
+  title: string,
+  parentId?: string,
+  icon?: LucideIcon | string | null,
+): TreeItem => ({
+  id,
+  title,
+  parentId: parentId ?? null,
+  isArchived: false,
+  icon,
+});
+
+export const delay = async (timeout: number) =>
+  await new Promise((resolve) => setTimeout(resolve, timeout));
diff --git a/packages/ui/src/components/custom/crud-item/index.tsx b/packages/ui/src/components/custom/crud-item/index.tsx
index 896912e3..66a6f412 100644
--- a/packages/ui/src/components/custom/crud-item/index.tsx
+++ b/packages/ui/src/components/custom/crud-item/index.tsx
@@ -15,6 +15,7 @@ import { cn } from "@/lib";
 import {
   ChevronDown,
   ChevronRight,
+  FileIcon,
   MoreHorizontal,
   Plus,
   Trash,
@@ -27,9 +28,8 @@ const iconSize = "h-4 w-4";
 export interface CRUDItemProps {
   username?: string;
   label: string;
-  icon: LucideIcon;
+  icon?: LucideIcon | string | null;
   id?: string;
-  documentIcon?: string | null;
   active?: boolean;
   expanded?: boolean;
   level?: number;
@@ -40,13 +40,24 @@ export interface CRUDItemProps {
   onDelete?: (itemId: string) => void;
 }
 
+const ItemIcon = ({ icon: Icon }: Pick<CRUDItemProps, "icon">) => {
+  if (!Icon)
+    return (
+      <FileIcon className="mr-2 h-[18px] w-[18px] shrink-0 text-muted-foreground" />
+    );
+  if (typeof Icon === "string")
+    return <div className="mr-2 shrink-0 text-[18px]">{Icon}</div>;
+  return (
+    <Icon className="mr-2 h-[18px] w-[18px] shrink-0 text-muted-foreground" />
+  );
+};
+
 export const CRUDItem = ({
   id,
   username = "admin",
   label,
-  icon: Icon,
+  icon,
   active,
-  documentIcon,
   level = 0,
   expanded,
   shortcut,
@@ -92,11 +103,7 @@ export const CRUDItem = ({
           />
         </div>
       )}
-      {documentIcon ? (
-        <div className="mr-2 shrink-0 text-[18px]">{documentIcon}</div>
-      ) : (
-        <Icon className="mr-2 h-[18px] w-[18px] shrink-0 text-muted-foreground" />
-      )}
+      <ItemIcon icon={icon} />
       <span className="truncate">{label}</span>
       {shortcut && (
         <kbd className="pointer-events-none ml-auto inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
diff --git a/packages/ui/src/components/custom/index.ts b/packages/ui/src/components/custom/index.ts
index 97448bad..2ef304bb 100644
--- a/packages/ui/src/components/custom/index.ts
+++ b/packages/ui/src/components/custom/index.ts
@@ -1,8 +1,8 @@
 export * from "./activity-item";
 export * from "./cover";
 export * from "./cover-picker";
-export * from "./spinner";
-
-export * from "./hint";
 export * from "./crud-item";
-export * from "./icon-picker";
\ No newline at end of file
+export * from "./hint";
+export * from "./icon-picker";
+export * from "./spinner";
+export * from "./tree";
diff --git a/packages/ui/src/components/custom/tree/index.test.tsx b/packages/ui/src/components/custom/tree/index.test.tsx
new file mode 100644
index 00000000..e48392b5
--- /dev/null
+++ b/packages/ui/src/components/custom/tree/index.test.tsx
@@ -0,0 +1,13 @@
+import { render } from "@testing-library/react";
+
+import { TreeProvider } from ".";
+
+describe("<TreeProvider />", () => {
+  it("should render the default text", () => {
+    const fetchItems = vi.fn().mockResolvedValue({ data: [] });
+    const { getByText } = render(
+      <TreeProvider fetchItems={fetchItems}>Tree</TreeProvider>,
+    );
+    expect(getByText("Tree")).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/custom/tree/index.tsx b/packages/ui/src/components/custom/tree/index.tsx
new file mode 100644
index 00000000..a86a8a64
--- /dev/null
+++ b/packages/ui/src/components/custom/tree/index.tsx
@@ -0,0 +1,6 @@
+export * from "./index.types";
+export * from "./tree-action-context";
+export * from "./tree-actions";
+export * from "./tree-context";
+export * from "./tree-list";
+export * from "./tree-prodiver";
diff --git a/packages/ui/src/components/custom/tree/index.types.ts b/packages/ui/src/components/custom/tree/index.types.ts
new file mode 100644
index 00000000..43d214a6
--- /dev/null
+++ b/packages/ui/src/components/custom/tree/index.types.ts
@@ -0,0 +1,9 @@
+import type { LucideIcon } from "lucide-react";
+
+export interface TreeItem {
+  id: string;
+  title: string;
+  parentId?: string | null;
+  isArchived?: boolean;
+  icon?: LucideIcon | string | null;
+}
diff --git a/packages/ui/src/components/custom/tree/tree-action-context.tsx b/packages/ui/src/components/custom/tree/tree-action-context.tsx
new file mode 100644
index 00000000..01a6c295
--- /dev/null
+++ b/packages/ui/src/components/custom/tree/tree-action-context.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import type { Dispatch } from "react";
+import { createContext, useContext } from "react";
+
+import type { TreeItem } from "./index.types";
+import type { TreeAction } from "./tree-actions";
+
+interface TreeActionContextInterface {
+  dispatch: Dispatch<TreeAction<TreeItem>>;
+}
+
+export const TreeActionContext =
+  createContext<TreeActionContextInterface | null>(null);
+
+export function useTreeAction(): TreeActionContextInterface {
+  const object = useContext(TreeActionContext);
+  if (!object)
+    throw new Error("useTreeAction must be used within TreeProvider");
+  return object;
+}
diff --git a/packages/ui/src/components/custom/tree/tree-actions.tsx b/packages/ui/src/components/custom/tree/tree-actions.tsx
new file mode 100644
index 00000000..35541c16
--- /dev/null
+++ b/packages/ui/src/components/custom/tree/tree-actions.tsx
@@ -0,0 +1,51 @@
+import type { Reducer } from "react";
+
+import type { TreeItem } from "./index.types";
+
+export interface Entity<T> {
+  ids: string[];
+  entities: Record<string, T>;
+}
+
+export interface Modified<T> {
+  item: T;
+  ids: string[];
+}
+
+export type TreeAction<T> =
+  | { type: "add" | "set"; payload: T[] }
+  | { type: "archive" | "restore"; payload: Modified<T> }
+  | { type: "update"; payload: T }
+  | { type: "delete"; payload: string[] };
+
+export type TreeReducer = Reducer<Entity<TreeItem>, TreeAction<TreeItem>>;
+
+export function treeReducer(
+  { ids, entities }: Entity<TreeItem>,
+  { type, payload }: TreeAction<TreeItem>,
+): Entity<TreeItem> {
+  switch (type) {
+    case "add":
+      payload.forEach((item) => (entities[item.id] = item));
+      return { ids: Object.keys(entities), entities };
+    case "set":
+      payload.forEach((item) => (entities[item.id] = item));
+      return { ids: Object.keys(entities), entities };
+    case "update":
+      entities[payload.id] = payload;
+      return { ids, entities };
+    case "archive":
+      entities[payload.item.id] = payload.item;
+      payload.ids.forEach((id) => (entities[id]!.isArchived = true));
+      return { ids, entities };
+    case "restore":
+      entities[payload.item.id] = payload.item;
+      payload.ids.forEach((id) => (entities[id]!.isArchived = false));
+      return { ids, entities };
+    case "delete":
+      payload.forEach((id) => delete entities[id]);
+      return { ids: Object.keys(entities), entities };
+    default:
+      throw Error(`Unknown action`);
+  }
+}
diff --git a/packages/ui/src/components/custom/tree/tree-context.tsx b/packages/ui/src/components/custom/tree/tree-context.tsx
new file mode 100644
index 00000000..61e1bc6b
--- /dev/null
+++ b/packages/ui/src/components/custom/tree/tree-context.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+import type { TreeItem } from "./index.types";
+
+export interface TreeContextInterface {
+  isLoading: boolean;
+  treeItems: TreeItem[];
+  archivedItems: TreeItem[];
+  getChildren: (isArchived: boolean, parentId: string | null) => TreeItem[];
+  isItemActive?: (id: string) => boolean;
+  onClickItem?: (id: string) => void;
+}
+
+export const TreeContext = createContext<TreeContextInterface | null>(null);
+
+export function useTree(): TreeContextInterface {
+  const object = useContext(TreeContext);
+  if (!object) throw new Error("useTree must be used within TreeProvider");
+  return object;
+}
diff --git a/packages/ui/src/components/custom/tree/tree-list.tsx b/packages/ui/src/components/custom/tree/tree-list.tsx
new file mode 100644
index 00000000..36daf297
--- /dev/null
+++ b/packages/ui/src/components/custom/tree/tree-list.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import type { CRUDItemProps as ItemProps } from "@/components/custom";
+import { useState } from "react";
+import { CRUDItem as Item } from "@/components/custom";
+import { cn } from "@/lib";
+
+import { useTree } from "./tree-context";
+
+interface TreeListProps {
+  parentId: string | null;
+  level?: number;
+  onAddItem?: (parentId?: string) => void;
+  onDeleteItem?: ItemProps["onDelete"];
+}
+
+export function TreeList({
+  parentId = null,
+  level = 0,
+  onAddItem,
+  onDeleteItem,
+}: TreeListProps) {
+  const { getChildren, isItemActive, onClickItem } = useTree();
+  const items = getChildren(false, parentId);
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const onExpand = (itemId: string) =>
+    setExpanded((prev) => ({ ...prev, [itemId]: !prev[itemId] }));
+
+  return (
+    <>
+      <p
+        style={{
+          paddingLeft: level ? `${level * 12 + 25}px` : undefined,
+        }}
+        className={cn(
+          "hidden text-sm font-medium text-muted-foreground/80",
+          expanded && "last:block",
+          level === 0 && "hidden",
+        )}
+      >
+        No pages inside
+      </p>
+      {items.map(({ id, title, icon }) => (
+        <div key={id}>
+          <Item
+            id={id}
+            label={title}
+            icon={icon}
+            onClick={() => onClickItem?.(id)}
+            active={isItemActive?.(id)}
+            level={level}
+            expanded={expanded[id]}
+            onExpand={() => onExpand(id)}
+            onCreate={() => onAddItem?.(id)}
+            onDelete={onDeleteItem}
+          />
+          {expanded[id] && (
+            <TreeList
+              parentId={id}
+              level={level + 1}
+              onAddItem={onAddItem}
+              onDeleteItem={onDeleteItem}
+            />
+          )}
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/packages/ui/src/components/custom/tree/tree-prodiver.tsx b/packages/ui/src/components/custom/tree/tree-prodiver.tsx
new file mode 100644
index 00000000..cdc8e20d
--- /dev/null
+++ b/packages/ui/src/components/custom/tree/tree-prodiver.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import type { ActionState } from "@/hooks";
+import type { PropsWithChildren } from "react";
+import { useReducer } from "react";
+import { useFetch } from "@/hooks";
+import { toast } from "sonner";
+
+import type { TreeItem } from "./index.types";
+import type { TreeReducer } from "./tree-actions";
+import type { TreeContextInterface } from "./tree-context";
+import { TreeActionContext } from "./tree-action-context";
+import { treeReducer } from "./tree-actions";
+import { TreeContext } from "./tree-context";
+
+interface TreeProviderProps extends PropsWithChildren {
+  className?: string;
+  fetchItems: () => Promise<ActionState<never, TreeItem[]>>;
+  isItemActive?: (id: string) => boolean;
+  onClickItem?: (id: string) => void;
+}
+
+export function TreeProvider({
+  className,
+  children,
+  fetchItems,
+  isItemActive,
+  onClickItem,
+}: TreeProviderProps) {
+  const $initialItems = { ids: [], entities: {} };
+  const [state, dispatch] = useReducer<TreeReducer>(treeReducer, $initialItems);
+  const { data, isLoading } = useFetch<TreeItem[]>(fetchItems, {
+    onSuccess: (data) => dispatch({ type: "set", payload: data }),
+    onError: (e) => toast.error(e),
+  });
+
+  const treeItems = Object.values(state.entities);
+  console.log(`treeItems:`, treeItems);
+  const treeContextValues: TreeContextInterface = {
+    isLoading: isLoading || !data,
+    treeItems,
+    archivedItems: treeItems.filter(({ isArchived }) => isArchived),
+    getChildren: ($isArchived, $parentId) =>
+      treeItems.filter(
+        ({ parentId, isArchived }) =>
+          $parentId === parentId && isArchived === $isArchived,
+      ),
+    isItemActive,
+    onClickItem,
+  };
+
+  return (
+    <TreeContext.Provider value={treeContextValues}>
+      <TreeActionContext.Provider value={{ dispatch }}>
+        <div className={className}>{children}</div>
+      </TreeActionContext.Provider>
+    </TreeContext.Provider>
+  );
+}
diff --git a/packages/ui/src/hooks/index.ts b/packages/ui/src/hooks/index.ts
new file mode 100644
index 00000000..08d09d9b
--- /dev/null
+++ b/packages/ui/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./use-fetch";
diff --git a/packages/ui/src/hooks/use-fetch.ts b/packages/ui/src/hooks/use-fetch.ts
new file mode 100644
index 00000000..b5915324
--- /dev/null
+++ b/packages/ui/src/hooks/use-fetch.ts
@@ -0,0 +1,58 @@
+"use client";
+
+import type { DependencyList } from "react";
+import { useEffect, useState } from "react";
+
+export type FieldErrors<T> = Record<keyof T, string[]>;
+export interface ActionState<TInput, TOutput> {
+  fieldErrors?: FieldErrors<TInput>;
+  error?: string | null;
+  data?: TOutput;
+}
+
+interface UseFetchOptions<T> {
+  onSuccess?: (data: T) => void;
+  onError?: (error: string) => void;
+  onComplete?: () => void;
+}
+
+interface UseFetchResult<T> {
+  error?: string;
+  data?: T;
+  isLoading: boolean;
+}
+
+export const useFetch = <T>(
+  action: () => Promise<ActionState<never, T>>,
+  options: UseFetchOptions<T>,
+  dependencies: DependencyList = [],
+): UseFetchResult<T> => {
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [data, setData] = useState<T | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const execute = async () => {
+      try {
+        const result = await action();
+        if (!result) return;
+
+        const { error, data } = result;
+        if (error) {
+          setError(error);
+          options.onError?.(error);
+        }
+        if (data) {
+          setData(data);
+          options.onSuccess?.(data);
+        }
+      } finally {
+        setIsLoading(false);
+        options.onComplete?.();
+      }
+    };
+    execute();
+  }, dependencies);
+
+  return { error, data, isLoading };
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 58656a64..00043e08 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -205,6 +205,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.0)
+      uuid:
+        specifier: ^9.0.1
+        version: 9.0.1
     devDependencies:
       '@acme/eslint-config':
         specifier: workspace:^0.2.0
@@ -254,6 +257,9 @@ importers:
       '@types/react-dom':
         specifier: ^18.2.18
         version: 18.2.18
+      '@types/uuid':
+        specifier: ^9.0.7
+        version: 9.0.7
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.16(postcss@8.4.32)
@@ -17290,7 +17296,6 @@ packages:
   /uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
     hasBin: true
-    dev: true
 
   /uvu@0.5.6:
     resolution: {integrity: sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==}

From 123db51ece2b772f9eddc7d0271e92cd6cf242dc Mon Sep 17 00:00:00 2001
From: steeeee0223 <mr.steven7@gmail.com>
Date: Mon, 15 Jan 2024 09:04:15 +0000
Subject: [PATCH 7/7] =?UTF-8?q?=F0=9F=A7=A9=20`storybook`=20Remove=20unuse?=
 =?UTF-8?q?d=20stories=20&=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/storybook/package.json                   |   1 +
 .../stories/blocknote/block-editor/index.tsx  | 103 +++++++-------
 .../stories/custom/icon-picker/crud-icon.tsx  |   2 +-
 .../src/stories/custom/tree/index.stories.tsx |   3 +-
 .../stories/dnd/_components/action.module.css |  50 -------
 .../src/stories/dnd/_components/action.tsx    |  34 -----
 .../dnd/_components/draggable.module.css      | 130 ------------------
 .../src/stories/dnd/_components/index.ts      |   2 -
 .../src/stories/dnd/_components/wrapper.tsx   |  22 ---
 .../stories/dnd/draggable/draggable-item.tsx  |  86 ------------
 .../stories/dnd/draggable/index.stories.tsx   |  17 ---
 .../src/stories/dnd/draggable/index.tsx       |  65 ---------
 apps/storybook/src/stories/dnd/index.ts       |   1 -
 .../src/stories/providers/theme-provider.tsx  |   4 +-
 pnpm-lock.yaml                                | 102 ++++++++++++++
 15 files changed, 159 insertions(+), 463 deletions(-)
 delete mode 100644 apps/storybook/src/stories/dnd/_components/action.module.css
 delete mode 100644 apps/storybook/src/stories/dnd/_components/action.tsx
 delete mode 100644 apps/storybook/src/stories/dnd/_components/draggable.module.css
 delete mode 100644 apps/storybook/src/stories/dnd/_components/index.ts
 delete mode 100644 apps/storybook/src/stories/dnd/_components/wrapper.tsx
 delete mode 100644 apps/storybook/src/stories/dnd/draggable/draggable-item.tsx
 delete mode 100644 apps/storybook/src/stories/dnd/draggable/index.stories.tsx
 delete mode 100644 apps/storybook/src/stories/dnd/draggable/index.tsx
 delete mode 100644 apps/storybook/src/stories/dnd/index.ts

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 275941ef..8fe542d9 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -52,6 +52,7 @@
     "@types/uuid": "^9.0.7",
     "autoprefixer": "^10.4.16",
     "eslint": "^8.56.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
     "storybook": "^7.6.6",
diff --git a/apps/storybook/src/stories/blocknote/block-editor/index.tsx b/apps/storybook/src/stories/blocknote/block-editor/index.tsx
index 4955c9fc..3ee5ff00 100644
--- a/apps/storybook/src/stories/blocknote/block-editor/index.tsx
+++ b/apps/storybook/src/stories/blocknote/block-editor/index.tsx
@@ -1,80 +1,79 @@
 "use client";
 
-import { useTheme } from "next-themes";
-import { HandIcon } from "lucide-react";
-import { BlockNoteEditor } from "@blocknote/core";
+import type { BlockNoteEditor } from "@blocknote/core";
+import type { ReactSlashMenuItem } from "@blocknote/react";
 import {
-    BlockNoteView,
-    ReactSlashMenuItem,
-    getDefaultReactSlashMenuItems,
-    useBlockNote,
+  BlockNoteView,
+  getDefaultReactSlashMenuItems,
+  useBlockNote,
 } from "@blocknote/react";
+import { HandIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+
 import "@blocknote/core/style.css";
 
 export interface BlockEditorProps {
-    initialContent?: string | null;
-    editable?: boolean;
-    className?: string;
-    onChange?: (value: string) => void;
-    onUpload?: (file: File) => Promise<string>;
+  initialContent?: string | null;
+  editable?: boolean;
+  className?: string;
+  onChange?: (value: string) => void;
+  onUpload?: (file: File) => Promise<string>;
 }
 
 // Command to insert "Hello World" in bold in a new block below.
 const insertHelloWorld = (editor: BlockNoteEditor) => {
-    // Block that the text cursor is currently in.
-    const currentBlock = editor.getTextCursorPosition().block;
+  // Block that the text cursor is currently in.
+  const currentBlock = editor.getTextCursorPosition().block;
 
-    // New block we want to insert.
-    const helloWorldBlock = {
-        type: "paragraph",
-        content: [
-            { type: "text", text: "Hello World", styles: { bold: true } },
-        ],
-    };
+  // New block we want to insert.
+  const helloWorldBlock = {
+    type: "paragraph",
+    content: [{ type: "text", text: "Hello World", styles: { bold: true } }],
+  };
 
-    // Inserting the new block after the current one.
-    editor.insertBlocks([helloWorldBlock], currentBlock, "after");
+  // Inserting the new block after the current one.
+  editor.insertBlocks([helloWorldBlock], currentBlock, "after");
 };
 
 // Custom Slash Menu item which executes the above function.
 const insertHelloWorldItem: ReactSlashMenuItem = {
-    name: "Insert Hello World",
-    execute: insertHelloWorld,
-    aliases: ["helloworld", "hw"],
-    group: "Other",
-    icon: <HandIcon size={18} />,
-    hint: "Used to insert a block with 'Hello World' below.",
+  name: "Insert Hello World",
+  execute: insertHelloWorld,
+  aliases: ["helloworld", "hw"],
+  group: "Other",
+  icon: <HandIcon size={18} />,
+  hint: "Used to insert a block with 'Hello World' below.",
 };
 
 // List containing all default Slash Menu Items, as well as our custom one.
 const customSlashMenuItemList = [
-    ...getDefaultReactSlashMenuItems(),
-    insertHelloWorldItem,
+  ...getDefaultReactSlashMenuItems(),
+  insertHelloWorldItem,
 ];
 
 export const BlockEditor = ({
-    onChange,
-    onUpload,
-    initialContent,
-    editable,
-    className,
+  onChange,
+  onUpload,
+  initialContent,
+  editable,
+  className,
 }: BlockEditorProps) => {
-    const { resolvedTheme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
-    const editor: BlockNoteEditor = useBlockNote({
-        editable,
-        initialContent: initialContent ? JSON.parse(initialContent) : undefined,
-        onEditorContentChange: (editor) =>
-            onChange?.(JSON.stringify(editor.topLevelBlocks, null, 0)),
-        uploadFile: onUpload,
-        slashMenuItems: customSlashMenuItemList,
-    });
+  const editor: BlockNoteEditor = useBlockNote({
+    editable,
+    initialContent: initialContent ? JSON.parse(initialContent) : undefined,
+    onEditorContentChange: (editor) =>
+      onChange?.(JSON.stringify(editor.topLevelBlocks, null, 0)),
+    uploadFile: onUpload,
+    slashMenuItems: customSlashMenuItemList,
+  });
 
-    return (
-        <BlockNoteView
-            className={className}
-            editor={editor}
-            theme={resolvedTheme === "dark" ? "dark" : "light"}
-        />
-    );
+  return (
+    <BlockNoteView
+      className={className}
+      editor={editor}
+      theme={resolvedTheme === "dark" ? "dark" : "light"}
+    />
+  );
 };
diff --git a/apps/storybook/src/stories/custom/icon-picker/crud-icon.tsx b/apps/storybook/src/stories/custom/icon-picker/crud-icon.tsx
index 23be1f19..c46f2789 100644
--- a/apps/storybook/src/stories/custom/icon-picker/crud-icon.tsx
+++ b/apps/storybook/src/stories/custom/icon-picker/crud-icon.tsx
@@ -12,7 +12,7 @@ const CrudIcon = () => {
 
   return (
     <div className="group relative pl-[54px]">
-      {!!icon ? (
+      {icon ? (
         <div className="group/icon flex items-center gap-x-2 pt-6">
           <IconPicker onChange={onUpdateIcon}>
             <p className="text-6xl transition hover:opacity-75">{icon}</p>
diff --git a/apps/storybook/src/stories/custom/tree/index.stories.tsx b/apps/storybook/src/stories/custom/tree/index.stories.tsx
index d06789f3..85eec38a 100644
--- a/apps/storybook/src/stories/custom/tree/index.stories.tsx
+++ b/apps/storybook/src/stories/custom/tree/index.stories.tsx
@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { FolderIcon } from "lucide-react";
 
-import { TreeItem, TreeProvider } from "@acme/ui/components";
+import type { TreeItem } from "@acme/ui/components";
+import { TreeProvider } from "@acme/ui/components";
 
 import { AddItem, TreeItems } from "./_components";
 import { createItem, delay } from "./utils";
diff --git a/apps/storybook/src/stories/dnd/_components/action.module.css b/apps/storybook/src/stories/dnd/_components/action.module.css
deleted file mode 100644
index 7785db29..00000000
--- a/apps/storybook/src/stories/dnd/_components/action.module.css
+++ /dev/null
@@ -1,50 +0,0 @@
-$focused-outline-color: #4c9ffe;
-
-.Action {
-    display: flex;
-    width: 12px;
-    padding: 15px;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-    touch-action: none;
-    cursor: var(--cursor, pointer);
-    border-radius: 5px;
-    border: none;
-    outline: none;
-    appearance: none;
-    background-color: transparent;
-    -webkit-tap-highlight-color: transparent;
-
-    @media (hover: hover) {
-        &:hover {
-            background-color: var(--action-background, rgba(0, 0, 0, 0.05));
-
-            svg {
-                fill: #6f7b88;
-            }
-        }
-    }
-
-    svg {
-        flex: 0 0 auto;
-        margin: auto;
-        height: 100%;
-        overflow: visible;
-        fill: #919eab;
-    }
-
-    &:active {
-        background-color: var(--background, rgba(0, 0, 0, 0.05));
-
-        svg {
-            fill: var(--fill, #788491);
-        }
-    }
-
-    &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0),
-            0 0px 0px 2px $focused-outline-color;
-    }
-}
diff --git a/apps/storybook/src/stories/dnd/_components/action.tsx b/apps/storybook/src/stories/dnd/_components/action.tsx
deleted file mode 100644
index d1070b4e..00000000
--- a/apps/storybook/src/stories/dnd/_components/action.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { CSSProperties, forwardRef } from "react";
-
-import { cn } from "@acme/ui/lib";
-
-import styles from "./action.module.css";
-
-export interface ActionProps extends React.HTMLAttributes<HTMLButtonElement> {
-  active?: {
-    fill: string;
-    background: string;
-  };
-  cursor?: CSSProperties["cursor"];
-}
-
-export const Action = forwardRef<HTMLButtonElement, ActionProps>(
-  function Action({ active, className, cursor, style, ...props }, ref) {
-    return (
-      <button
-        ref={ref}
-        {...props}
-        className={cn(styles.Action, className)}
-        tabIndex={0}
-        style={
-          {
-            ...style,
-            cursor,
-            "--fill": active?.fill,
-            "--background": active?.background,
-          } as CSSProperties
-        }
-      />
-    );
-  },
-);
diff --git a/apps/storybook/src/stories/dnd/_components/draggable.module.css b/apps/storybook/src/stories/dnd/_components/draggable.module.css
deleted file mode 100644
index b0fb8272..00000000
--- a/apps/storybook/src/stories/dnd/_components/draggable.module.css
+++ /dev/null
@@ -1,130 +0,0 @@
-.Draggable {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    transition: transform 250ms ease;
-
-    > button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 54px;
-        flex-shrink: 1;
-        appearance: none;
-        outline: none;
-        border: 0;
-        padding: 8px 18px;
-        background-color: #181a22;
-        border-radius: 5px;
-        box-shadow: var(--box-shadow);
-        transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
-            scale(var(--scale, 1));
-        transition: box-shadow 300ms ease;
-    }
-
-    &:not(.handle) {
-        > button {
-            touch-action: none;
-            cursor: grab;
-
-            &:focus-visible:not(.active &) {
-                box-shadow: 0 0 0 3px #4c9ffe;
-            }
-        }
-    }
-
-    &.handle {
-        > button {
-            --action-background: rgba(255, 255, 255, 0.1);
-
-            > svg {
-                margin-right: 5px;
-            }
-
-            > button {
-                margin-right: -10px;
-            }
-        }
-    }
-
-    img {
-        width: 140px;
-        user-select: none;
-        pointer-events: none;
-    }
-
-    label {
-        display: block;
-        flex-shrink: 1;
-        padding: 10px;
-        transition: opacity 250ms ease;
-
-        text-align: center;
-        font-size: 1rem;
-        font-weight: 300;
-        color: #8d8d8d;
-        user-select: none;
-        cursor: url("/cursor.svg"), auto;
-
-        animation-name: pulse;
-        animation-duration: 1.5s;
-        animation-delay: 2s;
-        animation-iteration-count: infinite;
-        animation-timing-function: ease;
-        animation-direction: alternate;
-    }
-
-    &.dragging {
-        z-index: 1;
-        transition: none;
-
-        * {
-            cursor: grabbing;
-        }
-
-        > button {
-            --scale: 1.06;
-            --box-shadow: -1px 0 15px 0 rgba(34, 33, 81, 0.01),
-                0px 15px 15px 0 rgba(34, 33, 81, 0.25);
-
-            &:focus-visible {
-                --box-shadow: 0 0px 10px 2px #4c9ffe;
-            }
-        }
-
-        label {
-            animation: none;
-            opacity: 0;
-        }
-    }
-
-    &.dragOverlay,
-    &.dragging {
-        > button {
-            animation: pop 250ms cubic-bezier(0.18, 0.67, 0.6, 1.22);
-        }
-    }
-}
-
-@keyframes pulse {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes pop {
-    0% {
-        transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
-            scale(1);
-    }
-    100% {
-        transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0)
-            scale(var(--scale));
-        box-shadow: var(--box-shadow);
-    }
-}
diff --git a/apps/storybook/src/stories/dnd/_components/index.ts b/apps/storybook/src/stories/dnd/_components/index.ts
deleted file mode 100644
index 3b2b314c..00000000
--- a/apps/storybook/src/stories/dnd/_components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./wrapper";
-export * from "./action";
diff --git a/apps/storybook/src/stories/dnd/_components/wrapper.tsx b/apps/storybook/src/stories/dnd/_components/wrapper.tsx
deleted file mode 100644
index e0864c60..00000000
--- a/apps/storybook/src/stories/dnd/_components/wrapper.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { CSSProperties, PropsWithChildren } from "react";
-
-import { cn } from "@acme/ui/lib";
-
-interface WrapperProps extends PropsWithChildren {
-  center?: boolean;
-  style?: CSSProperties;
-}
-
-export function Wrapper({ children, center, style }: WrapperProps) {
-  return (
-    <div
-      className={cn(
-        "box-border flex w-full justify-start p-[20px]",
-        center && "justify-center",
-      )}
-      style={style}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/apps/storybook/src/stories/dnd/draggable/draggable-item.tsx b/apps/storybook/src/stories/dnd/draggable/draggable-item.tsx
deleted file mode 100644
index eca64549..00000000
--- a/apps/storybook/src/stories/dnd/draggable/draggable-item.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { CSSProperties } from "react";
-import { useDraggable } from "@dnd-kit/core";
-import { GripVertical, Move, MoveHorizontal, MoveVertical } from "lucide-react";
-
-import { Button, Label } from "@acme/ui/components";
-import { cn } from "@acme/ui/lib";
-
-import { Action } from "../_components/action";
-import styles from "../_components/draggable.module.css";
-
-export enum Axis {
-  All,
-  Vertical,
-  Horizontal,
-}
-export interface DraggableItemProps {
-  label: string;
-  handle?: boolean;
-  style?: CSSProperties;
-  buttonStyle?: CSSProperties;
-  axis?: Axis;
-  top?: number;
-  left?: number;
-}
-const MoveIcon = ({ axis, className }: { axis?: Axis; className?: string }) => {
-  switch (axis) {
-    case Axis.Horizontal:
-      return <MoveHorizontal className={className} />;
-    case Axis.Vertical:
-      return <MoveVertical className={className} />;
-    default:
-      return <Move className={className} />;
-  }
-};
-
-export function DraggableItem({
-  axis,
-  label,
-  style,
-  top,
-  left,
-  handle,
-  buttonStyle,
-}: DraggableItemProps) {
-  const { attributes, isDragging, listeners, setNodeRef, transform } =
-    useDraggable({ id: "draggable" });
-
-  return (
-    <div
-      className={cn(
-        styles.Draggable,
-        // dragOverlay && styles.dragOverlay,
-        isDragging && styles.dragging,
-        handle && styles.handle,
-      )}
-      style={
-        {
-          ...style,
-          top,
-          left,
-          "--translate-x": `${transform?.x ?? 0}px`,
-          "--translate-y": `${transform?.y ?? 0}px`,
-        } as CSSProperties
-      }
-    >
-      <Button
-        {...attributes}
-        ref={setNodeRef}
-        aria-label="Draggable"
-        data-cypress="draggable-item"
-        {...(handle ? {} : listeners)}
-        tabIndex={handle ? -1 : undefined}
-        style={buttonStyle}
-      >
-        <MoveIcon axis={axis} className="mr-2" />
-        draggable
-        {handle && (
-          <Action {...(handle ? listeners : {})}>
-            <GripVertical className="ml-2" />
-          </Action>
-        )}
-      </Button>
-      {label && <Label>{label}</Label>}
-    </div>
-  );
-}
diff --git a/apps/storybook/src/stories/dnd/draggable/index.stories.tsx b/apps/storybook/src/stories/dnd/draggable/index.stories.tsx
deleted file mode 100644
index a4189bc4..00000000
--- a/apps/storybook/src/stories/dnd/draggable/index.stories.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { Draggable } from "../draggable";
-
-const meta = {
-  title: "dnd/Draggable",
-  component: Draggable,
-  parameters: { layout: "centered" },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Draggable>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
diff --git a/apps/storybook/src/stories/dnd/draggable/index.tsx b/apps/storybook/src/stories/dnd/draggable/index.tsx
deleted file mode 100644
index d54ff804..00000000
--- a/apps/storybook/src/stories/dnd/draggable/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useState } from "react";
-import {
-    DndContext,
-    useSensor,
-    MouseSensor,
-    TouchSensor,
-    KeyboardSensor,
-    PointerActivationConstraint,
-    Modifiers,
-    useSensors,
-} from "@dnd-kit/core";
-import type { Coordinates } from "@dnd-kit/utilities";
-
-import { Axis, DraggableItem } from "./draggable-item";
-import { Wrapper } from "../_components";
-
-export interface DraggableProps {
-    activationConstraint?: PointerActivationConstraint;
-    axis?: Axis;
-    handle?: boolean;
-    modifiers?: Modifiers;
-    buttonStyle?: React.CSSProperties;
-    style?: React.CSSProperties;
-    label?: string;
-}
-export function Draggable({
-    activationConstraint,
-    axis,
-    handle,
-    label = "Go ahead, drag me.",
-    modifiers,
-    style,
-    buttonStyle,
-}: DraggableProps) {
-    const [{ x, y }, setCoordinates] = useState<Coordinates>({ x: 0, y: 0 });
-    const mouseSensor = useSensor(MouseSensor, { activationConstraint });
-    const touchSensor = useSensor(TouchSensor, { activationConstraint });
-    const keyboardSensor = useSensor(KeyboardSensor, {});
-    const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
-
-    return (
-        <DndContext
-            sensors={sensors}
-            onDragEnd={({ delta }) => {
-                setCoordinates(({ x, y }) => ({
-                    x: x + delta.x,
-                    y: y + delta.y,
-                }));
-            }}
-            modifiers={modifiers}
-        >
-            <Wrapper>
-                <DraggableItem
-                    axis={axis}
-                    label={label}
-                    handle={handle}
-                    top={y}
-                    left={x}
-                    style={style}
-                    buttonStyle={buttonStyle}
-                />
-            </Wrapper>
-        </DndContext>
-    );
-}
diff --git a/apps/storybook/src/stories/dnd/index.ts b/apps/storybook/src/stories/dnd/index.ts
deleted file mode 100644
index c13be162..00000000
--- a/apps/storybook/src/stories/dnd/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./draggable";
diff --git a/apps/storybook/src/stories/providers/theme-provider.tsx b/apps/storybook/src/stories/providers/theme-provider.tsx
index 6b5fce1a..8efcd93b 100644
--- a/apps/storybook/src/stories/providers/theme-provider.tsx
+++ b/apps/storybook/src/stories/providers/theme-provider.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { ThemeProviderProps } from "next-themes/dist/types";
 import * as React from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-    return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 00043e08..674d49bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -266,6 +266,9 @@ importers:
       eslint:
         specifier: ^8.56.0
         version: 8.56.0
+      eslint-plugin-storybook:
+        specifier: ^0.6.15
+        version: 0.6.15(eslint@8.56.0)(typescript@5.3.3)
       postcss:
         specifier: ^8.4.32
         version: 8.4.32
@@ -5730,6 +5733,12 @@ packages:
       - supports-color
     dev: true
 
+  /@storybook/csf@0.0.1:
+    resolution: {integrity: sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw==}
+    dependencies:
+      lodash: 4.17.21
+    dev: true
+
   /@storybook/csf@0.1.2:
     resolution: {integrity: sha512-ePrvE/pS1vsKR9Xr+o+YwdqNgHUyXvg+1Xjx0h9LrVx7Zq4zNe06pd63F5EvzTbCbJsHj7GHr9tkiaqm7U8WRA==}
     dependencies:
@@ -7146,6 +7155,14 @@ packages:
       - supports-color
     dev: false
 
+  /@typescript-eslint/scope-manager@5.62.0:
+    resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+    dev: true
+
   /@typescript-eslint/scope-manager@6.10.0:
     resolution: {integrity: sha512-TN/plV7dzqqC2iPNf1KrxozDgZs53Gfgg5ZHyw8erd6jd5Ta/JIEcdCheXFt9b1NYb93a1wmIIVW/2gLkombDg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -7174,11 +7191,37 @@ packages:
       - supports-color
     dev: false
 
+  /@typescript-eslint/types@5.62.0:
+    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
   /@typescript-eslint/types@6.10.0:
     resolution: {integrity: sha512-36Fq1PWh9dusgo3vH7qmQAj5/AZqARky1Wi6WpINxB6SkQdY5vQoT2/7rW7uBIsPDcvvGCLi4r10p0OJ7ITAeg==}
     engines: {node: ^16.0.0 || >=18.0.0}
     dev: false
 
+  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.3.3):
+    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/visitor-keys': 5.62.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.5.4
+      tsutils: 3.21.0(typescript@5.3.3)
+      typescript: 5.3.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/typescript-estree@6.10.0(typescript@5.3.3):
     resolution: {integrity: sha512-ek0Eyuy6P15LJVeghbWhSrBCj/vJpPXXR+EpaRZqou7achUWL8IdYnMSC5WHAeTWswYQuP2hAZgij/bC9fanBg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -7200,6 +7243,26 @@ packages:
       - supports-color
     dev: false
 
+  /@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0)
+      '@types/json-schema': 7.0.12
+      '@types/semver': 7.5.0
+      '@typescript-eslint/scope-manager': 5.62.0
+      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.3.3)
+      eslint: 8.56.0
+      eslint-scope: 5.1.1
+      semver: 7.5.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /@typescript-eslint/utils@6.10.0(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-v+pJ1/RcVyRc0o4wAGux9x42RHmAjIGzPRo538Z8M1tVx6HOnoQBCX/NoadHQlZeC+QO2yr4nNSFWOoraZCAyg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -7219,6 +7282,14 @@ packages:
       - typescript
     dev: false
 
+  /@typescript-eslint/visitor-keys@5.62.0:
+    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.62.0
+      eslint-visitor-keys: 3.4.3
+    dev: true
+
   /@typescript-eslint/visitor-keys@6.10.0:
     resolution: {integrity: sha512-xMGluxQIEtOM7bqFCo+rCMh5fqI+ZxV5RUUOa29iVPz1OgCZrtc7rFnz5cLUazlkPKYqX+75iuDq7m0HQ48nCg==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -10145,6 +10216,22 @@ packages:
       string.prototype.matchall: 4.0.8
     dev: false
 
+  /eslint-plugin-storybook@0.6.15(eslint@8.56.0)(typescript@5.3.3):
+    resolution: {integrity: sha512-lAGqVAJGob47Griu29KXYowI4G7KwMoJDOkEip8ujikuDLxU+oWJ1l0WL6F2oDO4QiyUFXvtDkEkISMOPzo+7w==}
+    engines: {node: 12.x || 14.x || >= 16}
+    peerDependencies:
+      eslint: '>=6'
+    dependencies:
+      '@storybook/csf': 0.0.1
+      '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@5.3.3)
+      eslint: 8.56.0
+      requireindex: 1.2.0
+      ts-dedent: 2.2.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+    dev: true
+
   /eslint-plugin-turbo@1.11.3(eslint@8.56.0):
     resolution: {integrity: sha512-R5ftTTWQzEYaKzF5g6m/MInCU8pIN+2TLL+S50AYBr1enwUovdZmnZ1HDwFMaxIjJ8x5ah+jvAzql5IJE9VWaA==}
     peerDependencies:
@@ -15347,6 +15434,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /requireindex@1.2.0:
+    resolution: {integrity: sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==}
+    engines: {node: '>=0.10.5'}
+    dev: true
+
   /requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
@@ -16638,6 +16730,16 @@ packages:
   /tslib@2.5.0:
     resolution: {integrity: sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==}
 
+  /tsutils@3.21.0(typescript@5.3.3):
+    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
+    engines: {node: '>= 6'}
+    peerDependencies:
+      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
+    dependencies:
+      tslib: 1.14.1
+      typescript: 5.3.3
+    dev: true
+
   /tty-browserify@0.0.1:
     resolution: {integrity: sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==}
     dev: true