@customafk/lunas-ui 0.0.25 → 0.0.27

package/packages/components/ui/alert-dialog.tsx

@@ -1,99 +0,0 @@
-'use client'
-import React from 'react'
-import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
-
-import { buttonVariants } from '@/components/ui/button'
-import { cn } from '@/lib/utils'
-
-function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-}
-
-function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-}
-
-function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        'fixed inset-0 z-50 bg-black/50',
-        'data-[state=open]:animate-in',
-        'data-[state=closed]:animate-out',
-        'data-[state=closed]:fade-out-0',
-        'data-[state=open]:fade-in-0',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          'bg-background',
-          'fixed z-50',
-          'top-1/2 left-1/2 -translate-1/2',
-          'grid w-full max-w-[calc(100%-2rem)] sm:max-w-lg',
-          'gap-4 rounded-lg p-6 shadow-lg duration-200',
-          'data-[state=open]:animate-in',
-          'data-[state=open]:fade-in-0',
-          'data-[state=open]:zoom-in-95',
-          'data-[state=closed]:animate-out',
-          'data-[state=closed]:fade-out-0',
-          'data-[state=closed]:zoom-out-95',
-          className,
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="alert-dialog-header" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />
-}
-
-function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="alert-dialog-footer" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
-}
-
-function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return <AlertDialogPrimitive.Title data-slot="alert-dialog-title" className={cn('text-text-positive-strong text-lg font-semibold', className)} {...props} />
-}
-
-function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return <AlertDialogPrimitive.Description data-slot="alert-dialog-description" className={cn('text-text-positive-weak text-sm', className)} {...props} />
-}
-
-function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), 'min-w-24', className)} {...props} autoFocus tabIndex={1} />
-}
-
-function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline', color: 'muted' }), 'min-w-24', className)} {...props} />
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-}

package/packages/components/ui/alert.tsx

@@ -1,44 +0,0 @@
-'use client'
-import React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const alertVariants = cva(
-  [
-    'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm',
-    'has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4',
-    '[&>svg]:translate-y-0.5 [&>svg]:text-current',
-  ],
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-text-positive-strong',
-        destructive: 'text-danger-strong bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-danger',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
-  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="alert-title" className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)} {...props} />
-}
-
-function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn('text-text-positive-weak col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className)}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertDescription, AlertTitle }

package/packages/components/ui/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-'use client'
-import React from 'react'
-import { AspectRatio as AspectRatioPrimitive } from 'radix-ui'
-
-import { cn } from '@/lib/utils'
-
-function AspectRatio({ className, ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" className={cn('bg-secondary-muted rounded-md', className)} {...props} />
-}
-
-export { AspectRatio }

package/packages/components/ui/avatar.tsx

@@ -1,25 +0,0 @@
-'use client'
-import React from 'react'
-import { Avatar as AvatarPrimitive } from 'radix-ui'
-
-import { cn } from '@/lib/utils'
-
-function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return <AvatarPrimitive.Root data-slot="avatar" className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)} {...props} />
-}
-
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return <AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square size-full', className)} {...props} />
-}
-
-function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarFallback, AvatarImage }

package/packages/components/ui/badge.tsx

@@ -1,57 +0,0 @@
-'use client'
-import React from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const badgeVariants = cva(
-  'focus:ring-ring rounded-sm inline-flex items-center px-2.5 py-0.5 font-semibold text-white shadow-sm transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden forced-colors:outline',
-  {
-    variants: {
-      color: {
-        red: 'bg-red-500 dark:bg-red-600 text-white',
-        orange: 'bg-orange-500 text-white dark:bg-orange-600',
-        amber: 'bg-amber-500 text-white dark:bg-amber-600 ',
-        yellow: 'bg-yellow-500 text-white dark:bg-yellow-600 ',
-        lime: 'bg-lime-500 text-white dark:bg-lime-600',
-        green: 'bg-green-500 text-white dark:bg-green-600',
-        emerald: 'bg-emerald-500 text-white dark:bg-emerald-600',
-        teal: 'bg-teal-500 text-white dark:bg-teal-600',
-        cyan: 'bg-cyan-500 text-white dark:bg-cyan-600',
-        sky: 'bg-sky-500 text-white dark:bg-sky-600',
-        blue: 'bg-blue-500 text-white dark:bg-blue-600',
-        indigo: 'bg-indigo-500 text-white dark:bg-indigo-600',
-        violet: 'bg-violet-500 text-white dark:bg-violet-600',
-        purple: 'bg-purple-500 text-white dark:bg-purple-600',
-        fuchsia: 'bg-fuchsia-500 text-white dark:bg-fuchsia-600',
-        pink: 'bg-pink-500 text-white dark:bg-pink-600',
-        rose: 'bg-rose-500 text-white dark:bg-rose-600',
-        zinc: 'bg-zinc-500 text-white dark:bg-zinc-600',
-      },
-      size: {
-        xs: 'text-[8px]/3 px-1 py-0.5 gap-1',
-        sm: 'text-[10px]/3 px-1.5 py-1 gap-1',
-        md: 'text-xs px-2 py-1 gap-1',
-        lg: 'text-sm px-2 py-1 gap-1.5',
-        xl: 'text-base px-2.5 py-1 gap-1.5',
-      },
-      pill: {
-        true: 'rounded-full',
-      },
-    },
-    defaultVariants: {
-      color: 'zinc',
-      size: 'md',
-      pill: true,
-    },
-  },
-)
-
-export type BadgeProps = VariantProps<typeof badgeVariants> & React.ComponentPropsWithoutRef<'div'>
-
-function Badge({ className, color, size, pill, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ color, pill, size }), className)} {...props} />
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export { Badge, badgeVariants }

