Initial frontend import

src/components/ResourceListFooter.tsx

@@ -0,0 +1,54 @@
+type T = (k: string) => string;
+
+export function ResourceListFooter({
+  page,
+  limit,
+  total,
+  t,
+  onPrev,
+  onNext,
+}: {
+  page: number;
+  limit: number;
+  total: number;
+  t: T;
+  onPrev: () => void;
+  onNext: () => void;
+}) {
+  const pages = Math.max(1, Math.ceil(total / limit));
+  const from = total === 0 ? 0 : (page - 1) * limit + 1;
+  const to = Math.min(page * limit, total);
+  return (
+    <div className="flex flex-col items-center justify-between gap-3 border-t border-ark-line pt-6 sm:flex-row">
+      <p className="text-sm text-neutral-400">
+        {t("listRange")
+          .replace("{{from}}", String(from))
+          .replace("{{to}}", String(to))
+          .replace("{{total}}", String(total))}
+      </p>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          disabled={page <= 1}
+          onClick={onPrev}
+          className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none transition hover:border-ark-gold disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+        >
+          {t("paginationPrev")}
+        </button>
+        <span className="text-sm text-ark-muted tabular-nums">
+          {t("pageIndicator")
+            .replace("{{c}}", String(page))
+            .replace("{{p}}", String(pages))}
+        </span>
+        <button
+          type="button"
+          disabled={page >= pages}
+          onClick={onNext}
+          className="rounded-full border border-ark-line px-4 py-2 text-sm text-neutral-200 outline-none transition hover:border-ark-gold disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+        >
+          {t("paginationNext")}
+        </button>
+      </div>
+    </div>
+  );
+}