3d197eb7e3
- Create new frontend project directory with Next.js 15 + React 19 - Migrate from pnpm to bun for faster package management - Add TanStack Query + Axios for dynamic data fetching - Create comprehensive Makefile with development commands - Setup API layer with query hooks and error handling - Configure environment variables and bun settings - Add TypeScript type checking and project documentation - Update CLAUDE.md with bun-specific development workflow
37 lines
1017 B
TypeScript
37 lines
1017 B
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
interface FilterBarProps {
|
|
activeCategory: string
|
|
onFilter: (category: string) => void
|
|
}
|
|
|
|
export function FilterBar({ activeCategory, onFilter }: FilterBarProps) {
|
|
const categories = [
|
|
{ id: "all", name: "全部作品" },
|
|
{ id: "urban", name: "城市风光" },
|
|
{ id: "nature", name: "自然风景" },
|
|
{ id: "portrait", name: "人像摄影" },
|
|
{ id: "street", name: "街头摄影" },
|
|
{ id: "architecture", name: "建筑摄影" },
|
|
{ id: "macro", name: "微距摄影" },
|
|
]
|
|
|
|
return (
|
|
<div className="flex flex-wrap justify-center gap-2 mb-12">
|
|
{categories.map((category) => (
|
|
<Button
|
|
key={category.id}
|
|
variant={activeCategory === category.id ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => onFilter(category.id)}
|
|
className="transition-all duration-200 hover:scale-105"
|
|
>
|
|
{category.name}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|