package/packages/components/ui/breadcrumb.tsx

@@ -1,74 +0,0 @@
-'use client'
-import React from 'react'
-import { Slot as SlotPrimitive } from 'radix-ui'
-import { ChevronRight, MoreHorizontalIcon } from 'lucide-react'
-
-import { cn } from '@/lib/utils'
-
-function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
-}
-
-function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
-  return (
-    <ol
-      data-slot="breadcrumb-list"
-      className={cn('text-text-positive-weak flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />
-}
-
-function BreadcrumbLink({
-  asChild,
-  className,
-  ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean
-}) {
-  const Comp = asChild ? SlotPrimitive.Slot : 'a'
-
-  return <Comp data-slot="breadcrumb-link" className={cn('hover:text-text-positive transition-colors', className)} {...props} />
-}
-
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="breadcrumb-page"
-      role="link"
-      aria-disabled="true"
-      aria-current="page"
-      className={cn('text-text-positive-strong font-normal', className)}
-      {...props}
-    />
-  )
-}
-
-function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
-  return (
-    <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
-      {children ?? <ChevronRight />}
-    </li>
-  )
-}
-
-function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="breadcrumb-ellipsis"
-      role="presentation"
-      aria-hidden="true"
-      className={cn('flex size-9 items-center justify-center', className)}
-      {...props}
-    >
-      <MoreHorizontalIcon size={16} />
-      <span className="sr-only">More</span>
-    </span>
-  )
-}
-
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator }

package/packages/components/ui/button.tsx

