@flaredev/cli 0.2.0 → 0.4.0

package/templates/app/components/dashboard/column-menu.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Columns3Icon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { hrefWith } from "./query";
+
+export interface ColumnOption {
+  key: string;
+  label: string;
+}
+
+/**
+ * Which columns the table shows. The choice goes in the URL (`?columns=name,email`)
+ * rather than into storage, so a view someone sends you looks the way it looked to them.
+ */
+export function ColumnMenu({ columns, visible }: { columns: ColumnOption[]; visible: string[] }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = new URLSearchParams(useSearchParams().toString());
+  const shown = new Set(visible);
+
+  const toggle = (key: string) => {
+    const next = new Set(shown);
+    if (!next.delete(key)) next.add(key);
+    // Nothing selected would leave a table of empty rows; keep at least one column.
+    if (next.size === 0) return;
+    const all = columns.every((column) => next.has(column.key));
+    router.push(hrefWith(pathname, params, { columns: all ? null : columns.filter((column) => next.has(column.key)).map((column) => column.key).join(",") }));
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" aria-label="Choose columns">
+          <Columns3Icon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-52">
+        <DropdownMenuLabel>Columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {columns.map((column) => (
+            <DropdownMenuCheckboxItem
+              key={column.key}
+              checked={shown.has(column.key)}
+              onCheckedChange={() => toggle(column.key)}
+              onSelect={(event) => event.preventDefault()}
+            >
+              {column.label}
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/templates/app/components/dashboard/dashboard-header.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { BellIcon, MoonIcon, SunIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Separator } from "@/components/ui/separator";
+import { SidebarTrigger } from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+import { UserAvatar, UserMenuItems, type DashboardUser } from "./user-menu";
+
+export type Theme = "light" | "dark" | "system";
+
+export interface Notice {
+  id: string;
+  title: string;
+  description?: string;
+  href?: string;
+  /** "warning" marks the bell, so it only pulls the eye when something needs doing. */
+  tone?: "info" | "warning";
+}
+
+/** Persist the choice for SSR (so the first paint matches) and apply it now. */
+function applyTheme(theme: Theme) {
+  document.cookie = `flare-theme=${theme}; path=/; max-age=31536000; samesite=lax`;
+  const root = document.documentElement;
+  root.classList.remove("light", "dark");
+  if (theme !== "system") root.classList.add(theme);
+}
+
+export function DashboardHeader({ user, initialTheme, notices = [] }: { user: DashboardUser; initialTheme: Theme; notices?: Notice[] }) {
+  const [theme, setTheme] = useState<Theme>(initialTheme);
+  const dark = theme === "dark" || (theme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  const needsAttention = notices.some((notice) => notice.tone === "warning");
+
+  return (
+    <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background px-4">
+      <SidebarTrigger />
+      <Separator orientation="vertical" className="mr-1 h-4" />
+
+      <div className="ml-auto flex items-center gap-1">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label={notices.length ? `Notifications (${notices.length})` : "Notifications"} className="relative">
+              <BellIcon />
+              {notices.length > 0 && (
+                <span
+                  aria-hidden="true"
+                  className={cn("absolute top-1.5 right-1.5 size-2 rounded-full ring-2 ring-background", needsAttention ? "bg-warning" : "bg-primary")}
+                />
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="w-80 p-0">
+            <div className="border-b px-4 py-3 text-sm font-medium">Notifications</div>
+            {notices.length === 0 ? (
+              <p className="px-4 py-6 text-center text-sm text-muted-foreground">Nothing needs you right now.</p>
+            ) : (
+              <ul className="max-h-80 overflow-y-auto">
+                {notices.map((notice) => {
+                  const body = (
+                    <>
+                      <span className="flex items-center gap-2 text-sm font-medium">
+                        <span className={cn("size-1.5 shrink-0 rounded-full", notice.tone === "warning" ? "bg-warning" : "bg-primary")} aria-hidden="true" />
+                        {notice.title}
+                      </span>
+                      {notice.description && <span className="block pl-3.5 text-xs text-muted-foreground">{notice.description}</span>}
+                    </>
+                  );
+                  return (
+                    <li key={notice.id} className="border-b last:border-b-0">
+                      {notice.href ? (
+                        <Link href={notice.href} className="block px-4 py-3 hover:bg-muted">
+                          {body}
+                        </Link>
+                      ) : (
+                        <div className="px-4 py-3">{body}</div>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </PopoverContent>
+        </Popover>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={dark ? "Switch to light theme" : "Switch to dark theme"}
+          onClick={() => {
+            const next: Theme = dark ? "light" : "dark";
+            setTheme(next);
+            applyTheme(next);
+          }}
+        >
+          {dark ? <SunIcon /> : <MoonIcon />}
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" aria-label="Account" className="rounded-full">
+              <UserAvatar user={user} className="size-7" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-60">
+            <UserMenuItems user={user} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}

package/templates/app/components/dashboard/dashboard-sidebar.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import { ActivityIcon, LayoutDashboardIcon, UserCircleIcon } from "lucide-react";
+import { ChevronsUpDownIcon } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/components/ui/sidebar";
+import { resourceIcon } from "./resource-icon";
+import { UserAvatar, UserMenuItems, type DashboardUser } from "./user-menu";
+
+export interface NavResource {
+  name: string;
+  pluralLabel: string;
+  slug: string;
+  icon?: string;
+  /** Heading it sits under, from the descriptor's `group`. */
+  group?: string;
+  /** Optional count badge (off by default). */
+  badge?: number;
+  /** This person's saved views of the resource, as "?q=…&filter[…]=…". */
+  views?: { id: string; name: string; query: string }[];
+}
+
+/** Resources in the order given, under their headings; ungrouped ones come first. */
+function byGroup(resources: NavResource[]): [string, NavResource[]][] {
+  const groups = new Map<string, NavResource[]>();
+  for (const resource of resources) {
+    const heading = resource.group?.trim() || "Resources";
+    const existing = groups.get(heading);
+    if (existing) existing.push(resource);
+    else groups.set(heading, [resource]);
+  }
+  return [...groups];
+}
+
+/**
+ * Sidebar navigation, one item per registered resource. The icon comes from the
+ * descriptor's `icon`, the label from its plural label, and the active item from the
+ * current path.
+ */
+/** Sections every dashboard has, whatever resources the app defines. */
+const ACCOUNT_LINKS = [{ href: "/dashboard/account", label: "Account", icon: UserCircleIcon }];
+// Security has its own page once `flare gen security` runs, which adds its link to
+// lib/dashboard-nav.ts; observability ships with every app.
+const ADMIN_LINKS = [{ href: "/dashboard/observability", label: "Observability", icon: ActivityIcon }];
+
+export function DashboardSidebar({
+  appName,
+  resources,
+  links = [],
+  isAdmin = false,
+  user,
+}: {
+  appName: string;
+  resources: NavResource[];
+  /** Extra pages (see lib/dashboard-nav.ts), shown under "Platform". */
+  links?: Array<{ label: string; href: string; icon: string }>;
+  /** Whether to show the sections that manage the app itself. */
+  isAdmin?: boolean;
+  user: DashboardUser;
+}) {
+  const pathname = usePathname();
+  // A saved view is the query it was saved with, so the one you're on is the one that matches.
+  const search = useSearchParams().toString();
+  const manage = [...ACCOUNT_LINKS, ...(isAdmin ? ADMIN_LINKS : [])];
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton asChild size="lg" tooltip={appName}>
+              <Link href="/dashboard">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
+                  <LayoutDashboardIcon className="size-4" />
+                </div>
+                <span className="truncate font-semibold">{appName}</span>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname === "/dashboard"} tooltip="Overview">
+                  <Link href="/dashboard">
+                    <LayoutDashboardIcon />
+                    <span>Overview</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {byGroup(resources).map(([heading, group]) => (
+          <SidebarGroup key={heading}>
+            <SidebarGroupLabel>{heading}</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {group.map((resource) => {
+                  const href = `/dashboard/${resource.slug}`;
+                  const Icon = resourceIcon(resource.icon);
+                  return (
+                    <SidebarMenuItem key={resource.name}>
+                      <SidebarMenuButton asChild isActive={pathname === href || pathname.startsWith(`${href}/`)} tooltip={resource.pluralLabel}>
+                        <Link href={href}>
+                          <Icon />
+                          <span>{resource.pluralLabel}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                      {resource.views && resource.views.length > 0 && (
+                        <SidebarMenuSub>
+                          {resource.views.map((view) => (
+                            <SidebarMenuSubItem key={view.id}>
+                              <SidebarMenuSubButton asChild isActive={pathname === href && search === view.query}>
+                                <Link href={`${href}?${view.query}`}>
+                                  <span>{view.name}</span>
+                                </Link>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      )}
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+
+        <SidebarGroup>
+          <SidebarGroupLabel>Manage</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {manage.map((link) => (
+                <SidebarMenuItem key={link.href}>
+                  <SidebarMenuButton asChild isActive={pathname === link.href || pathname.startsWith(`${link.href}/`)} tooltip={link.label}>
+                    <Link href={link.href}>
+                      <link.icon />
+                      <span>{link.label}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {links.length > 0 && (
+          <SidebarGroup>
+            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {links.map((link) => {
+                  const Icon = resourceIcon(link.icon);
+                  // Route handlers (/api/...) and other sites are whole pages: open them in a new tab.
+                  const external = link.href.startsWith("/api/") || /^https?:\/\//.test(link.href);
+                  const content = (
+                    <>
+                      <Icon />
+                      <span>{link.label}</span>
+                    </>
+                  );
+                  return (
+                    <SidebarMenuItem key={link.href}>
+                      <SidebarMenuButton asChild isActive={pathname === link.href || pathname.startsWith(`${link.href}/`)} tooltip={link.label}>
+                        {external ? (
+                          <a href={link.href} target="_blank" rel="noreferrer">
+                            {content}
+                          </a>
+                        ) : (
+                          <Link href={link.href}>{content}</Link>
+                        )}
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        )}
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton size="lg" tooltip={user.email}>
+                  <UserAvatar user={user} className="size-8 rounded-md" />
+                  <span className="grid min-w-0 flex-1 text-left leading-tight">
+                    <span className="truncate text-sm font-medium">{user.name || "Signed in"}</span>
+                    <span className="truncate text-xs text-muted-foreground">{user.email}</span>
+                  </span>
+                  <ChevronsUpDownIcon className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent side="top" align="start" className="w-60">
+                <UserMenuItems user={user} />
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/templates/app/components/dashboard/dropzone.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useRef, useState, type DragEvent } from "react";
+import { UploadCloudIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  /** Called with the files that were dropped or picked. */
+  onFiles: (files: File[]) => void;
+  /** `accept` for the hidden input, e.g. ".csv,text/csv" or "image/*". */
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** The line under the heading: what this one takes. */
+  hint?: string;
+  label?: string;
+  className?: string;
+  /** Shown inside the zone instead of the prompt, e.g. a preview or a progress bar. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Drop a file, or click to pick one.
+ *
+ * The input stays in the markup and keeps doing the work — it's what makes the keyboard,
+ * screen readers and the file picker behave — while the drop target is the label around
+ * it. Dragging over the page doesn't open the browser's own download of the file because
+ * both dragover and drop are cancelled here.
+ */
+export function Dropzone({ onFiles, accept, multiple = false, disabled, hint, label = "Drop a file here", className, children }: Props) {
+  const input = useRef<HTMLInputElement>(null);
+  const [over, setOver] = useState(false);
+
+  const take = (list: FileList | null) => {
+    const files = [...(list ?? [])];
+    if (files.length > 0) onFiles(multiple ? files : files.slice(0, 1));
+  };
+
+  const stop = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  return (
+    <label
+      onDragOver={(event) => {
+        stop(event);
+        if (!disabled) setOver(true);
+      }}
+      onDragLeave={(event) => {
+        stop(event);
+        setOver(false);
+      }}
+      onDrop={(event) => {
+        stop(event);
+        setOver(false);
+        if (!disabled) take(event.dataTransfer.files);
+      }}
+      className={cn(
+        "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors",
+        over ? "border-primary bg-primary/5" : "border-border hover:border-primary/50 hover:bg-muted/50",
+        disabled && "pointer-events-none opacity-60",
+        className,
+      )}
+    >
+      <input
+        ref={input}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="sr-only"
+        onChange={(event) => {
+          take(event.target.files);
+          // Picking the same file twice in a row should still fire a change.
+          event.target.value = "";
+        }}
+      />
+      {children ?? (
+        <>
+          <span className="grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
+            <UploadCloudIcon className="size-5" />
+          </span>
+          <span className="text-sm font-medium">
+            {label} <span className="text-muted-foreground">or click to choose</span>
+          </span>
+          {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
+        </>
+      )}
+    </label>
+  );
+}

package/templates/app/components/dashboard/editable.ts

@@ -0,0 +1,12 @@
+import type { StoredField } from "@flaredev/core";
+
+/**
+ * Kinds worth editing in place: one control, one value, no picker or upload.
+ *
+ * Kept out of inline-cell.tsx because that file is a client component, and a server
+ * component can't call a function exported from one.
+ */
+export function isInlineEditable(def: StoredField): boolean {
+  if (def.kind === "string") return !def.format;
+  return ["int", "float", "boolean", "enum"].includes(def.kind);
+}

package/templates/app/components/dashboard/export-button.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useTransition } from "react";
+import { useSearchParams } from "next/navigation";
+import { DownloadIcon } from "lucide-react";
+import { toast } from "sonner";
+import { exportRecordsAction } from "@/app/dashboard/actions";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { downloadCsv } from "./table-selection";
+
+/**
+ * Exports what the table is showing — the same search, filters and sort, not just the
+ * page on screen. The server builds the CSV because the browser only ever holds one page.
+ */
+export function ExportButton({ resourceName, pluralLabel }: { resourceName: string; pluralLabel: string }) {
+  const params = useSearchParams();
+  const [pending, startTransition] = useTransition();
+
+  const run = () =>
+    startTransition(async () => {
+      const query = new URLSearchParams(params.toString());
+      query.delete("page");
+      const result = await exportRecordsAction(resourceName, query.toString());
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      const { csv, rows, truncated } = result.data;
+      downloadCsv(`${resourceName.toLowerCase()}-${new Date().toISOString().slice(0, 10)}.csv`, csv);
+      if (truncated) toast.warning(`Exported the first ${rows.toLocaleString()} ${pluralLabel.toLowerCase()}. Filter down for the rest.`);
+      else toast.success(`Exported ${rows.toLocaleString()} ${pluralLabel.toLowerCase()}.`);
+    });
+
+  return (
+    <Button variant="outline" onClick={run} disabled={pending}>
+      {pending ? <Spinner data-icon="inline-start" /> : <DownloadIcon data-icon="inline-start" />}
+      Export
+    </Button>
+  );
+}

package/templates/app/components/{admin → dashboard}/fields/file-field.tsx

@@ -11,7 +11,7 @@ import {
   sniffMatches,
   type FileField as FileFieldDef,
 } from "@flaredev/core";
-import { createReadUrlAction, createUploadUrlAction } from "@/app/admin/actions";
+import { createReadUrlAction, createUploadUrlAction } from "@/app/dashboard/actions";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
 import { cn } from "@/lib/utils";
@@ -185,12 +185,12 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
   };
 
   const thumbnail = (
-    <div className="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-muted">
+    <div className="flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-muted">
       {preview ? (
         // eslint-disable-next-line @next/next/no-img-element -- signed, short-lived URL
-        <img src={preview} alt="" width={40} height={40} className="size-full object-cover" />
+        <img src={preview} alt="" width={64} height={64} className="size-full object-cover" />
       ) : (
-        <FileIcon aria-hidden="true" className="size-5 text-muted-foreground" />
+        <FileIcon aria-hidden="true" className="size-6 text-muted-foreground" />
       )}
     </div>
   );
@@ -220,7 +220,7 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
             <div className="flex items-baseline justify-between gap-2 text-sm">
               <span className="truncate font-medium">{upload.name}</span>
               <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
-                {formatBytes(upload.loaded)} of {formatBytes(upload.total)}
+                {percent}% · {formatBytes(upload.loaded)} of {formatBytes(upload.total)}
               </span>
             </div>
             <Progress value={percent} aria-label={`Uploading ${upload.name}`} />
@@ -270,21 +270,25 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
           aria-describedby={`${instructionId} ${helpId}`}
           aria-invalid={invalid || Boolean(error) || undefined}
           className={cn(
-            "flex w-full items-center gap-3 rounded-lg border border-dashed p-3 text-left transition-colors outline-none motion-reduce:transition-none",
-            "hover:bg-muted focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
-            dragging ? "border-primary bg-muted" : (invalid || error) && "border-destructive",
+            "flex w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors outline-none motion-reduce:transition-none",
+            "hover:border-primary/50 hover:bg-muted/50 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
+            dragging ? "border-primary bg-primary/5" : (invalid || error) && "border-destructive",
           )}
         >
-          <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted">
-            <UploadIcon aria-hidden="true" className="size-5 text-muted-foreground" />
-          </div>
-          <span className="flex flex-col">
-            <span id={instructionId} className="text-sm font-medium">
-              {dragging ? "Drop to upload" : "Choose a file or drop it here"}
-            </span>
-            <span id={helpId} className="text-xs text-muted-foreground">
-              {help}
-            </span>
+          <span className="grid size-10 place-items-center rounded-full bg-muted text-muted-foreground">
+            <UploadIcon aria-hidden="true" className="size-5" />
+          </span>
+          <span id={instructionId} className="text-sm font-medium">
+            {dragging ? (
+              "Drop to upload"
+            ) : (
+              <>
+                Drop a file here <span className="text-muted-foreground">or click to choose</span>
+              </>
+            )}
+          </span>
+          <span id={helpId} className="text-xs text-muted-foreground">
+            {help}
           </span>
         </button>
       )}