75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import type { Resource } from "../api";
|
|
import { CategoryIcon } from "./CategoryIcon";
|
|
import { useI18n } from "../i18n";
|
|
import { useLocalizedPath } from "../useLocalizedPath";
|
|
import { resourceTypeLabel } from "../resourceTypeLabels";
|
|
import { formatDateYmd } from "../utils/format";
|
|
|
|
const LATEST_CARD_CLASS =
|
|
"flex min-h-[106px] items-start gap-4 overflow-hidden rounded-xl border border-ark-line bg-ark-panel p-4 outline-none transition hover:border-ark-gold/45 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:min-h-[138px] md:p-5";
|
|
|
|
export function LatestUpdateRow({
|
|
r,
|
|
iconKey,
|
|
}: {
|
|
r: Resource;
|
|
iconKey: string;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const lp = useLocalizedPath();
|
|
const dateStr = formatDateYmd(r.updatedAt);
|
|
|
|
return (
|
|
<Link to={lp(`/resource/${r.id}`)} className={LATEST_CARD_CLASS}>
|
|
<div className="flex shrink-0 items-center justify-center pt-0.5">
|
|
<CategoryIcon
|
|
iconKey={iconKey}
|
|
categorySlug={r.categorySlug}
|
|
className="h-10 w-10 text-ark-gold"
|
|
/>
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
|
|
<div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
|
|
{r.title}
|
|
</div>
|
|
<div className="mt-auto grid gap-1 text-sm text-[#9b9ca6]">
|
|
<span>{r.categoryName}</span>
|
|
<span>
|
|
{resourceTypeLabel(t, r.type)}
|
|
<time className="mx-2 text-ark-muted" dateTime={r.updatedAt}>
|
|
{dateStr}
|
|
</time>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
const comingSoonIconKeys = ["image", "film", "book", "gift", "folder"];
|
|
|
|
export function ComingSoonLatestUpdateRow({ index = 0 }: { index?: number }) {
|
|
const iconKey = comingSoonIconKeys[index % comingSoonIconKeys.length];
|
|
|
|
return (
|
|
<article
|
|
className={`${LATEST_CARD_CLASS} cursor-default opacity-95 hover:border-ark-line`}
|
|
aria-label="即将到来"
|
|
>
|
|
<div className="flex shrink-0 items-center justify-center pt-0.5">
|
|
<CategoryIcon iconKey={iconKey} className="h-10 w-10 text-ark-gold" />
|
|
</div>
|
|
<div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
|
|
<div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
|
|
即将到来
|
|
</div>
|
|
<div className="mt-auto grid gap-1 text-sm text-[#9b9ca6]">
|
|
<span>更多内容准备中</span>
|
|
<span>Coming soon</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|