68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type CSSProperties } from "react";
|
|
import { CATEGORIES } from "@/lib/ui-config";
|
|
import type { CategoryId } from "@/lib/types";
|
|
import { Icons } from "./icons";
|
|
|
|
export function CategoryTile({
|
|
category,
|
|
size = "sm",
|
|
}: {
|
|
category: CategoryId;
|
|
size?: "sm" | "md" | "lg";
|
|
}) {
|
|
const cat = CATEGORIES[category] || CATEGORIES.other;
|
|
const Icon = Icons[cat.icon as keyof typeof Icons];
|
|
const iconSize = { sm: 22, md: 28, lg: 40 }[size];
|
|
return (
|
|
<div
|
|
className="cat-tile"
|
|
style={{ ["--cat-color" as string]: cat.color } as CSSProperties}
|
|
>
|
|
<Icon size={iconSize} stroke={1.6} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function CoverImage({
|
|
src,
|
|
alt,
|
|
category,
|
|
style,
|
|
}: {
|
|
src?: string | null;
|
|
alt?: string;
|
|
category: CategoryId;
|
|
style?: CSSProperties;
|
|
}) {
|
|
const [err, setErr] = useState(false);
|
|
if (!src || err) {
|
|
return (
|
|
<div
|
|
className="cover-fallback"
|
|
style={
|
|
{
|
|
...style,
|
|
"--cat-color": (CATEGORIES[category] || CATEGORIES.other).color,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
} as CSSProperties
|
|
}
|
|
>
|
|
<CategoryTile category={category} size="md" />
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
onError={() => setErr(true)}
|
|
style={{ objectFit: "cover", ...style }}
|
|
/>
|
|
);
|
|
}
|