40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
/**
|
||
* # 组件 产品卡片 ProductCard（Tailwind + shadcn/ui 实现）
|
||
* 产品网格卡片：图 / 标题 / Read more 链接。首页、列表页、搜索页复用。
|
||
* 整卡为链接，文字继承品牌橙（与原 .card 于 a 上同色一致）。
|
||
*/
|
||
import { Link } from "@tanstack/react-router";
|
||
import { useT } from "~/i18n";
|
||
|
||
/** # 类型 产品卡片数据（listProducts.items 元素子集） */
|
||
export type ProductCardData = {
|
||
id: number;
|
||
slug: string;
|
||
title: string;
|
||
sku: string | null;
|
||
imageUrl: string | null;
|
||
imageAlt?: string | null;
|
||
};
|
||
|
||
/** # 组件 产品卡片 */
|
||
export function ProductCard({ p }: { p: ProductCardData }) {
|
||
const t = useT();
|
||
return (
|
||
<Link
|
||
to="/product/$slug/"
|
||
params={{ slug: p.slug }}
|
||
className="block overflow-hidden rounded-lg border border-line bg-white text-brand transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(16,42,76,0.1)]"
|
||
>
|
||
<div className="flex aspect-[4/3] items-center justify-center bg-white p-3">
|
||
{p.imageUrl ? <img src={p.imageUrl} alt={p.imageAlt || p.title} loading="lazy" className="max-h-full object-contain" /> : null}
|
||
</div>
|
||
<div className="px-4 pt-3.5 pb-[18px] text-center">
|
||
<div className="mb-1.5 text-[15px] leading-[1.45] font-semibold">{p.title}</div>
|
||
<span className="mt-2.5 inline-block rounded-[4px] border border-brand bg-white px-4 py-1.5 text-sm font-semibold text-brand hover:bg-soft">
|
||
{t("card_read_more")}
|
||
</span>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|