b8dd591428
- Create 16 diet/weight methods across 5 categories with full content - Add MethodsPage with search, filters (category/difficulty/effectiveness) - Add MethodDetailPage with pros/cons, scientific basis, contraindications - Add BmiCalculatorPage with visual BMI scale - Create reusable components: Badge, DifficultyBadge, EffectivenessIndicator, BookmarkButton, MethodCard, SearchBar, FilterPanel - Add useLocalStorage and useBookmarks hooks for localStorage persistence - Set up React Router with all routes Co-authored-by: Cursor <cursoragent@cursor.com>
59 lines
2.0 KiB
TypeScript
59 lines
2.0 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { clsx } from "clsx";
|
|
import type { DietMethod } from "@/types/method";
|
|
import { CATEGORIES } from "@/types/method";
|
|
import { Badge } from "@/components/Badge";
|
|
import { DifficultyBadge } from "@/components/DifficultyBadge";
|
|
import { EffectivenessIndicator } from "@/components/EffectivenessIndicator";
|
|
import { BookmarkButton } from "@/components/BookmarkButton";
|
|
|
|
interface MethodCardProps {
|
|
method: DietMethod;
|
|
isBookmarked: boolean;
|
|
onToggleBookmark: (id: string) => void;
|
|
}
|
|
|
|
export function MethodCard({ method, isBookmarked, onToggleBookmark }: MethodCardProps) {
|
|
const category = CATEGORIES[method.category];
|
|
|
|
return (
|
|
<Link
|
|
to={`/methods/${method.slug}`}
|
|
className={clsx(
|
|
"group relative flex flex-col rounded-2xl border border-gray-200 bg-white p-6 transition-all",
|
|
"hover:border-primary-300 hover:shadow-lg hover:shadow-primary-500/5",
|
|
"dark:border-gray-800 dark:bg-gray-900 dark:hover:border-primary-700",
|
|
)}
|
|
>
|
|
<div className="absolute right-4 top-4">
|
|
<BookmarkButton
|
|
isBookmarked={isBookmarked}
|
|
onClick={() => onToggleBookmark(method.id)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-2xl" aria-hidden="true">{category.icon}</span>
|
|
<Badge variant={category.color}>{category.label}</Badge>
|
|
<DifficultyBadge difficulty={method.difficulty} />
|
|
</div>
|
|
|
|
<h3 className="mt-3 text-lg font-semibold text-gray-900 group-hover:text-primary-600 dark:text-white dark:group-hover:text-primary-400">
|
|
{method.title}
|
|
</h3>
|
|
|
|
<p className="mt-2 flex-1 text-sm text-gray-500 dark:text-gray-400">
|
|
{method.shortDescription}
|
|
</p>
|
|
|
|
<div className="mt-4">
|
|
<EffectivenessIndicator effectiveness={method.effectiveness} />
|
|
</div>
|
|
|
|
<div className="mt-3 text-xs text-gray-400 dark:text-gray-500">
|
|
{method.timeframe}
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|