@actuate-media/cms-admin 0.10.0 → 0.11.0

package/src/views/PageEditor.tsx

@@ -81,18 +81,18 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
 
   if (!isNew && loading) {
     return (
-      <div className="h-full flex items-center justify-center">
-        <Loader2 className="w-6 h-6 animate-spin text-blue-600" />
+      <div className="flex h-full items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="h-full flex flex-col bg-white">
+    <div className="flex h-full flex-col bg-white">
       {error && (
         <div className="mx-4 mt-3 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>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{error}</span>
         </div>
       )}
 
@@ -100,63 +100,63 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
         <div className="flex items-center justify-between">
           <button
             onClick={() => onNavigate?.('/pages')}
-            className="inline-flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors"
+            className="inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-900"
           >
-            <ArrowLeft className="w-4 h-4" />
+            <ArrowLeft className="h-4 w-4" />
             Back to Pages
           </button>
           <div className="flex items-center gap-3">
-            <button className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg flex items-center gap-2 hover:bg-gray-50 transition-colors">
-              <Eye className="w-4 h-4" />
+            <button className="flex items-center gap-2 rounded-lg border border-gray-300 px-3 py-1.5 text-sm transition-colors hover:bg-gray-50">
+              <Eye className="h-4 w-4" />
               Preview
             </button>
           </div>
         </div>
       </div>
 
-      <div className="flex-1 overflow-hidden flex">
+      <div className="flex flex-1 overflow-hidden">
         <div className="flex-1 overflow-y-auto">
-          <div className="max-w-4xl mx-auto p-3 pr-6 sm:p-4 sm:pr-8">
+          <div className="mx-auto max-w-4xl p-3 pr-6 sm:p-4 sm:pr-8">
             <input
               type="text"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="Page title"
-              className="w-full text-2xl sm:text-3xl font-bold mb-4 px-0 border-none focus:outline-none focus:ring-0 placeholder:text-gray-300"
+              className="mb-4 w-full border-none px-0 text-2xl font-bold placeholder:text-gray-300 focus:ring-0 focus:outline-none sm:text-3xl"
             />
 
             <div className="mb-4">
-              <label className="block text-xs font-medium text-gray-600 mb-1">URL Slug</label>
+              <label className="mb-1 block text-xs font-medium text-gray-600">URL Slug</label>
               <input
                 type="text"
                 value={slug}
                 onChange={(e) => setSlug(e.target.value)}
                 placeholder="url-slug"
-                className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
               />
             </div>
 
-            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-              <p className="text-gray-500 mb-2">No blocks added yet</p>
+            <div className="rounded-lg border-2 border-dashed border-gray-300 p-8 text-center">
+              <p className="mb-2 text-gray-500">No blocks added yet</p>
               <p className="text-sm text-gray-400">Click "Add Block" to start building your page</p>
-              <button className="mt-4 px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
+              <button className="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700">
                 Add Block
               </button>
             </div>
           </div>
         </div>
 
-        <div className="w-[30%] border-l border-gray-200 overflow-y-auto bg-gray-50">
-          <div className="p-4 space-y-4">
-            <div className="bg-white rounded-lg border border-gray-200 p-4">
-              <h3 className="font-semibold text-gray-900 mb-3 text-sm">Publish</h3>
+        <div className="w-[30%] overflow-y-auto border-l border-gray-200 bg-gray-50">
+          <div className="space-y-4 p-4">
+            <div className="rounded-lg border border-gray-200 bg-white p-4">
+              <h3 className="mb-3 text-sm font-semibold text-gray-900">Publish</h3>
               <div className="space-y-3">
                 <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">Status</label>
+                  <label className="mb-1 block text-xs font-medium text-gray-700">Status</label>
                   <select
                     value={status}
                     onChange={(e) => setStatus(e.target.value as 'draft' | 'published')}
-                    className="w-full px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full rounded-lg border border-gray-300 px-3 py-1.5 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   >
                     <option value="draft">Draft</option>
                     <option value="published">Published</option>
@@ -165,7 +165,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
                 <button
                   onClick={savePage}
                   disabled={saving}
-                  className="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium disabled:opacity-50"
+                  className="w-full rounded-lg bg-blue-600 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
                 >
                   {saving ? 'Saving...' : 'Save Page'}
                 </button>
@@ -173,7 +173,7 @@ export function PageEditor({ id, onNavigate }: PageEditorProps) {
                   <button
                     onClick={publishPage}
                     disabled={saving}
-                    className="w-full py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium disabled:opacity-50"
+                    className="w-full rounded-lg bg-green-600 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:opacity-50"
                   >
                     {saving ? 'Publishing...' : 'Publish'}
                   </button>

package/src/views/Pages.tsx

@@ -73,7 +73,7 @@ function SeoScoreBadge({ score }: { score: number }) {
   const color = score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-amber-500' : 'bg-red-500'
   return (
     <div className="flex items-center gap-1.5">
-      <span className={`w-2.5 h-2.5 rounded-full ${color}`} />
+      <span className={`h-2.5 w-2.5 rounded-full ${color}`} />
       <span className="text-xs text-gray-600">{score}</span>
     </div>
   )
@@ -83,7 +83,7 @@ function FolderBadge({ name }: { name: string }) {
   const colors = getFolderColor(name)
   return (
     <span
-      className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${colors.bg} ${colors.text}`}
+      className={`inline-flex rounded px-2 py-0.5 text-xs font-medium ${colors.bg} ${colors.text}`}
     >
       {name}
     </span>
@@ -229,17 +229,17 @@ export function Pages({ onNavigate }: PagesProps) {
       <button
         type="button"
         onClick={() => setSortConfig(toggleSort(sortConfig, sortKey))}
-        className="flex items-center gap-1 text-xs font-medium text-gray-700 hover:text-gray-900 transition-colors"
+        className="flex items-center gap-1 text-xs font-medium text-gray-700 transition-colors hover:text-gray-900"
       >
         {label}
         {active ? (
           sortConfig!.direction === 'asc' ? (
-            <ArrowUp className="w-3 h-3" />
+            <ArrowUp className="h-3 w-3" />
           ) : (
-            <ArrowDown className="w-3 h-3" />
+            <ArrowDown className="h-3 w-3" />
           )
         ) : (
-          <ArrowUpDown className="w-3 h-3 text-gray-400" />
+          <ArrowUpDown className="h-3 w-3 text-gray-400" />
         )}
       </button>
     )
@@ -247,39 +247,39 @@ export function Pages({ onNavigate }: PagesProps) {
 
   if (loading) {
     return (
-      <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 className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
+        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
       </div>
     )
   }
 
   return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8 h-full flex flex-col">
+    <div className="flex h-full flex-col p-3 pr-6 sm:p-4 sm:pr-8">
       {error && (
         <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>
+          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
+          <span className="flex-1 text-sm text-red-800">{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"
+            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
           >
             Retry
           </button>
         </div>
       )}
 
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between mb-4 gap-3">
+      <div className="mb-4 flex flex-col justify-between gap-3 sm:flex-row sm:items-center">
         <div className="flex items-center gap-3">
           <button
             type="button"
             onClick={() => setSidebarOpen((prev) => !prev)}
-            className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
+            className="rounded-lg p-1.5 transition-colors hover:bg-gray-100"
             title={sidebarOpen ? 'Hide folders' : 'Show folders'}
           >
-            <FolderInput className="w-5 h-5 text-gray-600" />
+            <FolderInput className="h-5 w-5 text-gray-600" />
           </button>
           <div>
-            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900">Pages</h1>
+            <h1 className="text-xl font-semibold text-gray-900 sm:text-2xl">Pages</h1>
             <p className="text-sm text-gray-500">
               {totalCount} page{totalCount !== 1 ? 's' : ''}
             </p>
@@ -287,17 +287,17 @@ export function Pages({ onNavigate }: PagesProps) {
         </div>
         <button
           onClick={() => onNavigate?.('/pages/new')}
-          className="flex items-center justify-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+          className="flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
         >
-          <Plus className="w-4 h-4" />
+          <Plus className="h-4 w-4" />
           <span className="hidden sm:inline">New Page</span>
           <span className="sm:hidden">New</span>
         </button>
       </div>
 
-      <div className="flex gap-4 flex-1 min-h-0 overflow-hidden">
+      <div className="flex min-h-0 flex-1 gap-4 overflow-hidden">
         {sidebarOpen && (
-          <div className="w-56 shrink-0 bg-white rounded-lg border border-gray-200 overflow-hidden flex flex-col">
+          <div className="flex w-56 shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200 bg-white">
             <FolderTree
               scope="pages"
               selected={folderSel}
@@ -312,24 +312,24 @@ export function Pages({ onNavigate }: PagesProps) {
           </div>
         )}
 
-        <div className="flex-1 flex flex-col min-w-0">
-          <div className="bg-white rounded-lg border border-gray-200 mb-4">
-            <div className="p-3 flex flex-col gap-3">
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="mb-4 rounded-lg border border-gray-200 bg-white">
+            <div className="flex flex-col gap-3 p-3">
               <div className="relative">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
                 <input
                   type="text"
                   placeholder="Search pages..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 />
               </div>
-              <div className="flex flex-col sm:flex-row gap-2">
+              <div className="flex flex-col gap-2 sm:flex-row">
                 <select
                   value={filterStatus}
                   onChange={(e) => setFilterStatus(e.target.value)}
-                  className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="all">All Status</option>
                   <option value="published">Published</option>
@@ -338,7 +338,7 @@ export function Pages({ onNavigate }: PagesProps) {
                 <select
                   value={filterTemplate}
                   onChange={(e) => setFilterTemplate(e.target.value)}
-                  className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
                 >
                   <option value="all">All Templates</option>
                   <option value="landing">Landing</option>
@@ -348,9 +348,9 @@ export function Pages({ onNavigate }: PagesProps) {
                 </select>
                 <button
                   type="button"
-                  className="flex items-center justify-center gap-2 px-3 py-2 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                  className="flex items-center justify-center gap-2 rounded-lg border border-gray-300 px-3 py-2 text-sm transition-colors hover:bg-gray-50"
                 >
-                  <SlidersHorizontal className="w-4 h-4" />
+                  <SlidersHorizontal className="h-4 w-4" />
                   <span className="hidden sm:inline">More Filters</span>
                 </button>
               </div>
@@ -358,8 +358,8 @@ export function Pages({ onNavigate }: PagesProps) {
           </div>
 
           {selectedPages.length > 0 && (
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
-              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+            <div className="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-3">
+              <div className="flex flex-col justify-between gap-2 sm:flex-row sm:items-center">
                 <span className="text-sm text-blue-900">
                   {selectedPages.length} page{selectedPages.length !== 1 ? 's' : ''} selected
                 </span>
@@ -367,28 +367,28 @@ export function Pages({ onNavigate }: PagesProps) {
                   <button
                     type="button"
                     onClick={handleBulkPublish}
-                    className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+                    className="flex-1 rounded-lg bg-green-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-green-700 sm:flex-none"
                   >
                     Publish
                   </button>
                   <button
                     type="button"
                     onClick={handleBulkUnpublish}
-                    className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition-colors"
+                    className="flex-1 rounded-lg bg-yellow-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-yellow-700 sm:flex-none"
                   >
                     Unpublish
                   </button>
                   <button
                     type="button"
                     onClick={handleBulkDelete}
-                    className="flex-1 sm:flex-none px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+                    className="flex-1 rounded-lg bg-red-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-red-700 sm:flex-none"
                   >
                     Delete
                   </button>
                   <button
                     type="button"
                     onClick={() => setSelectedPages([])}
-                    className="flex-1 sm:flex-none px-3 py-1.5 text-sm border border-gray-300 bg-white rounded-lg hover:bg-gray-50 transition-colors"
+                    className="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm transition-colors hover:bg-gray-50 sm:flex-none"
                   >
                     Cancel
                   </button>
@@ -398,8 +398,8 @@ export function Pages({ onNavigate }: PagesProps) {
           )}
 
           {filteredAndSorted.length === 0 && !error ? (
-            <div className="bg-white rounded-lg border border-gray-200 p-8 text-center flex-1 flex flex-col items-center justify-center">
-              <p className="text-sm text-gray-500 mb-2">
+            <div className="flex flex-1 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-8 text-center">
+              <p className="mb-2 text-sm text-gray-500">
                 {folderSel.type === 'smart' && folderSel.smart === 'uncategorized'
                   ? 'No uncategorized pages'
                   : folderSel.type === 'folder'
@@ -408,17 +408,17 @@ export function Pages({ onNavigate }: PagesProps) {
               </p>
               <button
                 onClick={() => onNavigate?.('/pages/new')}
-                className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                className="rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
               >
                 Create your first page
               </button>
             </div>
           ) : (
             <>
-              <div className="hidden md:block bg-white rounded-lg border border-gray-200 flex-1 overflow-hidden">
-                <div className="overflow-x-auto h-full">
+              <div className="hidden flex-1 overflow-hidden rounded-lg border border-gray-200 bg-white md:block">
+                <div className="h-full overflow-x-auto">
                   <table className="w-full">
-                    <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
+                    <thead className="sticky top-0 border-b border-gray-200 bg-gray-50">
                       <tr>
                         <th className="w-8 px-3 py-2 text-left">
                           <input
@@ -462,7 +462,7 @@ export function Pages({ onNavigate }: PagesProps) {
                         return (
                           <tr
                             key={page.id}
-                            className="hover:bg-gray-50 transition-colors"
+                            className="transition-colors hover:bg-gray-50"
                             draggable
                             onDragStart={(e) => handleDragStart(e, page.id)}
                           >
@@ -474,14 +474,14 @@ export function Pages({ onNavigate }: PagesProps) {
                                 className="rounded border-gray-300"
                               />
                             </td>
-                            <td className="px-1 py-2 cursor-grab">
-                              <GripVertical className="w-4 h-4 text-gray-300" />
+                            <td className="cursor-grab px-1 py-2">
+                              <GripVertical className="h-4 w-4 text-gray-300" />
                             </td>
                             <td className="px-3 py-2">
                               <button
                                 type="button"
                                 onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                                className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left"
+                                className="text-left text-sm font-medium text-gray-900 hover:text-blue-600"
                               >
                                 {page.title}
                               </button>
@@ -499,7 +499,7 @@ export function Pages({ onNavigate }: PagesProps) {
                             </td>
                             <td className="px-3 py-2">
                               <span
-                                className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                                className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
                               >
                                 {page.status}
                               </span>
@@ -510,18 +510,18 @@ export function Pages({ onNavigate }: PagesProps) {
                                 <button
                                   type="button"
                                   onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                                  className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                                  className="rounded p-1.5 transition-colors hover:bg-gray-100"
                                   title="Edit"
                                 >
-                                  <Pencil className="w-4 h-4 text-gray-600" />
+                                  <Pencil className="h-4 w-4 text-gray-600" />
                                 </button>
                                 <button
                                   type="button"
                                   onClick={() => handleDelete(page.id)}
-                                  className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                                  className="rounded p-1.5 transition-colors hover:bg-gray-100"
                                   title="Delete"
                                 >
-                                  <Trash2 className="w-4 h-4 text-red-600" />
+                                  <Trash2 className="h-4 w-4 text-red-600" />
                                 </button>
                               </div>
                             </td>
@@ -533,7 +533,7 @@ export function Pages({ onNavigate }: PagesProps) {
                 </div>
               </div>
 
-              <div className="md:hidden bg-white rounded-lg border border-gray-200 flex-1 overflow-auto">
+              <div className="flex-1 overflow-auto rounded-lg border border-gray-200 bg-white md:hidden">
                 <div className="divide-y divide-gray-200">
                   {filteredAndSorted.map((page: any) => {
                     const seoScore = computeSeoScore(page.data)
@@ -550,24 +550,24 @@ export function Pages({ onNavigate }: PagesProps) {
                             type="checkbox"
                             checked={selectedPages.includes(page.id)}
                             onChange={() => handleSelectPage(page.id)}
-                            className="rounded border-gray-300 mt-1"
+                            className="mt-1 rounded border-gray-300"
                           />
-                          <div className="flex-1 min-w-0">
+                          <div className="min-w-0 flex-1">
                             <button
                               type="button"
                               onClick={() => onNavigate?.(`/pages/${page.id}`)}
-                              className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left"
+                              className="mb-1 block text-left text-sm font-medium text-gray-900 hover:text-blue-600"
                             >
                               {page.title}
                             </button>
-                            <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
+                            <div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-gray-600">
                               {folderName && <FolderBadge name={folderName} />}
                               <span>{page.author}</span>
                               <span>&middot;</span>
                               <span>{page.date}</span>
                               <SeoScoreBadge score={seoScore} />
                               <span
-                                className={`px-2 py-0.5 rounded-full text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                                className={`rounded-full px-2 py-0.5 text-xs font-medium ${page.status === 'Published' || page.status === 'PUBLISHED' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
                               >
                                 {page.status}
                               </span>
@@ -576,9 +576,9 @@ export function Pages({ onNavigate }: PagesProps) {
                           <button
                             type="button"
                             onClick={() => handleDelete(page.id)}
-                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            className="rounded p-1.5 transition-colors hover:bg-gray-100"
                           >
-                            <Trash2 className="w-4 h-4 text-red-600" />
+                            <Trash2 className="h-4 w-4 text-red-600" />
                           </button>
                         </div>
                       </div>