@@ -1,205 +0,0 @@
-'use client'
-
-import { Slot } from 'radix-ui'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const buttonVariants = cva(
-  [
-    'relative shrink-0 cursor-pointer rounded-md font-medium whitespace-normal transition-all',
-    'hover:shadow-md',
-    'active:ring-0',
-    '[&_svg]:pointer-events-none',
-    '[&_svg]:shrink-0',
-    "[&_svg:not([class*='size-'])]:size-4",
-    'disabled:pointer-events-none',
-    'disabled:cursor-default disabled:opacity-50',
-  ],
-  {
-    variants: {
-      variant: {
-        default: '-outline-offset-1 outline-1 text-text-negative-strong',
-        outline:
-          '-outline-offset-1 outline-1 text-text-positive hover:text-text-positive-strong focus:text-text-positive-strong active:text-text-positive-strong',
-        ghost: 'outline-0 shadow-none hover:shadow-none',
-
-        link: '',
-      },
-      color: {
-        primary: 'hover:shadow-primary-weak',
-        secondary: 'hover:shadow-secondary-weak',
-        muted: 'hover:shadow-border-weak',
-        success: 'hover:shadow-success-weak',
-        important: 'hover:shadow-important-weak',
-        info: 'hover:shadow-info-weak',
-        warning: 'hover:shadow-warning-weak',
-        danger: 'hover:shadow-danger-weak',
-      },
-      size: {
-        sm: 'px-2 py-1.5 gap-1 text-xs focus:ring-4 has-[>svg]:px-2.5',
-        default: 'px-2.5 py-2 gap-1 text-sm focus:ring-4 has-[>svg]:px-3',
-        lg: 'px-3 py-2.5 gap-1 text-base focus:ring-6 has-[>svg]:px-4',
-        icon: 'size-8',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      color: 'primary',
-      size: 'default',
-    },
-    compoundVariants: [
-      {
-        variant: 'default',
-        color: 'primary',
-        className: 'outline-primary-strong bg-primary focus:ring-primary-weak focus:outline-primary-intense focus:bg-primary-strong active:bg-primary-strong',
-      },
-      {
-        variant: 'default',
-        color: 'secondary',
-        className:
-          'outline-secondary-strong bg-secondary focus:ring-secondary-weak focus:outline-secondary-intense focus:bg-secondary-strong active:bg-secondary-strong',
-      },
-      {
-        variant: 'default',
-        color: 'success',
-        className: 'outline-success-strong bg-success focus:ring-success-weak focus:outline-success-intense focus:bg-success-strong active:bg-success-strong',
-      },
-      {
-        variant: 'default',
-        color: 'important',
-        className:
-          'outline-important-strong bg-important focus:ring-important-weak focus:outline-important-intense focus:bg-important-strong active:bg-important-strong',
-      },
-      {
-        variant: 'default',
-        color: 'info',
-        className: 'outline-info-strong bg-info focus:ring-info-weak focus:outline-info-intense focus:bg-info-strong active:bg-info-strong',
-      },
-      {
-        variant: 'default',
-        color: 'warning',
-        className: 'outline-warning-strong bg-warning focus:ring-warning-weak focus:outline-warning-intense focus:bg-warning-strong active:bg-warning-strong',
-      },
-      {
-        variant: 'default',
-        color: 'danger',
-        className: 'outline-danger-strong bg-danger focus:ring-danger-weak focus:outline-danger-intense focus:bg-danger-strong active:bg-danger-strong',
-      },
-      {
-        variant: 'outline',
-        color: 'muted',
-        className: 'outline-border bg-background focus:ring-border-weak focus:outline-border-strong focus:bg-border-muted active:bg-border-muted',
-      },
-      {
-        variant: 'outline',
-        color: 'primary',
-        className: 'outline-primary-strong bg-background focus:ring-primary-weak focus:outline-primary-intense focus:bg-primary-muted active:bg-primary-muted',
-      },
-      {
-        variant: 'outline',
-        color: 'secondary',
-        className:
-          'outline-secondary-strong bg-background focus:ring-secondary-weak focus:outline-secondary-intense focus:bg-secondary-muted active:bg-secondary-muted',
-      },
-      {
-        variant: 'outline',
-        color: 'success',
-        className: 'outline-success-strong bg-background focus:ring-success-weak focus:outline-success-intense focus:bg-success-muted active:bg-success-muted',
-      },
-      {
-        variant: 'outline',
-        color: 'important',
-        className:
-          'outline-important-strong bg-background focus:ring-important-weak focus:outline-important-intense focus:bg-important-muted active:bg-important-muted',
-      },
-      {
-        variant: 'outline',
-        color: 'info',
-        className: 'outline-info-strong bg-background focus:ring-info-weak focus:outline-info-intense focus:bg-info-muted active:bg-info-muted',
-      },
-      {
-        variant: 'outline',
-        color: 'warning',
-        className: 'outline-warning-strong bg-background focus:ring-warning-weak focus:outline-warning-intense focus:bg-warning-muted active:bg-warning-muted',
-      },
-      {
-        variant: 'outline',
-        color: 'danger',
-        className: 'outline-danger-strong bg-background focus:ring-danger-weak focus:outline-danger-intense focus:bg-danger-muted active:bg-danger-muted',
-      },
-      {
-        variant: 'ghost',
-        color: 'primary',
-        className: 'text-primary-strong hover:bg-primary-muted focus:ring-primary-weak focus:bg-primary/10 active:bg-primary/10',
-      },
-      {
-        variant: 'ghost',
-        color: 'secondary',
-        className: 'text-secondary-strong hover:bg-secondary-muted focus:ring-secondary-weak focus:bg-secondary/10 active:bg-secondary/10',
-      },
-      {
-        variant: 'ghost',
-        color: 'muted',
-        className: 'text-text-positive hover:bg-border-muted focus:ring-border-weak focus:bg-border/10 active:bg-border/10',
-      },
-      {
-        variant: 'ghost',
-        color: 'success',
-        className: 'text-success-strong hover:bg-success-muted focus:ring-success-weak focus:bg-success/10 active:bg-success/10',
-      },
-      {
-        variant: 'ghost',
-        color: 'important',
-        className: 'text-important-strong hover:bg-important-muted focus:ring-important-weak focus:bg-important/10 active:bg-important/10',
-      },
-      {
-        variant: 'ghost',
-        color: 'info',
-        className: 'text-info-strong hover:bg-info-muted focus:ring-info-weak focus:bg-info/10 active:bg-info/10',
-      },
-      {
-        variant: 'ghost',
-        color: 'warning',
-        className: 'text-warning-strong hover:bg-warning-muted focus:ring-warning-weak focus:bg-warning/10 active:bg-warning/10',
-      },
-      {
-        variant: 'ghost',
-        color: 'danger',
-        className: 'text-danger-strong hover:bg-danger-muted focus:ring-danger-weak focus:bg-danger/10 active:bg-danger/10',
-      },
-    ],
-  },
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  color,
-  asChild = false,
-  isLoading = false,
-  ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-    isLoading?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : 'button'
-
-  return (
-    <Comp data-slot="button" className={cn(buttonVariants({ variant, size, color, className }))} {...props}>
-      <div className={cn('flex size-full items-center justify-center gap-2 text-nowrap', isLoading && 'opacity-0')}>
-        <Slot.Slottable>{props.children}</Slot.Slottable>
-      </div>
-      {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <div className="loader-spinner text-muted-foreground" />
-        </div>
-      )}
-    </Comp>
-  )
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export { Button, buttonVariants }

package/packages/components/ui/buttons/add-new.tsx

@@ -1,19 +0,0 @@
-import { PlusIcon } from 'lucide-react'
-
-import { Paragraph } from '@/components/typography/paragraph'
-
-import { Button } from '../button'
-
-type Props = {
-  onClick?: () => void
-}
-export const AddNewBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {
-  return (
-    <Button aria-label="Tạo mới" variant="outline" className="aspect-square max-sm:p-0" onClick={onClick}>
-      <PlusIcon className="opacity-60 sm:-ms-1" size={16} aria-hidden="true" />
-      <Paragraph variant="sm" className="max-sm:sr-only">
-        Create New
-      </Paragraph>
-    </Button>
-  )
-}

package/packages/components/ui/buttons/edit.tsx

@@ -1,14 +0,0 @@
-import { Edit2Icon } from 'lucide-react'
-
-import { Button } from '../button'
-
-type Props = {
-  onClick?: () => void
-}
-export const EditBtn: React.FC<Props> = ({ onClick }) => {
-  return (
-    <Button aria-label="Chỉnh sửa" variant="ghost" size="icon" className="aspect-square max-sm:p-0" onClick={onClick}>
-      <Edit2Icon size={16} className="opacity-60" />
-    </Button>
-  )
-}

package/packages/components/ui/buttons/refresh.tsx

@@ -1,19 +0,0 @@
-import { RefreshCwIcon } from 'lucide-react'
-
-import { Paragraph } from '@/components/typography/paragraph'
-
-import { Button } from '../button'
-
-type Props = {
-  onClick?: () => void
-}
-export const RefreshBtn: React.FC<React.PropsWithChildren<Props>> = ({ onClick = () => {} }) => {
-  return (
-    <Button aria-label="Tạo mới" variant="outline" className="aspect-square max-sm:p-0" onClick={onClick}>
-      <RefreshCwIcon className="opacity-60 sm:-ms-1" size={16} aria-hidden="true" />
-      <Paragraph variant="sm" className="max-sm:sr-only">
-        Reset
-      </Paragraph>
-    </Button>
-  )
-}

package/packages/components/ui/buttons/trash.tsx

@@ -1,14 +0,0 @@
-import { Trash2Icon } from 'lucide-react'
-
-import { Button } from '../button'
-
-type Props = {
-  onClick?: () => void
-}
-export const TrashBtn: React.FC<Props> = ({ onClick }) => {
-  return (
-    <Button aria-label="Xoá" variant="ghost" size="icon" className="aspect-square max-sm:p-0" onClick={onClick}>
-      <Trash2Icon size={16} className="opacity-60" aria-hidden="true" />
-    </Button>
-  )
-}

package/packages/components/ui/buttons/upload-image.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import type { PropsWithChildren } from 'react'
-import { UploadIcon } from 'lucide-react'
-
-import { Button } from '../button'
-
-type Props = {
-  size?: number
-  onClick?: () => void
-}
-
-export const UploadImageBtn: React.FC<PropsWithChildren<Props>> = ({ size = '5rem', onClick }) => {
-  return (
-    <Button
-      style={{
-        width: size,
-        height: size,
-      }}
-      variant="outline"
-      onClick={onClick}
-    >
-      <UploadIcon className="size-6" />
-    </Button>
-  )
-}