@actuate-media/cms-admin 0.8.0 → 0.8.2

package/src/views/SetupWizard.tsx

@@ -1,66 +1,71 @@
-'use client';
+'use client'
 
-import { useState, type FormEvent } from 'react';
-import { Shield, Eye, EyeOff, CheckCircle2, AlertTriangle } from 'lucide-react';
+import { useState, type FormEvent } from 'react'
+import { Shield, Eye, EyeOff, CheckCircle2, AlertTriangle } from 'lucide-react'
 
 export interface SetupWizardProps {
-  onComplete: (data: { name: string; email: string; password: string }) => Promise<{ success: boolean; error?: string }>;
-  siteName?: string;
+  onComplete: (data: {
+    name: string
+    email: string
+    password: string
+  }) => Promise<{ success: boolean; error?: string }>
+  siteName?: string
 }
 
 function passwordStrength(pw: string): { score: number; label: string; color: string } {
-  let score = 0;
-  if (pw.length >= 12) score++;
-  if (pw.length >= 16) score++;
-  if (/[A-Z]/.test(pw)) score++;
-  if (/[a-z]/.test(pw)) score++;
-  if (/\d/.test(pw)) score++;
-  if (/[^a-zA-Z0-9]/.test(pw)) score++;
-
-  if (score <= 2) return { score, label: 'Weak', color: 'bg-red-500' };
-  if (score <= 4) return { score, label: 'Fair', color: 'bg-yellow-500' };
-  return { score, label: 'Strong', color: 'bg-green-500' };
+  let score = 0
+  if (pw.length >= 12) score++
+  if (pw.length >= 16) score++
+  if (/[A-Z]/.test(pw)) score++
+  if (/[a-z]/.test(pw)) score++
+  if (/\d/.test(pw)) score++
+  if (/[^a-zA-Z0-9]/.test(pw)) score++
+
+  if (score <= 2) return { score, label: 'Weak', color: 'bg-red-500' }
+  if (score <= 4) return { score, label: 'Fair', color: 'bg-yellow-500' }
+  return { score, label: 'Strong', color: 'bg-green-500' }
 }
 
 export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizardProps) {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [submitting, setSubmitting] = useState(false);
-  const [error, setError] = useState('');
-  const [done, setDone] = useState(false);
-
-  const strength = passwordStrength(password);
-  const passwordsMatch = password === confirmPassword;
-  const canSubmit = name.trim() && email.trim() && password.length >= 12 && passwordsMatch && !submitting;
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState('')
+  const [done, setDone] = useState(false)
+
+  const strength = passwordStrength(password)
+  const passwordsMatch = password === confirmPassword
+  const canSubmit =
+    name.trim() && email.trim() && password.length >= 12 && passwordsMatch && !submitting
 
   const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    if (!canSubmit) return;
+    e.preventDefault()
+    if (!canSubmit) return
 
-    setError('');
-    setSubmitting(true);
+    setError('')
+    setSubmitting(true)
 
     try {
       const result = await onComplete({
         name: name.trim(),
         email: email.trim(),
         password,
-      });
+      })
 
       if (result.success) {
-        setDone(true);
+        setDone(true)
       } else {
-        setError(result.error ?? 'Failed to create admin account');
+        setError(result.error ?? 'Failed to create admin account')
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'An unexpected error occurred');
+      setError(err instanceof Error ? err.message : 'An unexpected error occurred')
     } finally {
-      setSubmitting(false);
+      setSubmitting(false)
     }
