✨ Feat: finish tag list 2

2023-09-15 11:16:38 +08:00 · 2023-09-15 11:16:38 +08:00 · 0e3042b458
commit 0e3042b458
parent 4f1452d138
17 changed files with 435 additions and 259 deletions
--- a/app/components/options/4/page.tsx
+++ b/app/components/options/4/page.tsx
@ -1,6 +1,5 @@
 "use client";

-import { Button } from "@/components/ui/button";
 import { MenuItem } from "../types";
 import { PlusIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
@ -17,6 +16,9 @@ import {
  PopoverContent,
  PopoverTrigger,
 } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import TagList2 from "../../tag/tag-list-2";
+import { tags } from "../../tag/data";

 const menuItems: MenuItem[] = [
  { name: "打印表单" },
@ -40,28 +42,17 @@ export default function TagOption() {
  //     setSelectedTags([...selectedTags, id]);
  //   }
  // };
+
  return (
-    // <Popover open={open} onOpenChange={setOpen}>
-    //   <PopoverTrigger asChild>
-    //     <Button variant="outline" aria-expanded={open}>
-    //       Tag
-    //     </Button>
-    //   </PopoverTrigger>
-    //   <PopoverContent className="w-[200px] p-0">
-    <Command className={cn("rounded-lg border shadow-md h-fit")}>
-      <CommandList>
-        <CommandGroup>
-          <CommandItem className="flex justify-between items-center">
-            <div className="flex justify-start items-center gap-2">
-              <Checkbox />
-              <div className={cn("h-2 w-2 rounded-[2px]")} />
-              <span>{"stes"}</span>
-            </div>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-    //   </PopoverContent>
-    // </Popover>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" aria-expanded={open}>
+          Tag
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <TagList2 list={tags} />
+      </PopoverContent>
+    </Popover>
  );
 }
--- a/app/components/options/Option.tsx
+++ b/app/components/options/Option.tsx
@ -13,7 +13,6 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import { MenuItem } from "./types";
-import { ReactNode } from "react";

 interface IOptionProps extends React.HTMLAttributes<HTMLDivElement> {
  title?: string;
@ -47,7 +46,7 @@ export default function Option({
          <DropdownMenuGroup>
            {menuItems.map((item) => (
              <>
-                {item?.subs  && (
+                {item?.subs && (
                  <DropdownMenuSub>
                    <DropdownMenuSubTrigger>
                      {item.icon}
--- a/app/components/tag/page.tsx
+++ b/app/components/tag/page.tsx
@ -1,7 +1,6 @@
 "use client";

-import { Button } from "@/components/ui/button";
-import { AddTag } from "./add-tag";
+import { TagAdd } from "./tag-add";
 import TagList from "./tag-list";
 import { tags } from "./data";
 import TagList2 from "./tag-list-2";
@ -10,7 +9,7 @@ export default function Tag() {
  return (
    <div className="flex gap-4">
      <TagList list={tags} className="w-32" />
-      <AddTag />
+      <TagAdd />
      <TagList2 list={tags} className="w-60" />
    </div>
  );
--- a/app/components/tag/tag-add.tsx
+++ b/app/components/tag/tag-add.tsx
@ -5,9 +5,20 @@ import { cn } from "@/lib/utils";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { useRef, useState } from "react";
 import { Check, XCircle } from "lucide-react";
-import { useDebounce, useOnClickOutside } from "usehooks-ts";
+import { useOnClickOutside } from "usehooks-ts";

-export function AddTag({ className }: React.HTMLAttributes<HTMLDivElement>) {
+interface ITagAddProps extends React.HTMLAttributes<HTMLDivElement> {
+  onSubmitTag?: (color: string, value: string) => void;
+  color?: string;
+  value?: string;
+}
+
+export function TagAdd({
+  className,
+  onSubmitTag,
+  color = "bg-blue-300",
+  value = "",
+}: ITagAddProps) {
  const colors = [
    "bg-blue-300",
    "bg-red-300",
@ -21,8 +32,8 @@ export function AddTag({ className }: React.HTMLAttributes<HTMLDivElement>) {
    "bg-gray-300",
  ];

-  const [selectedColor, setSelectedColor] = useState(colors[0]);
-  const [inputValue, setInputValue] = useState("");
+  const [selectedColor, setSelectedColor] = useState(color);
+  const [inputValue, setInputValue] = useState(value);
  const ref = useRef(null);

  const clear = () => {
@ -34,10 +45,17 @@ export function AddTag({ className }: React.HTMLAttributes<HTMLDivElement>) {

  const handleSubmit = () => {
    console.log({ inputValue, selectedColor });
+    // if (onSubmit) onSubmit();
+  };
+  const handleCancel = () => {
+    clear();
  };

  return (
-    <Card className={cn("w-[272px] h-fit", className)} ref={ref}>
+    <Card
+      className={cn("w-full h-fit border-none shadow-none", className)}
+      ref={ref}
+    >
      <CardContent className="p-4 space-y-4">
        <div className="space-y-2 relative">
          <Label>标签名称</Label>
@ -76,7 +94,7 @@ export function AddTag({ className }: React.HTMLAttributes<HTMLDivElement>) {
          </div>
        </div>
        <CardFooter className="flex justify-end gap-2 p-0 [&_button]:w-18 [&_button]:p-4 [&_button]:h-8 [&_button]:w-18">
-          <Button variant="outline" onClick={clear}>
+          <Button variant="outline" onClick={handleCancel}>
            取消
          </Button>
          <Button disabled={!inputValue} onClick={handleSubmit}>
--- a/app/components/tag/tag-list-2.tsx
+++ b/app/components/tag/tag-list-2.tsx
@ -13,40 +13,99 @@ import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
  DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
-import {
-  Check,
-  Edit,
-  MoreHorizontal,
-  MoreVertical,
-  Plus,
-  Trash2,
-} from "lucide-react";
+import { Check, Edit, MoreHorizontal, Plus, Trash2 } from "lucide-react";
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { TagAdd } from "./tag-add";
+import {
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "@/components/ui/alert-dialog";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface ITagList2OptionsProps {
+  tag: TagItem;
+}
+
+const TagList2Options = ({ tag }: ITagList2OptionsProps) => {
+  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
+  const [openEditDialog, setOpenEditDialog] = useState(false);
+  const handleDelete = () => setOpenDeleteDialog(false);

-const TagList2Options = () => {
  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger>
-        <Button variant="ghost" className="w-fit h-fit p-0">
-          <MoreHorizontal className="w-4 h-4" strokeWidth={1.5} />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuItem className="cursor-pointer">
-          <Edit className="w-4 h-4 mr-2" />
-          <span>编辑</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem className="cursor-pointer text-red-600 focus:text-red-600">
-          <Trash2 className="w-4 h-4 mr-2" />
-          <span>删除</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="w-fit h-fit p-0">
+            <MoreHorizontal className="w-4 h-4" strokeWidth={1.5} />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <Popover open={true}>
+            <PopoverTrigger asChild>
+              <DropdownMenuItem
+                className="cursor-pointer"
+                // onClick={() => setOpenEditDialog(true)}
+              >
+                <Edit className="w-4 h-4 mr-2" />
+                <span>编辑</span>
+              </DropdownMenuItem>
+            </PopoverTrigger>
+            <PopoverContent className="h-fit w-fit">
+              <TagAdd color={tag.color} value={tag.name} />
+            </PopoverContent>
+          </Popover>
+          <DropdownMenuItem
+            className={cn("cursor-pointer text-red-600 focus:text-red-600")}
+            onClick={() => setOpenDeleteDialog(true)}
+          >
+            <Trash2 className="w-4 h-4 mr-2" />
+            <span>删除</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {/* edit */}
+
+      {/* <Dialog open={openEditDialog} onOpenChange={setOpenEditDialog}>
+        <DialogContent className="">
+          <TagAdd color={tag.color} value={tag.name} />
+        </DialogContent>
+      </Dialog> */}
+      {/* delete */}
+      <AlertDialog open={openDeleteDialog} onOpenChange={setOpenDeleteDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>删除标签</AlertDialogTitle>
+            <AlertDialogDescription>
+              确认删除标签{`"${tag.name}"`}吗?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction
+              className=" bg-red-600 text-white hover:bg-red-400"
+              // onClick={handleDelete}
+            >
+              确认删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
  );
 };

@ -63,6 +122,8 @@ export default function TagList2({ list, className }: ITagListProps) {
      setSelectedTags([...selectedTags, id]);
    }
  };
+
+  const [openTagAdd, setOpenTagAdd] = useState(false);
  return (
    <Command className={cn("rounded-lg border shadow-md h-fit p-2", className)}>
      <CommandList>
@ -76,29 +137,40 @@ export default function TagList2({ list, className }: ITagListProps) {
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup>
-          {list.map((tag) => (
-            <CommandItem
-              value={tag.id + ""}
-              key={tag.id}
-              className="flex justify-between items-center cursor-pointer"
-            >
-              <div className="flex justify-start items-center gap-2">
-                <Checkbox
-                  checked={selectedTags.includes(tag.id + "")}
-                  onClick={() => handleSelect(tag.id + "")}
-                />
-                <div className={cn("h-2 w-2 rounded-[2px]", tag.color)} />
-                <span>{tag.name}</span>
-              </div>
-              <TagList2Options />
-            </CommandItem>
-          ))}
+          <ScrollArea className=" max-h-32">
+            {list.map((tag) => (
+              <CommandItem
+                value={tag.id + ""}
+                key={tag.id}
+                className="flex justify-between items-center cursor-pointer"
+              >
+                <div className="flex justify-start items-center gap-2">
+                  <Checkbox
+                    checked={selectedTags.includes(tag.id + "")}
+                    onClick={() => handleSelect(tag.id + "")}
+                  />
+                  <div className={cn("h-2 w-2 rounded-[2px]", tag.color)} />
+                  <span>{tag.name}</span>
+                </div>
+                <TagList2Options tag={tag} />
+              </CommandItem>
+            ))}
+          </ScrollArea>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup>
          <CommandItem className="cursor-pointer">
-            <Plus className="w-4 h-4 mr-2" />
-            <span>新建标签</span>
+            <Popover open={openTagAdd} onOpenChange={setOpenTagAdd}>
+              <PopoverTrigger asChild>
+                <div className="flex w-full" aria-expanded={openTagAdd}>
+                  <Plus className="w-4 h-4 mr-2" />
+                  <span>新建标签</span>
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className="w-[200px] p-0">
+                <TagAdd />
+              </PopoverContent>
+            </Popover>
          </CommandItem>
        </CommandGroup>
      </CommandList>
--- a/components/ui/alert-dialog.tsx
+++ b/components/ui/alert-dialog.tsx
@ -1,20 +1,20 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+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"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";

-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;

-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;

 const AlertDialogPortal = ({
  className,
  ...props
 }: AlertDialogPrimitive.AlertDialogPortalProps) => (
  <AlertDialogPrimitive.Portal className={cn(className)} {...props} />
-)
-AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName
+);
+AlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName;

 const AlertDialogOverlay = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@ -23,13 +23,13 @@ const AlertDialogOverlay = React.forwardRef<
  <AlertDialogPrimitive.Overlay
    className={cn(
      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
    )}
    {...props}
    ref={ref}
  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;

 const AlertDialogContent = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Content>,
@ -41,13 +41,13 @@ const AlertDialogContent = React.forwardRef<
      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 md:w-full",
-        className
+        className,
      )}
      {...props}
    />
  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;

 const AlertDialogHeader = ({
  className,
@ -56,12 +56,12 @@ const AlertDialogHeader = ({
  <div
    className={cn(
      "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
    )}
    {...props}
  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";

 const AlertDialogFooter = ({
  className,
@ -70,12 +70,12 @@ const AlertDialogFooter = ({
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
    )}
    {...props}
  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";

 const AlertDialogTitle = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Title>,
@ -86,8 +86,8 @@ const AlertDialogTitle = React.forwardRef<
    className={cn("text-lg font-semibold", className)}
    {...props}
  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;

 const AlertDialogDescription = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Description>,
@ -98,9 +98,9 @@ const AlertDialogDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;

 const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
@ -111,8 +111,8 @@ const AlertDialogAction = React.forwardRef<
    className={cn(buttonVariants(), className)}
    {...props}
  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;

 const AlertDialogCancel = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@ -123,12 +123,12 @@ const AlertDialogCancel = React.forwardRef<
    className={cn(
      buttonVariants({ variant: "outline" }),
      "mt-2 sm:mt-0",
-      className
+      className,
    )}
    {...props}
  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;

 export {
  AlertDialog,
@ -140,4 +140,4 @@ export {
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
-}
+};
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Card = React.forwardRef<
  HTMLDivElement,
@ -10,12 +10,12 @@ const Card = React.forwardRef<
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
+      className,
    )}
    {...props}
  />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";

 const CardHeader = React.forwardRef<
  HTMLDivElement,
@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";

 const CardTitle = React.forwardRef<
  HTMLParagraphElement,
@ -37,12 +37,12 @@ const CardTitle = React.forwardRef<
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
-      className
+      className,
    )}
    {...props}
  />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";

 const CardDescription = React.forwardRef<
  HTMLParagraphElement,
@ -53,16 +53,16 @@ const CardDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";

 const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";

 const CardFooter = React.forwardRef<
  HTMLDivElement,
@ -73,7 +73,14 @@ const CardFooter = React.forwardRef<
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";

-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@ -1,8 +1,8 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
-      className
+      className,
    )}
    {...props}
  >
@ -22,7 +22,7 @@ const Checkbox = React.forwardRef<
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;

-export { Checkbox }
+export { Checkbox };
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@ -1,10 +1,10 @@
-import * as React from "react"
-import { DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from "react";
+import { 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"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";

 const Command = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive>,
@ -14,12 +14,12 @@ const Command = React.forwardRef<
    ref={ref}
    className={cn(
      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
    )}
    {...props}
  />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;

 interface CommandDialogProps extends DialogProps {}

@ -32,8 +32,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
        </Command>
      </DialogContent>
    </Dialog>
-  )
-}
+  );
+};

 const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
@ -45,14 +45,14 @@ const CommandInput = React.forwardRef<
      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
+        className,
      )}
      {...props}
    />
  </div>
-))
+));

-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;

 const CommandList = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.List>,
@ -63,9 +63,9 @@ const CommandList = React.forwardRef<
    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
    {...props}
  />
-))
+));

-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;

 const CommandEmpty = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Empty>,
@ -76,9 +76,9 @@ const CommandEmpty = React.forwardRef<
    className="py-6 text-center text-sm"
    {...props}
  />
-))
+));

-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;

 const CommandGroup = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Group>,
@ -88,13 +88,13 @@ const CommandGroup = React.forwardRef<
    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
+      className,
    )}
    {...props}
  />
-))
+));

