@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/nextjs/variants/base/src/auth.ts

@@ -0,0 +1,105 @@
+import NextAuth, { CredentialsSignin, type NextAuthConfig } from "next-auth";
+import Credentials from "next-auth/providers/credentials";
+import { AuthClient } from "@simple-auth-kit/auth-client";
+import { AUTH_API_INTERNAL_URL } from "@/lib/env";
+import { serverCookieTokenStorage } from "@/lib/server-token-storage";
+
+declare module "next-auth" {
+  interface User {
+    expired_at?: number;
+  }
+  interface Session {
+    user: {
+      id: string;
+      email: string;
+      name?: string | null;
+      image?: string | null;
+      expired_at?: number;
+    };
+  }
+}
+
+/**
+ * Thrown from authorize() when the account has 2FA enabled: the challenge token rides out to the
+ * login form in the error code so the second signIn() call can complete it.
+ */
+export class TwoFactorRequiredError extends CredentialsSignin {
+  constructor(challengeToken: string) {
+    super();
+    this.code = `2fa_required:${challengeToken}`;
+  }
+}
+
+// Server-side AuthClient sharing the browser client's cookie (name + JSON shape), so a login
+// completed here is immediately visible to every existing client-side call site.
+const serverAuthClient = new AuthClient({
+  baseUrl: AUTH_API_INTERNAL_URL,
+  storage: serverCookieTokenStorage,
+});
+
+const SESSION_MAX_AGE_SECONDS = 60 * 60 * 24 * 30;
+
+export const authConfig = {
+  secret: process.env.AUTH_SECRET,
+  // Self-hosted deployment — the app serves whatever host it's bound to (localhost, docker
+  // service name, LAN IP); there's no fixed AUTH_URL to pin, so trust the incoming Host header.
+  trustHost: true,
+  session: {
+    strategy: "jwt",
+    maxAge: SESSION_MAX_AGE_SECONDS,
+  },
+  pages: {
+    signIn: "/login",
+    signOut: "/login",
+    error: "/login",
+  },
+  providers: [
+    Credentials({
+      name: "Credentials",
+      credentials: {
+        identifier: {},
+        password: {},
+        challengeToken: {},
+        code: {},
+      },
+      async authorize(credentials) {
+        const { identifier, password, challengeToken, code } = credentials as Partial<
+          Record<"identifier" | "password" | "challengeToken" | "code", string>
+        >;
+
+        if (challengeToken && code) {
+          await serverAuthClient.loginTwoFactor({ challengeToken, code });
+        } else {
+          if (!identifier || !password) return null;
+          const result = await serverAuthClient.login({ identifier, password });
+          if ("twoFactorRequired" in result) throw new TwoFactorRequiredError(result.challengeToken);
+        }
+
+        const me = await serverAuthClient.me();
+        return {
+          id: me.sub,
+          email: me.email,
+          name: me.displayName ?? ([me.firstName, me.lastName].filter(Boolean).join(" ") || me.username),
+          image: me.photo,
+          expired_at: Date.now() + SESSION_MAX_AGE_SECONDS * 1000,
+        };
+      },
+    }),
+  ],
+  callbacks: {
+    jwt({ token, user }) {
+      if (user) token.expired_at = user.expired_at;
+      if (typeof token.expired_at === "number" && Date.now() >= token.expired_at) return null;
+      return token;
+    },
+    session({ session, token }) {
+      if (session.user && token.sub) {
+        session.user.id = token.sub;
+        session.user.expired_at = token.expired_at as number | undefined;
+      }
+      return session;
+    },
+  },
+} satisfies NextAuthConfig;
+
+export const { handlers, auth, signIn, signOut } = NextAuth(authConfig);