-  };
+  }
 
   if (done) {
     return (
@@ -81,7 +86,7 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           </button>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -95,7 +100,10 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           <p className="text-gray-600 mt-2">Create your admin account to get started</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5">
+        <form
+          onSubmit={handleSubmit}
+          className="bg-white rounded-xl border border-gray-200 p-6 shadow-sm space-y-5"
+        >
           {error && (
             <div className="flex items-start gap-3 p-3 bg-red-50 border border-red-200 rounded-lg">
               <AlertTriangle className="w-5 h-5 text-red-600 mt-0.5 shrink-0" />
@@ -104,7 +112,9 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           )}
 
           <div>
-            <label htmlFor="setup-name" className="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label>
+            <label htmlFor="setup-name" className="block text-sm font-medium text-gray-700 mb-1.5">
+              Full Name
+            </label>
             <input
               id="setup-name"
               type="text"
@@ -119,7 +129,9 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           </div>
 
           <div>
-            <label htmlFor="setup-email" className="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label>
+            <label htmlFor="setup-email" className="block text-sm font-medium text-gray-700 mb-1.5">
+              Email Address
+            </label>
             <input
               id="setup-email"
               type="email"
@@ -133,7 +145,12 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           </div>
 
           <div>
-            <label htmlFor="setup-password" className="block text-sm font-medium text-gray-700 mb-1.5">Password</label>
+            <label
+              htmlFor="setup-password"
+              className="block text-sm font-medium text-gray-700 mb-1.5"
+            >
+              Password
+            </label>
             <div className="relative">
               <input
                 id="setup-password"
@@ -171,7 +188,12 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           </div>
 
           <div>
-            <label htmlFor="setup-confirm" className="block text-sm font-medium text-gray-700 mb-1.5">Confirm Password</label>
+            <label
+              htmlFor="setup-confirm"
+              className="block text-sm font-medium text-gray-700 mb-1.5"
+            >
+              Confirm Password
+            </label>
             <input
               id="setup-confirm"
               type={showPassword ? 'text' : 'password'}
@@ -198,10 +220,11 @@ export function SetupWizard({ onComplete, siteName = 'Actuate CMS' }: SetupWizar
           </button>
 
           <p className="text-xs text-gray-500 text-center">
-            This form is only available during initial setup. Once an admin account exists, it will be replaced by the login screen.
+            This form is only available during initial setup. Once an admin account exists, it will
+            be replaced by the login screen.
           </p>
         </form>
       </div>
     </div>
-  );
+  )
 }

package/src/views/Users.tsx

@@ -1,72 +1,83 @@
-'use client';
+'use client'
 
-import * as Dialog from '@radix-ui/react-dialog';
-import { Pencil, Trash2, UserPlus, Search, ArrowUpDown, ArrowUp, ArrowDown, Loader2, AlertTriangle } from 'lucide-react';
-import { useState, useMemo, type FormEvent } from 'react';
-import { toast } from 'sonner';
-import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
+import * as Dialog from '@radix-ui/react-dialog'
+import {
+  Pencil,
+  Trash2,
+  UserPlus,
+  Search,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  Loader2,
+  AlertTriangle,
+} from 'lucide-react'
+import { useState, useMemo, type FormEvent } from 'react'
+import { toast } from 'sonner'
+import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
 
-type UserSortKey = 'name' | 'role' | 'status' | 'lastLogin';
+type UserSortKey = 'name' | 'role' | 'status' | 'lastLogin'
 
 export interface UsersProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 export function Users({ onNavigate }: UsersProps) {
-  const { data, loading, error, refetch } = useApiData<any[]>('/users');
-  const [showInviteDialog, setShowInviteDialog] = useState(false);
-  const [inviteEmail, setInviteEmail] = useState('');
-  const [inviteRole, setInviteRole] = useState('editor');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterRole, setFilterRole] = useState('all');
-  const [sortConfig, setSortConfig] = useState<SortConfig<UserSortKey> | null>(null);
+  const { data, loading, error, refetch } = useApiData<any[]>('/users')
+  const [showInviteDialog, setShowInviteDialog] = useState(false)
+  const [inviteEmail, setInviteEmail] = useState('')
+  const [inviteRole, setInviteRole] = useState('editor')
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterRole, setFilterRole] = useState('all')
+  const [sortConfig, setSortConfig] = useState<SortConfig<UserSortKey> | null>(null)
 