-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;

 const CommandSeparator = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Separator>,
@ -105,8 +105,8 @@ const CommandSeparator = React.forwardRef<
    className={cn("-mx-1 h-px bg-border", className)}
    {...props}
  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;

 const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
@ -116,13 +116,13 @@ const CommandItem = React.forwardRef<
    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
+      className,
    )}
    {...props}
  />
-))
+));

-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;

 const CommandShortcut = ({
  className,
@ -132,13 +132,13 @@ const CommandShortcut = ({
    <span
      className={cn(
        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
      )}
      {...props}
    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";

 export {
  Command,
@ -150,4 +150,4 @@ export {
  CommandItem,
  CommandShortcut,
  CommandSeparator,
-}
+};
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@ -1,20 +1,20 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;

-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;

 const DialogPortal = ({
  className,
  ...props
 }: DialogPrimitive.DialogPortalProps) => (
  <DialogPrimitive.Portal className={cn(className)} {...props} />
-)
-DialogPortal.displayName = DialogPrimitive.Portal.displayName
+);
+DialogPortal.displayName = DialogPrimitive.Portal.displayName;

 const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
@ -24,12 +24,12 @@ const DialogOverlay = React.forwardRef<
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
    )}
    {...props}
  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;

 const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
      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 md:w-full",
-        className
+        className,
      )}
      {...props}
    >
