105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { RecipeCard } from "@/components/recipe-card"
|
|
import { recipes } from "@/data/recipes"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { LayoutGrid, List } from 'lucide-react'
|
|
import { Heart, Share2 } from 'lucide-react'; // Import missing icons
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { SearchFilters } from "@/components/search-filters";
|
|
|
|
|
|
export default function RecipeList() {
|
|
const [viewMode, setViewMode] = useState<"grid" | "list">("grid")
|
|
|
|
return (
|
|
<div>
|
|
<SearchFilters />
|
|
<Tabs defaultValue="grid" className="mb-6">
|
|
<div className="flex justify-between items-center">
|
|
<h2 className="text-xl font-semibold">
|
|
{recipes.length} Recipes
|
|
</h2>
|
|
<TabsList>
|
|
<TabsTrigger value="grid" onClick={() => setViewMode("grid")}>
|
|
<LayoutGrid className="h-4 w-4 mr-2" />
|
|
Grid
|
|
</TabsTrigger>
|
|
<TabsTrigger value="list" onClick={() => setViewMode("list")}>
|
|
<List className="h-4 w-4 mr-2" />
|
|
List
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
</div>
|
|
|
|
<TabsContent value="grid" className="mt-6">
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{recipes.map(recipe => (
|
|
<RecipeCard key={recipe.id} recipe={recipe} />
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="list" className="mt-6">
|
|
<div className="space-y-4">
|
|
{recipes.map(recipe => (
|
|
<div key={recipe.id} className="border rounded-lg overflow-hidden">
|
|
<div className="flex flex-col sm:flex-row">
|
|
<div className="sm:w-1/3 h-48 sm:h-auto">
|
|
<img
|
|
src={recipe.imageUrl || "/placeholder.svg"}
|
|
alt={recipe.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="p-4 sm:w-2/3 flex flex-col">
|
|
<h3 className="font-semibold text-lg">{recipe.title}</h3>
|
|
<div className="flex items-center text-muted-foreground text-sm mt-1">
|
|
<span>{recipe.cookingTime} mins</span>
|
|
<span className="mx-2">•</span>
|
|
<span className="capitalize">{recipe.difficulty}</span>
|
|
</div>
|
|
<p className="text-muted-foreground mt-2 flex-grow">
|
|
{recipe.description}
|
|
</p>
|
|
<div className="flex flex-wrap gap-1.5 mt-3">
|
|
{recipe.tags.map(tag => (
|
|
<Badge key={tag} variant="secondary">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
<div className="flex justify-between items-center mt-4">
|
|
<Button>View Recipe</Button>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Heart
|
|
className={`h-5 w-5 ${recipe.isFavorite ? 'fill-red-500 text-red-500' : ''}`}
|
|
/>
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Share2 className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|