-  const users = data ?? [];
+  const users = data ?? []
 
   const filteredAndSorted = useMemo(() => {
     let results = users.filter((user: any) => {
       const matchesSearch =
         (user.name ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (user.email ?? '').toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesRole = filterRole === 'all' || (user.role ?? '').toLowerCase() === filterRole.toLowerCase();
-      return matchesSearch && matchesRole;
-    });
+        (user.email ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesRole =
+        filterRole === 'all' || (user.role ?? '').toLowerCase() === filterRole.toLowerCase()
+      return matchesSearch && matchesRole
+    })
 
     if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (u: any) => [u.name, u.email, u.role]);
+      results = sortByRelevance(results, searchQuery, (u: any) => [u.name, u.email, u.role])
     } else if (sortConfig) {
       results = [...results].sort((a: any, b: any) => {
-        const aVal = a[sortConfig.key] ?? '';
-        const bVal = b[sortConfig.key] ?? '';
-        const cmp = String(aVal).localeCompare(String(bVal));
-        return sortConfig.direction === 'asc' ? cmp : -cmp;
-      });
+        const aVal = a[sortConfig.key] ?? ''
+        const bVal = b[sortConfig.key] ?? ''
+        const cmp = String(aVal).localeCompare(String(bVal))
+        return sortConfig.direction === 'asc' ? cmp : -cmp
+      })
     }
-    return results;
-  }, [users, searchQuery, filterRole, sortConfig]);
+    return results
+  }, [users, searchQuery, filterRole, sortConfig])
 
   const handleInvite = (e: FormEvent) => {
-    e.preventDefault();
-    toast.success(`Invitation sent to ${inviteEmail}`);
-    setShowInviteDialog(false);
-    setInviteEmail('');
-    setInviteRole('editor');
-  };
+    e.preventDefault()
+    toast.success(`Invitation sent to ${inviteEmail}`)
+    setShowInviteDialog(false)
+    setInviteEmail('')
+    setInviteRole('editor')
+  }
 
   const handleDelete = async (userId: number) => {
-    const res = await cmsApi(`/users/${userId}`, { method: 'DELETE' });
+    const res = await cmsApi(`/users/${userId}`, { method: 'DELETE' })
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('User removed');
-      refetch();
+      toast.success('User removed')
+      refetch()
     }
-  };
+  }
 
   function SortHeader({ label, sortKey }: { label: string; sortKey: UserSortKey }) {
-    const active = sortConfig?.key === sortKey;
+    const active = sortConfig?.key === sortKey
     return (
       <button
         type="button"
@@ -75,12 +86,16 @@ export function Users({ onNavigate }: UsersProps) {
       >
         {label}
         {active ? (
-          sortConfig!.direction === 'asc' ? <ArrowUp className="w-3 h-3" /> : <ArrowDown className="w-3 h-3" />
+          sortConfig!.direction === 'asc' ? (
+            <ArrowUp className="w-3 h-3" />
+          ) : (
+            <ArrowDown className="w-3 h-3" />
+          )
         ) : (
           <ArrowUpDown className="w-3 h-3 text-gray-400" />
         )}
       </button>
-    );
+    )
   }
 
   if (loading) {
@@ -88,7 +103,7 @@ export function Users({ onNavigate }: UsersProps) {
       <div className="p-3 pr-6 sm:p-4 sm:pr-8 flex items-center justify-center h-64">
         <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
       </div>
-    );
+    )
   }
 
   return (
@@ -97,7 +112,12 @@ export function Users({ onNavigate }: UsersProps) {
         <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
           <AlertTriangle className="w-5 h-5 text-red-600 shrink-0" />
           <span className="text-sm text-red-800 flex-1">{error}</span>
-          <button onClick={refetch} className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors">Retry</button>
+          <button
+            onClick={refetch}
+            className="px-3 py-1 text-sm text-red-700 border border-red-300 rounded-lg hover:bg-red-100 transition-colors"
+          >
+            Retry
+          </button>
         </div>
       )}
 