@ -52,8 +52,8 @@ const DialogContent = React.forwardRef<
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;

 const DialogHeader = ({
  className,
@ -62,12 +62,12 @@ const DialogHeader = ({
  <div
    className={cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
    )}
    {...props}
  />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";

 const DialogFooter = ({
  className,
@ -76,12 +76,12 @@ const DialogFooter = ({
  <div
    className={cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
    )}
    {...props}
  />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";

 const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
@ -91,12 +91,12 @@ const DialogTitle = React.forwardRef<
    ref={ref}
    className={cn(
      "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
    )}
    {...props}
  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;

 const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
@ -107,8 +107,8 @@ const DialogDescription = React.forwardRef<
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;

 export {
  Dialog,
@ -118,4 +118,4 @@ export {
  DialogFooter,
  DialogTitle,
  DialogDescription,
-}
+};
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@ -1,25 +1,25 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;

-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;

-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;

-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;

-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

 const DropdownMenuSubTrigger = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
  }
 >(({ className, inset, children, ...props }, ref) => (
  <DropdownMenuPrimitive.SubTrigger
@ -27,16 +27,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
      inset && "pl-8",
-      className
+      className,
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;

 const DropdownMenuSubContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@ -46,13 +46,13 @@ const DropdownMenuSubContent = React.forwardRef<
    ref={ref}
    className={cn(
      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[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
+      className,
    )}
    {...props}
  />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;

 const DropdownMenuContent = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@ -64,18 +64,18 @@ const DropdownMenuContent = React.forwardRef<
      sideOffset={sideOffset}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[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
+        className,
      )}
      {...props}
    />
  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;

 const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
  }
 >(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
@ -83,12 +83,12 @@ const DropdownMenuItem = React.forwardRef<
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      inset && "pl-8",
-      className
+      className,
    )}
    {...props}
  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;

 const DropdownMenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
    )}
    checked={checked}
    {...props}
@ -110,9 +110,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
    </span>
    {children}
  </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;

 const DropdownMenuRadioItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
    )}
    {...props}
  >
@ -133,13 +133,13 @@ const DropdownMenuRadioItem = React.forwardRef<
    </span>
    {children}
  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;

 const DropdownMenuLabel = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
  }
 >(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Label
@ -147,12 +147,12 @@ const DropdownMenuLabel = React.forwardRef<
    className={cn(
      "px-2 py-1.5 text-sm font-semibold",
      inset && "pl-8",
-      className
+      className,
    )}
    {...props}
  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;

 const DropdownMenuSeparator = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@ -163,8 +163,8 @@ const DropdownMenuSeparator = React.forwardRef<
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;

 const DropdownMenuShortcut = ({
  className,
@ -175,9 +175,9 @@ const DropdownMenuShortcut = ({
      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
      {...props}
    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";

 export {
  DropdownMenu,
@ -195,4 +195,4 @@ export {
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
-}
+};
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}
@ -12,14 +12,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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
+          className,
        )}
        ref={ref}
        {...props}
      />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";

-export { Input }
+export { Input };
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@ -1,12 +1,12 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);

 const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
@ -18,7 +18,7 @@ const Label = React.forwardRef<
    className={cn(labelVariants(), className)}
    {...props}
  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;

-export { Label }
+export { Label };
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@ -1,11 +1,11 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;

-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;

 const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
@ -18,12 +18,12 @@ const PopoverContent = React.forwardRef<
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[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
+        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;

-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent };
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-scroll-area": "^1.0.4",
    "@radix-ui/react-slot": "^1.0.2",
    "@types/node": "20.5.6",
    "@types/react": "18.2.21",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -32,6 +32,9 @@ dependencies:
  '@radix-ui/react-popover':
    specifier: ^1.0.6
    version: registry.npmmirror.com/@radix-ui/react-popover@1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-scroll-area':
+    specifier: ^1.0.4
+    version: registry.npmmirror.com/@radix-ui/react-scroll-area@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
  '@radix-ui/react-slot':
    specifier: ^1.0.2
    version: registry.npmmirror.com/@radix-ui/react-slot@1.0.2(@types/react@18.2.21)(react@18.2.0)
@ -445,6 +448,14 @@ packages:
      fastq: registry.npmmirror.com/fastq@1.15.0
    dev: false

+  registry.npmmirror.com/@radix-ui/number@1.0.1:
+    resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@radix-ui/number/-/number-1.0.1.tgz}
+    name: '@radix-ui/number'
+    version: 1.0.1
+    dependencies:
+      '@babel/runtime': registry.npmmirror.com/@babel/runtime@7.22.11
+    dev: false
+
  registry.npmmirror.com/@radix-ui/primitive@1.0.0:
    resolution: {integrity: sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@radix-ui/primitive/-/primitive-1.0.0.tgz}
    name: '@radix-ui/primitive'
