Initial frontend import

2026-05-16 00:18:22 +08:00
commit 9c54ffec76
99 changed files with 14992 additions and 0 deletions
--- a/src/components/LatestUpdateRow.tsx
+++ b/src/components/LatestUpdateRow.tsx
@@ -0,0 +1,72 @@
+import { Link } from "react-router-dom";
+import type { Resource } from "../api";
+import { CategoryIcon } from "./CategoryIcon";
+import { useI18n } from "../i18n";
+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 dateStr = formatDateYmd(r.updatedAt);
+
+  return (
+    <Link to={`/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="min-w-0 flex-1 py-0.5">
+        <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
+          {r.title}
+        </div>
+        <div className="mt-4 grid gap-1 text-sm text-[#9b9ca6] md:mt-6">
+          <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="min-w-0 flex-1 py-0.5">
+        <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
+          即将到来
+        </div>
+        <div className="mt-4 grid gap-1 text-sm text-[#9b9ca6] md:mt-6">
+          <span>更多内容准备中</span>
+          <span>Coming soon</span>
+        </div>
+      </div>
+    </article>
+  );
+}