Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | 18x 18x 1x 3x 18x 6x | import { FolderPlus, Plus } from 'lucide-react'
import { useCollectionsPage } from '../hooks/useCollectionsPage'
import NavHeader from '../components/NavHeader'
import CreateCollectionForm from '../components/CreateCollectionForm'
import CollectionCard from '../components/CollectionCard'
import { CollectionGridSkeleton } from '../components/Skeletons'
export default function Collections() {
const {
pendingRecipeId,
collections,
loading,
showCreateForm,
setShowCreateForm,
newCollectionName,
setNewCollectionName,
creating,
handleCreateCollection,
handleCollectionClick,
handleCancelCreate,
} = useCollectionsPage()
return (
<div className="min-h-screen bg-background">
<NavHeader />
<main className="px-4 py-6">
<div className="mx-auto max-w-4xl">
<CollectionsPageHeader onCreateClick={() => setShowCreateForm(true)} />
{showCreateForm && (
<CreateCollectionForm
name={newCollectionName}
onNameChange={setNewCollectionName}
creating={creating}
onSubmit={handleCreateCollection}
onCancel={handleCancelCreate}
/>
)}
{pendingRecipeId && (
<div className="mb-4 rounded-lg border border-primary/30 bg-primary/10 p-3 text-sm text-foreground">
Select a collection or create a new one to add the recipe
</div>
)}
{loading ? (
<CollectionGridSkeleton count={8} />
) : collections.length > 0 ? (
<div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
{collections.map((collection) => (
<CollectionCard
key={collection.id}
collection={collection}
highlighted={!!pendingRecipeId}
onClick={() => handleCollectionClick(collection.id)}
/>
))}
</div>
) : (
<EmptyCollections onCreateClick={() => setShowCreateForm(true)} />
)}
</div>
</main>
</div>
)
}
function CollectionsPageHeader({ onCreateClick }: { onCreateClick: () => void }) {
return (
<div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-medium text-foreground">Collections</h2>
<button
onClick={onCreateClick}
className="flex items-center gap-2 rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
<Plus className="h-4 w-4" />
New
</button>
</div>
)
}
function EmptyCollections({ onCreateClick }: { onCreateClick: () => void }) {
return (
<div className="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-border py-12">
<div className="mb-4 rounded-full bg-muted p-4">
<FolderPlus className="h-8 w-8 text-muted-foreground" />
</div>
<h3 className="mb-2 text-lg font-medium text-foreground">No collections yet</h3>
<p className="mb-4 text-center text-muted-foreground">Create one to organize your recipes!</p>
<button onClick={onCreateClick} className="rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90">
Create Collection
</button>
</div>
)
}
|