@actuate-media/cms-admin 0.7.3 → 0.8.1

package/src/views/PostEditor.tsx

@@ -1,97 +1,95 @@
-'use client';
+'use client'
 
-import { useState, useEffect } from 'react';
-import { ArrowLeft, Eye, Loader2, AlertTriangle } from 'lucide-react';
-import { toast } from 'sonner';
-import { TipTapEditor } from '../components/TipTapEditor.js';
-import { SEOPanel, type SEOData } from '../components/SEOPanel.js';
-import { useApiData } from '../lib/useApiData.js';
-import { cmsApi } from '../lib/api.js';
+import { useState, useEffect } from 'react'
+import { ArrowLeft, Eye, Loader2, AlertTriangle } from 'lucide-react'
+import { toast } from 'sonner'
+import { TipTapEditor } from '../components/TipTapEditor.js'
+import { SEOPanel, type SEOData } from '../components/SEOPanel.js'
+import { useApiData } from '../lib/useApiData.js'
+import { cmsApi } from '../lib/api.js'
 
 export interface PostEditorProps {
-  id?: string;
-  onNavigate?: (path: string) => void;
+  id?: string
+  onNavigate?: (path: string) => void
 }
 
 export function PostEditor({ id, onNavigate }: PostEditorProps) {
-  const isNew = !id;
-  const { data, loading, error } = useApiData<any>(
-    isNew ? '' : `/collections/posts/${id}`
-  );
-
-  const [title, setTitle] = useState('');
-  const [content, setContent] = useState('');
-  const [status, setStatus] = useState<'draft' | 'published'>('draft');
-  const [slug, setSlug] = useState('');
-  const [saving, setSaving] = useState(false);
-  const [initialized, setInitialized] = useState(isNew);
-  const [seoData, setSeoData] = useState<SEOData>({});
+  const isNew = !id
+  const { data, loading, error } = useApiData<any>(isNew ? '' : `/collections/posts/${id}`)
+
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+  const [status, setStatus] = useState<'draft' | 'published'>('draft')
+  const [slug, setSlug] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [initialized, setInitialized] = useState(isNew)
+  const [seoData, setSeoData] = useState<SEOData>({})
 
   useEffect(() => {
     if (data && !initialized) {
-      setTitle(data.title ?? '');
-      setContent(data.content ?? data.data?.content ?? '');
-      setStatus(data.status === 'PUBLISHED' ? 'published' : 'draft');
-      setSlug(data.slug ?? '');
-      setInitialized(true);
+      setTitle(data.title ?? '')
+      setContent(data.content ?? data.data?.content ?? '')
+      setStatus(data.status === 'PUBLISHED' ? 'published' : 'draft')
+      setSlug(data.slug ?? '')
+      setInitialized(true)
     }
-  }, [data, initialized]);
+  }, [data, initialized])
 
   const savePost = async () => {
-    setSaving(true);
+    setSaving(true)
     const body = JSON.stringify({
       title,
       content,
       slug,
       status: status === 'published' ? 'PUBLISHED' : 'DRAFT',
-    });
+    })
 
     const res = isNew
       ? await cmsApi('/collections/posts', { method: 'POST', body })
-      : await cmsApi(`/collections/posts/${id}`, { method: 'PUT', body });
+      : await cmsApi(`/collections/posts/${id}`, { method: 'PUT', body })
 
-    setSaving(false);
+    setSaving(false)
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      toast.success('Post saved successfully!');
+      toast.success('Post saved successfully!')
       if (isNew && (res.data as any)?.id) {
-        onNavigate?.(`/posts/${(res.data as any).id}`);
+        onNavigate?.(`/posts/${(res.data as any).id}`)
       }
     }
-  };
+  }
 
   const publishPost = async () => {
-    setSaving(true);
+    setSaving(true)
     const body = JSON.stringify({
       title,
       content,
       slug,
       status: 'PUBLISHED',
-    });
+    })
 