@ -1192,6 +1203,38 @@ packages:
      react-dom: registry.npmmirror.com/react-dom@18.2.0(react@18.2.0)
    dev: false

+  registry.npmmirror.com/@radix-ui/react-scroll-area@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.4.tgz}
+    id: registry.npmmirror.com/@radix-ui/react-scroll-area/1.0.4
+    name: '@radix-ui/react-scroll-area'
+    version: 1.0.4
+    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': registry.npmmirror.com/@babel/runtime@7.22.11
+      '@radix-ui/number': registry.npmmirror.com/@radix-ui/number@1.0.1
+      '@radix-ui/primitive': registry.npmmirror.com/@radix-ui/primitive@1.0.1
+      '@radix-ui/react-compose-refs': registry.npmmirror.com/@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-context': registry.npmmirror.com/@radix-ui/react-context@1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-direction': registry.npmmirror.com/@radix-ui/react-direction@1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-presence': registry.npmmirror.com/@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': registry.npmmirror.com/@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': registry.npmmirror.com/@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': registry.npmmirror.com/@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@types/react': registry.npmmirror.com/@types/react@18.2.21
+      '@types/react-dom': registry.npmmirror.com/@types/react-dom@18.2.7
+      react: registry.npmmirror.com/react@18.2.0
+      react-dom: registry.npmmirror.com/react-dom@18.2.0(react@18.2.0)
+    dev: false
+
  registry.npmmirror.com/@radix-ui/react-slot@1.0.0(react@18.2.0):
    resolution: {integrity: sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz}
    id: registry.npmmirror.com/@radix-ui/react-slot/1.0.0