@@ -151,91 +171,105 @@ export function Users({ onNavigate }: UsersProps) {
           <p className="text-sm text-gray-500">Invite your first user to get started.</p>
         </div>
       ) : (
-      <div className="rounded-lg border border-gray-200 bg-white">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="border-b border-gray-200 bg-gray-50">
-              <tr>
-                <th className="px-4 py-2 text-left"><SortHeader label="User" sortKey="name" /></th>
-                <th className="px-4 py-2 text-left"><SortHeader label="Role" sortKey="role" /></th>
-                <th className="px-4 py-2 text-left"><SortHeader label="Status" sortKey="status" /></th>
-                <th className="px-4 py-2 text-left"><SortHeader label="Last Active" sortKey="lastLogin" /></th>
-                <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-200">
-              {filteredAndSorted.map((user: any) => (
-                <tr key={user.id} className="transition-colors hover:bg-gray-50">
-                  <td className="px-4 py-3">
-                    <div className="flex items-center gap-3">
-                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600 text-sm font-medium text-white">
-                        {user.name.charAt(0)}
-                      </div>
-                      <div>
-                        <div className="text-sm font-medium text-gray-900">{user.name}</div>
-                        <div className="text-xs text-gray-600">{user.email}</div>
+        <div className="rounded-lg border border-gray-200 bg-white">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="border-b border-gray-200 bg-gray-50">
+                <tr>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="User" sortKey="name" />
+                  </th>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="Role" sortKey="role" />
+                  </th>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="Status" sortKey="status" />
+                  </th>
+                  <th className="px-4 py-2 text-left">
+                    <SortHeader label="Last Active" sortKey="lastLogin" />
+                  </th>
+                  <th className="px-4 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {filteredAndSorted.map((user: any) => (
+                  <tr key={user.id} className="transition-colors hover:bg-gray-50">
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-3">
+                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600 text-sm font-medium text-white">
+                          {user.name.charAt(0)}
+                        </div>
+                        <div>
+                          <div className="text-sm font-medium text-gray-900">{user.name}</div>
+                          <div className="text-xs text-gray-600">{user.email}</div>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                  <td className="px-4 py-3">
-                    <span
-                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
-                        user.role === 'Admin'
-                          ? 'bg-purple-100 text-purple-800'
-                          : user.role === 'Editor'
-                            ? 'bg-blue-100 text-blue-800'
-                            : 'bg-gray-100 text-gray-800'
-                      }`}
-                    >
-                      {user.role}
-                    </span>
-                  </td>
-                  <td className="px-4 py-3">
-                    <span
-                      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
-                        user.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
-                      }`}
-                    >
-                      {user.status}
-                    </span>
-                  </td>
-                  <td className="px-4 py-3 text-sm text-gray-600">{user.lastLogin}</td>
-                  <td className="px-4 py-3">
-                    <div className="flex items-center gap-2">
-                      <button
-                        type="button"
-                        onClick={() => onNavigate?.(`/users/${user.id}`)}
-                        className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                        aria-label={`Edit ${user.name}`}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span
+                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                          user.role === 'Admin'
+                            ? 'bg-purple-100 text-purple-800'
+                            : user.role === 'Editor'
+                              ? 'bg-blue-100 text-blue-800'
+                              : 'bg-gray-100 text-gray-800'
+                        }`}
                       >
-                        <Pencil className="h-4 w-4 text-gray-600" />
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => handleDelete(user.id)}
-                        className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                        aria-label={`Remove ${user.name}`}
+                        {user.role}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span
+                        className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+                          user.status === 'Active'
+                            ? 'bg-green-100 text-green-800'
+                            : 'bg-gray-100 text-gray-800'
+                        }`}
                       >