-    const endpoint = isNew ? '/collections/posts' : `/collections/posts/${id}`;
-    const method = isNew ? 'POST' : 'PUT';
-    const res = await cmsApi(endpoint, { method, body });
+    const endpoint = isNew ? '/collections/posts' : `/collections/posts/${id}`
+    const method = isNew ? 'POST' : 'PUT'
+    const res = await cmsApi(endpoint, { method, body })
 
-    setSaving(false);
+    setSaving(false)
     if (res.error) {
-      toast.error(res.error);
+      toast.error(res.error)
     } else {
-      setStatus('published');
-      toast.success('Post published!');
+      setStatus('published')
+      toast.success('Post published!')
       if (isNew && (res.data as any)?.id) {
-        onNavigate?.(`/posts/${(res.data as any).id}`);
+        onNavigate?.(`/posts/${(res.data as any).id}`)
       }
     }
-  };
+  }
 
   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>
-    );
+    )
   }
 
   return (
@@ -167,7 +165,9 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
                   </select>
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-700 mb-1">Publish Date</label>
+                  <label className="block text-xs font-medium text-gray-700 mb-1">
+                    Publish Date
+                  </label>
                   <input
                     type="datetime-local"
                     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"
@@ -221,7 +221,13 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
               </button>
             </div>
 
-            <SEOPanel title={title} slug={slug} content={content} seoData={seoData} onChange={setSeoData} />
+            <SEOPanel
+              title={title}
+              slug={slug}
+              content={content}
+              seoData={seoData}
+              onChange={setSeoData}
+            />
           </div>
         </div>
 
@@ -247,5 +253,5 @@ export function PostEditor({ id, onNavigate }: PostEditorProps) {
         </div>
       </div>
     </div>
-  );
+  )
 }

package/src/views/Posts.tsx

@@ -1,76 +1,99 @@
-'use client';
+'use client'
 
-import { Plus, Search, Trash2, SlidersHorizontal, Pencil, ArrowUpDown, ArrowUp, ArrowDown, Loader2, AlertTriangle } from 'lucide-react';
-import { useState, useMemo } 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 {
+  Plus,
+  Search,
+  Trash2,
+  SlidersHorizontal,
+  Pencil,
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  Loader2,
+  AlertTriangle,
+} from 'lucide-react'
+import { useState, useMemo } 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 PostSortKey = 'title' | 'author' | 'category' | 'status' | 'date';
+type PostSortKey = 'title' | 'author' | 'category' | 'status' | 'date'
 
 export interface PostsProps {
-  onNavigate?: (path: string) => void;
+  onNavigate?: (path: string) => void
 }
 
 export function Posts({ onNavigate }: PostsProps) {
-  const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>('/collections/posts?pageSize=100');
-  const [searchQuery, setSearchQuery] = useState('');
-  const [filterStatus, setFilterStatus] = useState<string>('all');
-  const [filterCategory, setFilterCategory] = useState<string>('all');
-  const [selectedPosts, setSelectedPosts] = useState<number[]>([]);
-  const [sortConfig, setSortConfig] = useState<SortConfig<PostSortKey> | null>(null);
+  const { data, loading, error, refetch } = useApiData<{ docs: any[]; total: number }>(
+    '/collections/posts?pageSize=100',
+  )
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterStatus, setFilterStatus] = useState<string>('all')
+  const [filterCategory, setFilterCategory] = useState<string>('all')
+  const [selectedPosts, setSelectedPosts] = useState<number[]>([])
+  const [sortConfig, setSortConfig] = useState<SortConfig<PostSortKey> | null>(null)
 