package/registry/admin-apps/nextjs/variants/base/src/components/app-sidebar.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useAbility } from "@casl/react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronRightIcon, GlobeIcon, LanguagesIcon, LayoutDashboardIcon, ScrollTextIcon, ShieldCheckIcon, UserPlusIcon, UsersIcon, UsersRoundIcon } from "lucide-react";
+import { NavUser } from "@/components/nav-user";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+import { PERMISSIONS, ROLES_SCREEN_PERMISSIONS, hasAnyPermission, type AppAbility, type PermissionKey } from "@/lib/ability";
+
+type NavLink = {
+  href: string;
+  label: string;
+  icon: typeof UsersIcon;
+  requires?: readonly PermissionKey[];
+  children?: Array<{ href: string; label: string; requires?: readonly PermissionKey[] }>;
+};
+
+const LINKS: NavLink[] = [
+  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboardIcon },
+  {
+    href: "/users",
+    label: "Users",
+    icon: UsersIcon,
+    requires: [PERMISSIONS.usersRead],
+    children: [
+      { href: "/users", label: "All users", requires: [PERMISSIONS.usersRead] },
+      { href: "/users/new", label: "Add user", requires: [PERMISSIONS.usersManage] },
+    ],
+  },
+  {
+    href: "/customers",
+    label: "Customers",
+    icon: UsersRoundIcon,
+    requires: [PERMISSIONS.customersRead],
+    children: [
+      { href: "/customers", label: "All customers", requires: [PERMISSIONS.customersRead] },
+      { href: "/customers/new", label: "Add customer", requires: [PERMISSIONS.customersManage] },
+    ],
+  },
+  {
+    href: "/countries",
+    label: "Countries",
+    icon: GlobeIcon,
+    requires: [PERMISSIONS.countriesRead],
+    children: [
+      { href: "/countries", label: "All countries", requires: [PERMISSIONS.countriesRead] },
+      { href: "/countries/new", label: "Add country", requires: [PERMISSIONS.countriesManage] },
+    ],
+  },
+  {
+    href: "/languages",
+    label: "Languages",
+    icon: LanguagesIcon,
+    requires: [PERMISSIONS.languagesRead],
+    children: [
+      { href: "/languages", label: "All languages", requires: [PERMISSIONS.languagesRead] },
+      { href: "/languages/new", label: "Add language", requires: [PERMISSIONS.languagesManage] },
+    ],
+  },
+  {
+    href: "/roles",
+    label: "Roles & permissions",
+    icon: ShieldCheckIcon,
+    requires: ROLES_SCREEN_PERMISSIONS,
+    children: [
+      { href: "/roles", label: "All roles", requires: ROLES_SCREEN_PERMISSIONS },
+      { href: "/roles/new", label: "Add role", requires: [PERMISSIONS.rolesManage] },
+    ],
+  },
+  {
+    href: "/permissions",
+    label: "Permissions",
+    icon: ShieldCheckIcon,
+    requires: [PERMISSIONS.permissionsRead],
+    children: [
+      { href: "/permissions", label: "All permissions", requires: [PERMISSIONS.permissionsRead] },
+      { href: "/permissions/new", label: "Add permission", requires: [PERMISSIONS.permissionsDefine] },
+    ],
+  },
+  { href: "/audit-log", label: "Audit log", icon: ScrollTextIcon, requires: [PERMISSIONS.auditLogRead] },
+];
+
+export const AppSidebar = observer(function AppSidebar() {
+  const ability = useAbility<AppAbility>();
+  const pathname = usePathname();
+
+  const links = LINKS.filter((link) => !link.requires || hasAnyPermission(ability, link.requires))
+    .map((link) => ({ ...link, children: link.children?.filter((child) => !child.requires || hasAnyPermission(ability, child.requires)) }))
+    // A parent with every child hidden by permissions collapses to a plain link.
+    .map((link) => (link.children && link.children.length <= 1 ? { ...link, children: undefined } : link));
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" asChild>
+              <Link href="/dashboard">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                  <ShieldCheckIcon className="size-4" />
+                </div>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">simple-auth-kit</span>
+                  <span className="truncate text-xs text-muted-foreground">admin console</span>
+                </div>
+              </Link>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Console</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {links.map((link) =>
+                link.children ? (
+                  <Collapsible key={link.href} asChild defaultOpen={pathname.startsWith(link.href)} className="group/collapsible">
+                    <SidebarMenuItem>
+                      <CollapsibleTrigger asChild>
+                        <SidebarMenuButton tooltip={link.label} isActive={pathname === link.href}>
+                          <link.icon />
+                          <span>{link.label}</span>
+                          <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                        </SidebarMenuButton>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <SidebarMenuSub>
+                          {link.children.map((child) => (
+                            <SidebarMenuSubItem key={child.href}>
+                              <SidebarMenuSubButton asChild isActive={pathname === child.href}>
+                                <Link href={child.href}>
+                                  {child.href === "/users/new" ? <UserPlusIcon /> : null}
+                                  <span>{child.label}</span>
+                                </Link>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ) : (
+                  <SidebarMenuItem key={link.href}>
+                    <SidebarMenuButton asChild isActive={pathname === link.href} tooltip={link.label}>
+                      <Link href={link.href}>
+                        <link.icon />
+                        <span>{link.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ),
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+});

package/registry/admin-apps/nextjs/variants/base/src/components/nav-user.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/navigation";
+import { ChevronsUpDownIcon, KeyRoundIcon, LogOutIcon, UserIcon } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar";
+import { useAuthStore } from "@/lib/stores/store-context";
+
+function initialsOf(label: string): string {
+  return (
+    label
+      .split(/[@.\s]+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "?"
+  );
+}
+
+export const NavUser = observer(function NavUser() {
+  const { isMobile } = useSidebar();
+  const store = useAuthStore();
+  const router = useRouter();
+
+  const label = store.currentUser?.displayName || store.currentUser?.email || store.currentUser?.sub || "Account";
+  const photo = store.currentUser?.photo ?? null;
+
+  async function handleSignOut() {
+    await store.logout();
+    router.push("/login");
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+              <Avatar className="size-8 rounded-lg">
+                {photo && <AvatarImage src={photo} alt="" />}
+                <AvatarFallback className="rounded-lg">{initialsOf(label)}</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{store.currentUser?.roles.join(", ") || "Signed in"}</span>
+                <span className="truncate text-xs text-muted-foreground">{store.currentUser?.twoFactorEnabled ? "2FA on" : "2FA off"}</span>
+              </div>
+              <ChevronsUpDownIcon className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="size-8 rounded-lg">
+                  {photo && <AvatarImage src={photo} alt="" />}
+                  <AvatarFallback className="rounded-lg">{initialsOf(label)}</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{store.currentUser?.roles.join(", ") || "Signed in"}</span>
+                  <span className="truncate text-xs text-muted-foreground">{store.currentUser?.twoFactorEnabled ? "2FA on" : "2FA off"}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem onClick={() => router.push("/account")}>
+                <UserIcon />
+                Profile
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => router.push("/account/change-password")}>
+                <KeyRoundIcon />
+                Change password
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive" onClick={() => void handleSignOut()}>
+              <LogOutIcon />
+              Sign out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+});

package/registry/admin-apps/nextjs/variants/base/src/components/permission-required.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { PermissionKey } from "@/lib/ability";
+
+/**
+ * Shown in place of a screen the signed-in user can't read. It names the permission rather than
+ * saying "access denied", because the fix — ask an admin for that key — is only actionable if
+ * you know which one is missing. The server enforces the same key on the route behind this
+ * screen; this is the polite version of the 403, not a substitute for it.
+ */
+export function PermissionRequired({ permission, what }: { permission: PermissionKey | readonly PermissionKey[]; what: string }) {
+  const keys = Array.isArray(permission) ? permission : [permission as PermissionKey];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{what} isn&apos;t available to you</CardTitle>
+        <CardDescription>
+          You need {keys.length > 1 ? "one of these permissions" : "the"}{" "}
+          {keys.map((key, index) => (
+            <span key={key}>
+              {index > 0 && (index === keys.length - 1 ? " or " : ", ")}
+              <span className="font-mono">{key}</span>
+            </span>
+          ))}{" "}
+          {keys.length > 1 ? "to see this" : "permission to see this"}. Ask an admin to grant it, or to assign you a role that carries
+          it.
+        </CardDescription>
+      </CardHeader>
+      <CardContent />
+    </Card>
+  );
+}

package/registry/admin-apps/nextjs/variants/base/src/components/photo-upload.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { type FileRejection, useDropzone } from "react-dropzone";
+import { ArrowUpIcon, XIcon } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+
+const MAX_DIMENSION = 256;
+const JPEG_QUALITY = 0.85;
+const MAX_FILE_BYTES = 2 * 1024 * 1024; // 2MB, matching the reference's dropzone limit
+
+/** Resizes to fit within MAX_DIMENSION and re-encodes as JPEG, so a phone photo doesn't land in the database as a multi-megabyte data URI. */
+function resizeToDataUri(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(reader.error);
+    reader.onload = () => {
+      const img = new Image();
+      img.onerror = () => reject(new Error("Could not read this image."));
+      img.onload = () => {
+        const scale = Math.min(1, MAX_DIMENSION / Math.max(img.width, img.height));
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.round(img.width * scale);
+        canvas.height = Math.round(img.height * scale);
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return reject(new Error("Canvas is not supported in this browser."));
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        resolve(canvas.toDataURL("image/jpeg", JPEG_QUALITY));
+      };
+      img.src = reader.result as string;
+    };
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Stores the photo as a data URI directly on the `photo` column — there is no object-storage
+ * service in this stack, and a small resized JPEG (see MAX_DIMENSION) keeps the row a reasonable
+ * size. Swap this for an upload-to-a-bucket-then-store-the-URL flow if the deployment adds one.
+ *
+ * Renders the reference app's upload treatment: the purple dashed dropzone with the big upload
+ * arrow, followed by a Preview section with an accepted-file thumbnail grid (remove button on the
+ * thumbnail) and a rejected-files list.
+ */
+export function PhotoUpload({
+  photo,
+  fallback,
+  onChange,
+  disabled,
+}: {
+  photo: string | null | undefined;
+  fallback: string;
+  onChange: (photo: string | null) => Promise<void> | void;
+  disabled?: boolean;
+}) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [rejected, setRejected] = useState<FileRejection[]>([]);
+
+  const onDrop = useCallback(
+    (accepted: File[], rejections: FileRejection[]) => {
+      setRejected(rejections);
+      const file = accepted[0];
+      if (!file) return;
+      setError(null);
+      setBusy(true);
+      resizeToDataUri(file)
+        .then((dataUri) => onChange(dataUri))
+        .catch((err) => setError(err instanceof Error ? err.message : "Couldn't process this image."))
+        .finally(() => setBusy(false));
+    },
+    [onChange],
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    maxFiles: 1,
+    multiple: false,
+    disabled: disabled || busy,
+    accept: { "image/*": [] },
+    maxSize: MAX_FILE_BYTES,
+  });
+
+  async function handleRemove() {
+    setError(null);
+    setBusy(true);
+    try {
+      await onChange(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Couldn't remove the photo.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function removeRejected(name: string) {
+    setRejected((prev) => prev.filter(({ file }) => file.name !== name));
+  }
+
+  return (
+    <div className="w-full">
+      <div
+        {...getRootProps({
+          className: cn(
+            "p-12 border-2 border-dashed border-purple-500 rounded-lg bg-purple-50 dark:bg-purple-950/20 hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors cursor-pointer",
+            (disabled || busy) && "cursor-not-allowed opacity-60",
+          ),
+        })}
+      >
+        <input {...getInputProps()} />
+        <div className="flex flex-col items-center justify-center gap-4 text-purple-700 dark:text-purple-300">
+          <ArrowUpIcon className="w-8 h-8" />
+          {busy ? (
+            <p className="text-lg font-medium">Uploading...</p>
+          ) : isDragActive ? (
+            <p className="text-lg font-medium">Drop the image here...</p>
+          ) : (
+            <div className="text-center">
+              <p className="text-lg font-medium">Click or drag image to upload</p>
+              <p className="text-sm text-muted-foreground mt-2">PNG, JPG up to 2MB</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {error && <p className="mt-2 text-xs text-destructive">{error}</p>}
+
+      {/* Preview */}
+      <section className="mt-10">
+        <div className="flex gap-4">
+          <h2 className="title text-3xl font-semibold">Preview</h2>
+          {photo && !disabled && (
+            <button
+              type="button"
+              onClick={() => void handleRemove()}
+              disabled={busy}
+              className="ml-auto mt-1 text-[12px] uppercase tracking-wider font-bold text-neutral-500 border border-purple-400 rounded-md px-3 hover:bg-purple-400 hover:text-white transition-colors dark:text-white dark:border-white"
+            >
+              Remove all files
+            </button>
+          )}
+        </div>
+
+        {/* Accepted files */}
+        <h3 className="title text-lg font-semibold text-neutral-600 mt-10 border-b pb-3 dark:text-white">Accepted Files</h3>
+        {photo ? (
+          <ul className="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-10">
+            <li className="relative h-32 rounded-md shadow-lg dark:shadow-white">
+              {/* Data URIs need a plain <img>; next/image would try to optimize them. */}
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img src={photo} alt="Selected image" className="h-full w-full object-contain rounded-md dark:object-cover" />
+              <button
+                type="button"
+                className="w-7 h-7 border border-border bg-background rounded-full flex justify-center items-center absolute -top-3 -right-3 hover:bg-muted transition-colors"
+                disabled={busy}
+                onClick={() => void handleRemove()}
+              >
+                <XIcon className="w-5 h-5" />
+              </button>
+            </li>
+          </ul>
+        ) : (
+          <div className="mt-6 flex items-center gap-3">
+            <Avatar className="size-16 shrink-0">
+              {photo && <AvatarImage src={photo} alt="" className="object-cover" />}
+              <AvatarFallback className="text-base">{fallback}</AvatarFallback>
+            </Avatar>
+            <p className="text-sm text-muted-foreground">No file selected.</p>
+          </div>
+        )}
+
+        {/* Rejected Files */}
+        {rejected.length > 0 && (
+          <>
+            <h3 className="title text-lg font-semibold text-neutral-600 mt-10 border-b pb-3 dark:text-white">Rejected Files</h3>
+            <ul className="mt-6 flex flex-col">
+              {rejected.map(({ file, errors }) => (
+                <li key={file.name} className="flex items-start justify-between dark:text-white">
+                  <div>
+                    <p className="mt-2 text-neutral-500 text-sm font-medium dark:text-white">{file.name}</p>
+                    <ul className="text-[12px] text-red-400">
+                      {errors.map((e) => (
+                        <li key={e.code}>{e.message}</li>
+                      ))}
+                    </ul>
+                  </div>
+                  <button
+                    type="button"
+                    className="mt-1 py-1 text-[12px] uppercase tracking-wider font-bold text-neutral-500 border border-border rounded-md px-3 hover:bg-muted transition-colors dark:text-white dark:border-white"
+                    onClick={() => removeRejected(file.name)}
+                  >
+                    remove
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </section>
+    </div>
+  );
+}