-                        <Trash2 className="h-4 w-4 text-red-600" />
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                        {user.status}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-sm text-gray-600">{user.lastLogin}</td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-2">
+                        <button
+                          type="button"
+                          onClick={() => onNavigate?.(`/users/${user.id}`)}
+                          className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                          aria-label={`Edit ${user.name}`}
+                        >
+                          <Pencil className="h-4 w-4 text-gray-600" />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => handleDelete(user.id)}
+                          className="rounded p-1.5 transition-colors hover:bg-gray-100"
+                          aria-label={`Remove ${user.name}`}
+                        >
+                          <Trash2 className="h-4 w-4 text-red-600" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
       )}
 
       <Dialog.Root open={showInviteDialog} onOpenChange={setShowInviteDialog}>
         <Dialog.Portal>
           <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
           <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-lg">
-            <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">Invite User</Dialog.Title>
+            <Dialog.Title className="mb-4 text-lg font-semibold text-gray-900">
+              Invite User
+            </Dialog.Title>
             <form onSubmit={handleInvite} className="space-y-4">
               <div>
-                <label className="mb-1 block text-sm font-medium text-gray-700">Email Address</label>
+                <label className="mb-1 block text-sm font-medium text-gray-700">
+                  Email Address
+                </label>
                 <input
                   type="email"
                   value={inviteEmail}
@@ -278,5 +312,5 @@ export function Users({ onNavigate }: UsersProps) {
         </Dialog.Portal>
       </Dialog.Root>
     </div>
-  );
+  )
 }

package/src/views/page-builder/AIBlockAssist.tsx

@@ -1,16 +1,16 @@
-'use client';
+'use client'
 
-import { useState, useCallback } from 'react';
-import { Sparkles, Loader2 } from 'lucide-react';
-import { toast } from 'sonner';
-import { cmsApi } from '../../lib/api.js';
-import type { BlockNode } from '@actuate-media/cms-core';
+import { useState, useCallback } from 'react'
+import { Sparkles, Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { cmsApi } from '../../lib/api.js'
+import type { BlockNode } from '@actuate-media/cms-core'
 
 export interface AIBlockAssistProps {
-  block: BlockNode;
-  pageTitle?: string;
-  businessName?: string;
-  onUpdateData: (data: Record<string, unknown>) => void;
+  block: BlockNode
+  pageTitle?: string
+  businessName?: string
+  onUpdateData: (data: Record<string, unknown>) => void
 }
 
 export function AIBlockAssist({
@@ -19,10 +19,10 @@ export function AIBlockAssist({
   businessName,
   onUpdateData,
 }: AIBlockAssistProps) {
-  const [generating, setGenerating] = useState(false);
+  const [generating, setGenerating] = useState(false)
 
   const handleGenerate = useCallback(async () => {
-    setGenerating(true);
+    setGenerating(true)
 
     try {
       const res = await cmsApi<Record<string, unknown>>('/page-builder/generate-block', {
@@ -35,20 +35,20 @@ export function AIBlockAssist({
             businessName,
           },
         }),
-      });
+      })
 
       if (res.error) {
-        toast.error(res.error);
+        toast.error(res.error)
       } else if (res.data) {
-        onUpdateData(res.data);
-        toast.success('Content generated');
+        onUpdateData(res.data)
+        toast.success('Content generated')
       }
     } catch {
-      toast.error('Failed to generate content');
+      toast.error('Failed to generate content')
     } finally {
-      setGenerating(false);
+      setGenerating(false)
     }
-  }, [block, pageTitle, businessName, onUpdateData]);
+  }, [block, pageTitle, businessName, onUpdateData])
 
   return (
     <button
@@ -57,12 +57,8 @@ export function AIBlockAssist({
       className="flex items-center gap-1.5 px-2.5 py-1 text-xs text-primary hover:bg-primary/10 rounded-md transition-colors disabled:opacity-50"
       title="Generate content with AI"
     >
-      {generating ? (
-        <Loader2 size={12} className="animate-spin" />
-      ) : (
-        <Sparkles size={12} />
-      )}
+      {generating ? <Loader2 size={12} className="animate-spin" /> : <Sparkles size={12} />}
       {generating ? 'Generating...' : 'AI Fill'}
     </button>
-  );
+  )
 }