-  const posts = data?.docs ?? [];
+  const posts = data?.docs ?? []
 
   const filteredAndSorted = useMemo(() => {
     let results = posts.filter((post: any) => {
-      const matchesSearch = (post.title ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (post.author ?? '').toLowerCase().includes(searchQuery.toLowerCase());
-      const matchesStatus = filterStatus === 'all' || (post.status ?? '').toLowerCase() === filterStatus.toLowerCase();
-      const matchesCategory = filterCategory === 'all' || (post.category ?? '').toLowerCase() === filterCategory.toLowerCase();
-      return matchesSearch && matchesStatus && matchesCategory;
-    });
+      const matchesSearch =
+        (post.title ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
+        (post.author ?? '').toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesStatus =
+        filterStatus === 'all' || (post.status ?? '').toLowerCase() === filterStatus.toLowerCase()
+      const matchesCategory =
+        filterCategory === 'all' ||
+        (post.category ?? '').toLowerCase() === filterCategory.toLowerCase()
+      return matchesSearch && matchesStatus && matchesCategory
+    })
 
     if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (p: any) => [p.title, p.author ?? '', p.category ?? '']);
+      results = sortByRelevance(results, searchQuery, (p: any) => [
+        p.title,
+        p.author ?? '',
+        p.category ?? '',
+      ])
     } 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;
