@olwiba/ui 0.1.13 → 0.1.15

package/src/app/TeamMembersPanel.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import * as React from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { MoreHorizontal, UserPlus } from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Dialog,
+} from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
+import { DataTable } from '../components/DataTable';
+
+export interface TeamMemberRecord {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+  role: string;
+}
+
+export interface TeamMembersPanelProps {
+  members: TeamMemberRecord[];
+  /** Roles offered in the invite dialog and the per-row role menu. @default ['Owner', 'Admin', 'Member'] */
+  roles?: string[];
+  onInvite?: (email: string, role: string) => void;
+  onRoleChange?: (memberId: string, role: string) => void;
+  onRemove?: (memberId: string) => void;
+  title?: string;
+  description?: string;
+}
+
+function InviteDialog({ roles, onInvite }: { roles: string[]; onInvite?: (email: string, role: string) => void }) {
+  const [email, setEmail] = React.useState('');
+  const [role, setRole] = React.useState(roles[roles.length - 1] ?? roles[0]);
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Invite a team member</DialogTitle>
+        <DialogDescription>They&rsquo;ll get an email invite to join this workspace.</DialogDescription>
+      </DialogHeader>
+      <div className="space-y-4 py-2">
+        <div className="space-y-2">
+          <Label htmlFor="invite-email">Email address</Label>
+          <Input id="invite-email" type="email" placeholder="name@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label>Role</Label>
+          <Select value={role} onValueChange={setRole}>
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {roles.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <DialogFooter>
+        <DialogClose asChild>
+          <Button variant="outline">Cancel</Button>
+        </DialogClose>
+        <DialogClose asChild>
+          <Button disabled={!email} onClick={() => onInvite?.(email, role)}>Send invite</Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
+
+/**
+ * Member list with role management and an invite dialog. One block for
+ * team/org administration — built on `DataTable` rather than a bespoke list.
+ */
+export function TeamMembersPanel({
+  members,
+  roles = ['Owner', 'Admin', 'Member'],
+  onInvite,
+  onRoleChange,
+  onRemove,
+  title = 'Team members',
+  description = 'Manage who has access to this workspace.',
+}: TeamMembersPanelProps) {
+  const columns = React.useMemo<ColumnDef<TeamMemberRecord>[]>(() => [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => (
+        <div className="flex items-center gap-3">
+          <Avatar className="size-8">
+            <AvatarImage src={row.original.avatar} alt="" />
+            <AvatarFallback>{row.original.name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="text-sm font-medium leading-none">{row.original.name}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{row.original.email}</p>
+          </div>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'role',
+      header: 'Role',
+      cell: ({ row }) =>
+        onRoleChange ? (
+          <Select value={row.original.role} onValueChange={(value) => onRoleChange(row.original.id, value)}>
+            <SelectTrigger className="h-8 w-32"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {roles.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
+            </SelectContent>
+          </Select>
+        ) : (
+          <Badge variant="secondary">{row.original.role}</Badge>
+        ),
+    },
+    {
+      id: 'actions',
+      header: '',
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-8">
+              <MoreHorizontal className="size-4" />
+              <span className="sr-only">Row actions</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem className="text-destructive" onClick={() => onRemove?.(row.original.id)}>
+              Remove member
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+      enableSorting: false,
+    },
+  ], [roles, onRoleChange, onRemove]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h2 className="text-base font-semibold">{title}</h2>
+          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+        </div>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button><UserPlus className="size-4" /> Invite member</Button>
+          </DialogTrigger>
+          <InviteDialog roles={roles} onInvite={onInvite} />
+        </Dialog>
+      </div>
+      <DataTable columns={columns} data={members} searchKey="name" searchPlaceholder="Search members…" pageSize={0} />
+    </div>
+  );
+}

package/src/components/CommandMenu.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from '@olwiba/cn';
+import { RegisterHotkeys } from './RegisterHotkeys';
+import { useControlledOpen } from '../hooks/use-controlled-open';
+
+export interface CommandMenuItem {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+  shortcut?: string;
+  keywords?: string[];
+  onSelect: () => void;
+}
+
+export interface CommandMenuGroup {
+  heading: string;
+  items: CommandMenuItem[];
+}
+
+export interface CommandMenuProps {
+  groups: CommandMenuGroup[];
+  placeholder?: string;
+  emptyMessage?: string;
+  /** Controlled open state — omit to let the component manage it internally. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Registers Cmd+K (mac) / Ctrl+K (win) to toggle the palette. @default true */
+  hotkey?: boolean;
+}
+
+/**
+ * Global search / Cmd+K command palette. One component — pass different
+ * `groups` per surface rather than building a bespoke dialog each time.
+ */
+export function CommandMenu({
+  groups,
+  placeholder = 'Type a command or search…',
+  emptyMessage = 'No results found.',
+  open: openProp,
+  onOpenChange,
+  hotkey = true,
+}: CommandMenuProps) {
+  const internal = useControlledOpen(false);
+  const isOpen = openProp ?? internal.isOpen;
+  const setOpen = onOpenChange ?? internal.setIsOpen;
+
+  const runItem = (item: CommandMenuItem) => {
+    setOpen(false);
+    item.onSelect();
+  };
+
+  return (
+    <>
+      {hotkey && (
+        <RegisterHotkeys
+          hotkeys={[
+            { key: 'k', meta: true, handler: () => setOpen(!isOpen) },
+            { key: 'k', ctrl: true, handler: () => setOpen(!isOpen) },
+          ]}
+        />
+      )}
+      <CommandDialog open={isOpen} onOpenChange={setOpen}>
+        <CommandInput placeholder={placeholder} />
+        <CommandList>
+          <CommandEmpty>{emptyMessage}</CommandEmpty>
+          {groups.map((group, i) => (
+            <React.Fragment key={group.heading}>
+              {i > 0 && <CommandSeparator />}
+              <CommandGroup heading={group.heading}>
+                {group.items.map((item) => (
+                  <CommandItem
+                    key={item.id}
+                    value={[item.label, ...(item.keywords ?? [])].join(' ')}
+                    onSelect={() => runItem(item)}
+                  >
+                    {item.icon && <item.icon />}
+                    <span>{item.label}</span>
+                    {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </React.Fragment>
+          ))}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

package/src/components/DataTable.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import * as React from 'react';
+import {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Search } from 'lucide-react';
+import { Checkbox, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
+
+export interface DataTableProps<TData> {
+  columns: ColumnDef<TData>[];
+  data: TData[];
+  /** Shows a quick-filter input above the table, matching against `searchKey`. */
+  searchKey?: string;
+  searchPlaceholder?: string;
+  /** Adds a checkbox column and reports the selected rows. */
+  selectable?: boolean;
+  onSelectionChange?: (rows: TData[]) => void;
+  /** Rows per page. Set to `0` to disable pagination entirely. @default 10 */
+  pageSize?: number;
+  /** Slot rendered top-right of the toolbar — e.g. an "Add" button. */
+  toolbar?: React.ReactNode;
+  onRowClick?: (row: TData) => void;
+  emptyMessage?: string;
+  className?: string;
+}
+
+const selectColumn: ColumnDef<Record<string, unknown>> = {
+  id: '__select',
+  header: ({ table }) => (
+    <Checkbox
+      checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+      aria-label="Select all"
+    />
+  ),
+  cell: ({ row }) => (
+    <Checkbox
+      checked={row.getIsSelected()}
+      onCheckedChange={(value) => row.toggleSelected(!!value)}
+      onClick={(e) => e.stopPropagation()}
+      aria-label="Select row"
+    />
+  ),
+  enableSorting: false,
+};
+
+/**
+ * Sortable, paginated, optionally-selectable data table. One component —
+ * toggle `searchKey`/`selectable`/`pageSize` rather than reaching for a
+ * different table component per use case.
+ */
+export function DataTable<TData>({
+  columns,
+  data,
+  searchKey,
+  searchPlaceholder = 'Search…',
+  selectable = false,
+  onSelectionChange,
+  pageSize = 10,
+  toolbar,
+  onRowClick,
+  emptyMessage = 'No results.',
+  className,
+}: DataTableProps<TData>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [globalFilter, setGlobalFilter] = React.useState('');
+
+  const allColumns = React.useMemo(
+    () => (selectable ? [selectColumn as ColumnDef<TData>, ...columns] : columns),
+    [selectable, columns],
+  );
+
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    state: { sorting, rowSelection, globalFilter },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: (row, _columnId, filterValue) => {
+      if (!searchKey) return true;
+      const value = row.getValue(searchKey);
+      return String(value ?? '').toLowerCase().includes(String(filterValue).toLowerCase());
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...(pageSize > 0 ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+    initialState: pageSize > 0 ? { pagination: { pageSize } } : undefined,
+    enableRowSelection: selectable,
+  });
+
+  React.useEffect(() => {
+    if (!onSelectionChange) return;
+    onSelectionChange(table.getSelectedRowModel().rows.map((r) => r.original));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowSelection]);
+
+  const rows = table.getRowModel().rows;
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {(searchKey || toolbar) && (
+        <div className="flex items-center justify-between gap-4">
+          {searchKey ? (
+            <div className="relative max-w-sm flex-1">
+              <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={globalFilter}
+                onChange={(e) => setGlobalFilter(e.target.value)}
+                placeholder={searchPlaceholder}
+                className="pl-8"
+              />
+            </div>
+          ) : <div />}
+          {toolbar}
+        </div>
+      )}
+
+      <div className="overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const canSort = header.column.getCanSort();
+                  const sortDir = header.column.getIsSorted();
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : canSort ? (
+                        <button
+                          type="button"
+                          className="flex items-center gap-1.5 font-medium hover:text-foreground"
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                          {sortDir === 'asc' ? <ArrowUp className="size-3.5" /> : sortDir === 'desc' ? <ArrowDown className="size-3.5" /> : <ArrowUpDown className="size-3.5 text-muted-foreground/50" />}
+                        </button>
+                      ) : (
+                        flexRender(header.column.columnDef.header, header.getContext())
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {rows.length ? (
+              rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() ? 'selected' : undefined}
+                  onClick={() => onRowClick?.(row.original)}
+                  className={cn(onRowClick && 'cursor-pointer')}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={allColumns.length} className="h-24 text-center text-muted-foreground">
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {pageSize > 0 && table.getPageCount() > 1 && (
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-muted-foreground">
+            {selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected · `}
+            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          </p>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+              <ChevronLeft className="size-4" /> Previous
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+              Next <ChevronRight className="size-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type { ColumnDef as DataTableColumn };

package/src/components/FileUpload.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import * as React from 'react';
+import { AlertCircle, CheckCircle2, File as FileIcon, Loader2, UploadCloud, X } from 'lucide-react';
+import { cn } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+
+export interface FileUploadEntry {
+  id: string;
+  file: File;
+  /** 0–100. Omit while pending, or when not tracking progress. */
+  progress?: number;
+  status?: 'pending' | 'uploading' | 'done' | 'error';
+  error?: string;
+}
+
+export interface FileUploadProps {
+  /** Comma-separated MIME types / extensions, e.g. `"image/png,image/jpeg"`. */
+  accept?: string;
+  multiple?: boolean;
+  maxSizeMb?: number;
+  maxFiles?: number;
+  /** Controlled file list — pass this (with `onFilesChange`) to drive upload progress from your own network layer. */
+  files?: FileUploadEntry[];
+  /** Uncontrolled default list. */
+  defaultFiles?: FileUploadEntry[];
+  onFilesChange?: (files: FileUploadEntry[]) => void;
+  /** Fired with the raw, already-validated `File` objects a user just added. */
+  onFilesAdded?: (files: File[]) => void;
+  disabled?: boolean;
+  /** Helper text under the drop zone, e.g. "PNG or JPG, up to 5MB". */
+  hint?: string;
+  className?: string;
+}
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function makeId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+/**
+ * Drag-and-drop file picker with a validated queue list. One component —
+ * toggle `multiple`/`accept`/`maxSizeMb`/`maxFiles` rather than reaching for
+ * a separate dropzone per use case. Progress/status is presentation-only;
+ * wire `files`/`onFilesChange` to your own upload layer to drive it.
+ */
+export function FileUpload({
+  accept,
+  multiple = false,
+  maxSizeMb,
+  maxFiles,
+  files: filesProp,
+  defaultFiles,
+  onFilesChange,
+  onFilesAdded,
+  disabled,
+  hint,
+  className,
+}: FileUploadProps) {
+  const [internalFiles, setInternalFiles] = React.useState<FileUploadEntry[]>(defaultFiles ?? []);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [validationError, setValidationError] = React.useState<string | null>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const files = filesProp ?? internalFiles;
+
+  const setFiles = React.useCallback(
+    (next: FileUploadEntry[]) => {
+      if (!filesProp) setInternalFiles(next);
+      onFilesChange?.(next);
+    },
+    [filesProp, onFilesChange],
+  );
+
+  const acceptList = React.useMemo(
+    () => accept?.split(',').map((a) => a.trim().toLowerCase()).filter(Boolean) ?? [],
+    [accept],
+  );
+
+  const matchesAccept = (file: File) => {
+    if (!acceptList.length) return true;
+    const name = file.name.toLowerCase();
+    return acceptList.some((pattern) =>
+      pattern.startsWith('.') ? name.endsWith(pattern) : file.type === pattern || file.type.startsWith(pattern.replace('/*', '/')),
+    );
+  };
+
+  const handleFiles = (fileList: FileList | null) => {
+    if (!fileList || disabled) return;
+    const incoming = Array.from(fileList);
+    const room = maxFiles ? Math.max(0, maxFiles - files.length) : Infinity;
+    if (maxFiles && room <= 0) {
+      setValidationError(`You can only add up to ${maxFiles} file${maxFiles === 1 ? '' : 's'}.`);
+      return;
+    }
+
+    const accepted: File[] = [];
+    let rejected = false;
+    for (const file of incoming.slice(0, room)) {
+      if (!matchesAccept(file)) { rejected = true; continue; }
+      if (maxSizeMb && file.size > maxSizeMb * 1024 * 1024) { rejected = true; continue; }
+      accepted.push(file);
+    }
+
+    setValidationError(rejected ? `Some files were skipped — check the file type and size limit.` : null);
+    if (!accepted.length) return;
+
+    const entries: FileUploadEntry[] = accepted.map((file) => ({ id: makeId(), file, status: 'pending' }));
+    setFiles(multiple ? [...files, ...entries] : entries);
+    onFilesAdded?.(accepted);
+  };
+
+  const removeFile = (id: string) => {
+    setFiles(files.filter((f) => f.id !== id));
+  };
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        onClick={() => !disabled && inputRef.current?.click()}
+        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click(); }}
+        onDragOver={(e) => { e.preventDefault(); if (!disabled) setIsDragging(true); }}
+        onDragLeave={() => setIsDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setIsDragging(false);
+          handleFiles(e.dataTransfer.files);
+        }}
+        className={cn(
+          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors',
+          isDragging ? 'border-primary bg-primary/5' : 'border-border hover:border-foreground/30',
+          disabled && 'pointer-events-none opacity-50',
+        )}
+      >
+        <UploadCloud className="size-8 text-muted-foreground" />
+        <p className="text-sm font-medium">
+          <span className="text-primary underline underline-offset-4">Click to upload</span> or drag and drop
+        </p>
+        {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          className="sr-only"
+          onChange={(e) => { handleFiles(e.target.files); e.target.value = ''; }}
+        />
+      </div>
+
+      {validationError && <p className="text-sm font-medium text-destructive">{validationError}</p>}
+
+      {files.length > 0 && (
+        <ul className="space-y-2">
+          {files.map(({ id, file, progress, status = 'pending', error }) => (
+            <li key={id} className="flex items-center gap-3 rounded-lg border bg-card/60 px-3 py-2.5">
+              <FileIcon className="size-5 shrink-0 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate text-sm font-medium">{file.name}</p>
+                  <span className="shrink-0 text-xs text-muted-foreground">{formatBytes(file.size)}</span>
+                </div>
+                {status === 'uploading' && (
+                  <div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted">
+                    <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${progress ?? 0}%` }} />
+                  </div>
+                )}
+                {status === 'error' && error && <p className="mt-1 text-xs text-destructive">{error}</p>}
+              </div>
+              {status === 'uploading' && <Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" />}
+              {status === 'done' && <CheckCircle2 className="size-4 shrink-0 text-primary" />}
+              {status === 'error' && <AlertCircle className="size-4 shrink-0 text-destructive" />}
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-7 shrink-0"
+                onClick={() => removeFile(id)}
+              >
+                <X className="size-3.5" />
+                <span className="sr-only">Remove {file.name}</span>
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}