-  }, [posts, searchQuery, filterStatus, filterCategory, sortConfig]);
+    return results
+  }, [posts, searchQuery, filterStatus, filterCategory, sortConfig])
 
   const handleSelectAll = (checked: boolean) => {
-    setSelectedPosts(checked ? filteredAndSorted.map((p: any) => p.id) : []);
-  };
+    setSelectedPosts(checked ? filteredAndSorted.map((p: any) => p.id) : [])
+  }
 
   const handleSelectPost = (id: number) => {
-    setSelectedPosts(prev => prev.includes(id) ? prev.filter(pid => pid !== id) : [...prev, id]);
-  };
+    setSelectedPosts((prev) =>
+      prev.includes(id) ? prev.filter((pid) => pid !== id) : [...prev, id],
+    )
+  }
 
   const handleBulkDelete = async () => {
     for (const id of selectedPosts) {
-      await cmsApi(`/collections/posts/${id}`, { method: 'DELETE' });
+      await cmsApi(`/collections/posts/${id}`, { method: 'DELETE' })
     }
-    toast.success(`${selectedPosts.length} posts deleted`);
-    setSelectedPosts([]);
-    refetch();
-  };
+    toast.success(`${selectedPosts.length} posts deleted`)
+    setSelectedPosts([])
+    refetch()
+  }
 
   const handleDelete = async (id: number) => {
-    await cmsApi(`/collections/posts/${id}`, { method: 'DELETE' });
-    toast.success('Post deleted');
-    setSelectedPosts(prev => prev.filter(pid => pid !== id));
-    refetch();
-  };
+    await cmsApi(`/collections/posts/${id}`, { method: 'DELETE' })
+    toast.success('Post deleted')
+    setSelectedPosts((prev) => prev.filter((pid) => pid !== id))
+    refetch()
+  }
 
   function SortHeader({ label, sortKey }: { label: string; sortKey: PostSortKey }) {
-    const active = sortConfig?.key === sortKey;
+    const active = sortConfig?.key === sortKey
     return (
       <button
         type="button"
@@ -79,12 +102,16 @@ export function Posts({ onNavigate }: PostsProps) {
       >
         {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) {
@@ -92,7 +119,7 @@ export function Posts({ onNavigate }: PostsProps) {
       <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 (
@@ -101,7 +128,12 @@ export function Posts({ onNavigate }: PostsProps) {
         <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>
       )}
 
@@ -124,21 +156,38 @@ export function Posts({ onNavigate }: PostsProps) {
         <div className="p-3 flex flex-col gap-3">
           <div className="relative">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-            <input type="text" placeholder="Search posts..." 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" />
+            <input
+              type="text"
+              placeholder="Search posts..."
+              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"
+            />
           </div>
           <div className="flex flex-col sm:flex-row gap-2">
-            <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">
+            <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"
+            >
               <option value="all">All Status</option>
               <option value="published">Published</option>
               <option value="draft">Draft</option>
             </select>
-            <select value={filterCategory} onChange={(e) => setFilterCategory(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">
+            <select
+              value={filterCategory}
+              onChange={(e) => setFilterCategory(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"
+            >
               <option value="all">All Categories</option>
               <option value="technology">Technology</option>
               <option value="design">Design</option>
               <option value="business">Business</option>
             </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">
+            <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"
+            >
               <SlidersHorizontal className="w-4 h-4" />
               <span className="hidden sm:inline">More Filters</span>
             </button>
@@ -149,10 +198,24 @@ export function Posts({ onNavigate }: PostsProps) {
       {selectedPosts.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">
-            <span className="text-sm text-blue-900">{selectedPosts.length} post{selectedPosts.length !== 1 ? 's' : ''} selected</span>
+            <span className="text-sm text-blue-900">
+              {selectedPosts.length} post{selectedPosts.length !== 1 ? 's' : ''} selected
+            </span>
             <div className="flex items-center gap-2">
-              <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">Delete</button>
-              <button type="button" onClick={() => setSelectedPosts([])} 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">Cancel</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"
+              >
+                Delete
+              </button>
+              <button
+                type="button"
+                onClick={() => setSelectedPosts([])}
+                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"
+              >
+                Cancel
+              </button>
             </div>
           </div>
         </div>
@@ -161,7 +224,12 @@ export function Posts({ onNavigate }: PostsProps) {
       {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">No posts yet</p>
-          <button onClick={() => onNavigate?.('/posts/new')} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">Create your first post</button>
+          <button
+            onClick={() => onNavigate?.('/posts/new')}
+            className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            Create your first post
+          </button>
         </div>
       ) : (
         <>
@@ -171,37 +239,82 @@ export function Posts({ onNavigate }: PostsProps) {
                 <thead className="bg-gray-50 border-b border-gray-200 sticky top-0">
                   <tr>
                     <th className="w-8 px-3 py-2 text-left">
-                      <input type="checkbox" checked={selectedPosts.length === filteredAndSorted.length && filteredAndSorted.length > 0} onChange={(e) => handleSelectAll(e.target.checked)} className="rounded border-gray-300" />
+                      <input
+                        type="checkbox"
+                        checked={
+                          selectedPosts.length === filteredAndSorted.length &&
+                          filteredAndSorted.length > 0
+                        }
+                        onChange={(e) => handleSelectAll(e.target.checked)}
+                        className="rounded border-gray-300"
+                      />
+                    </th>
+                    <th className="px-3 py-2 text-left">
+                      <SortHeader label="Title" sortKey="title" />
+                    </th>
+                    <th className="px-3 py-2 text-left">
+                      <SortHeader label="Author" sortKey="author" />
+                    </th>
+                    <th className="px-3 py-2 text-left">
+                      <SortHeader label="Category" sortKey="category" />
+                    </th>
+                    <th className="px-3 py-2 text-left">
+                      <SortHeader label="Status" sortKey="status" />
+                    </th>
+                    <th className="px-3 py-2 text-left">
+                      <SortHeader label="Date" sortKey="date" />
+                    </th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">
+                      Actions
                     </th>
-                    <th className="px-3 py-2 text-left"><SortHeader label="Title" sortKey="title" /></th>
-                    <th className="px-3 py-2 text-left"><SortHeader label="Author" sortKey="author" /></th>
-                    <th className="px-3 py-2 text-left"><SortHeader label="Category" sortKey="category" /></th>
-                    <th className="px-3 py-2 text-left"><SortHeader label="Status" sortKey="status" /></th>
-                    <th className="px-3 py-2 text-left"><SortHeader label="Date" sortKey="date" /></th>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-700">Actions</th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200">
                   {filteredAndSorted.map((post: any) => (
                     <tr key={post.id} className="hover:bg-gray-50 transition-colors">
                       <td className="px-3 py-2">
-                        <input type="checkbox" checked={selectedPosts.includes(post.id)} onChange={() => handleSelectPost(post.id)} className="rounded border-gray-300" />
+                        <input
+                          type="checkbox"
+                          checked={selectedPosts.includes(post.id)}
+                          onChange={() => handleSelectPost(post.id)}
+                          className="rounded border-gray-300"
+                        />
                       </td>
                       <td className="px-3 py-2">
-                        <button type="button" onClick={() => onNavigate?.(`/posts/${post.id}`)} className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left">{post.title}</button>
+                        <button
+                          type="button"
+                          onClick={() => onNavigate?.(`/posts/${post.id}`)}
+                          className="font-medium text-gray-900 hover:text-blue-600 text-sm text-left"
+                        >
+                          {post.title}
+                        </button>
                       </td>
                       <td className="px-3 py-2 text-sm text-gray-600">{post.author}</td>
                       <td className="px-3 py-2 text-sm text-gray-600">{post.category}</td>
                       <td className="px-3 py-2">
-                        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{post.status}</span>
+                        <span
+                          className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                        >
+                          {post.status}
+                        </span>
                       </td>
                       <td className="px-3 py-2 text-sm text-gray-600">{post.date}</td>
                       <td className="px-3 py-2">
                         <div className="flex items-center gap-2">
-                          <button type="button" onClick={() => onNavigate?.(`/posts/${post.id}`)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Edit">
+                          <button
+                            type="button"
+                            onClick={() => onNavigate?.(`/posts/${post.id}`)}
+                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            title="Edit"
+                          >
                             <Pencil className="w-4 h-4 text-gray-600" />
                           </button>
-                          <button type="button" onClick={() => handleDelete(post.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors" title="Delete">
+                          <button
+                            type="button"
+                            onClick={() => handleDelete(post.id)}
+                            className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                            title="Delete"
+                          >
                             <Trash2 className="w-4 h-4 text-red-600" />
                           </button>
                         </div>
@@ -218,17 +331,36 @@ export function Posts({ onNavigate }: PostsProps) {
               {filteredAndSorted.map((post: any) => (
                 <div key={post.id} className="p-3">
                   <div className="flex items-start gap-3">
-                    <input type="checkbox" checked={selectedPosts.includes(post.id)} onChange={() => handleSelectPost(post.id)} className="rounded border-gray-300 mt-1" />
+                    <input
+                      type="checkbox"
+                      checked={selectedPosts.includes(post.id)}
+                      onChange={() => handleSelectPost(post.id)}
+                      className="rounded border-gray-300 mt-1"
+                    />
                     <div className="flex-1 min-w-0">
-                      <button type="button" onClick={() => onNavigate?.(`/posts/${post.id}`)} className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left">{post.title}</button>
+                      <button
+                        type="button"
+                        onClick={() => onNavigate?.(`/posts/${post.id}`)}
+                        className="font-medium text-sm text-gray-900 hover:text-blue-600 block mb-1 text-left"
+                      >
+                        {post.title}
+                      </button>
                       <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 mb-2">
                         <span>{post.author}</span>
                         <span>•</span>
                         <span>{post.date}</span>
-                        <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>{post.status}</span>
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-xs font-medium ${post.status === 'Published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}
+                        >
+                          {post.status}
+                        </span>
                       </div>
                     </div>
-                    <button type="button" onClick={() => handleDelete(post.id)} className="p-1.5 hover:bg-gray-100 rounded transition-colors">
+                    <button
+                      type="button"
+                      onClick={() => handleDelete(post.id)}
+                      className="p-1.5 hover:bg-gray-100 rounded transition-colors"
+                    >
                       <Trash2 className="w-4 h-4 text-red-600" />
                     </button>
                   </div>
@@ -239,5 +371,5 @@ export function Posts({ onNavigate }: PostsProps) {
         </>
       )}
     </div>
-  );
+  )
 }