128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
// Read-only view of GET /timer/options — the option sets the app uses to build
|
|
// the meditation timer (durations, intervals, default bells, etc.). The exact
|
|
// shape is backend-defined, so we render it generically: primitive values as a
|
|
// definition list, arrays of objects as small tables.
|
|
|
|
import { useItem } from "@/lib/useResource";
|
|
import { Button, Card, PageHeader, Spinner, Badge, EmptyState } from "@/components/ui";
|
|
import { toFa } from "@/lib/utils";
|
|
|
|
function Primitive({ value }: { value: unknown }) {
|
|
if (typeof value === "boolean") {
|
|
return <Badge tone={value ? "success" : "neutral"}>{value ? "بله" : "خیر"}</Badge>;
|
|
}
|
|
if (value === null || value === undefined) return <span className="text-muted">—</span>;
|
|
return <span>{toFa(String(value))}</span>;
|
|
}
|
|
|
|
function ArrayBlock({ items }: { items: unknown[] }) {
|
|
if (!items.length) return <EmptyState message="موردی وجود ندارد." />;
|
|
|
|
// Array of objects -> table of their union of keys.
|
|
if (items.every((it) => it && typeof it === "object" && !Array.isArray(it))) {
|
|
const keys = Array.from(
|
|
new Set(items.flatMap((it) => Object.keys(it as object))),
|
|
);
|
|
return (
|
|
<div className="overflow-x-auto rounded-xl border border-border">
|
|
<table className="w-full text-right text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border bg-surface-muted text-muted">
|
|
{keys.map((k) => (
|
|
<th key={k} className="px-3 py-2 font-medium">
|
|
{k}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((it, i) => (
|
|
<tr key={i} className="border-b border-border last:border-0">
|
|
{keys.map((k) => (
|
|
<td key={k} className="px-3 py-2">
|
|
<Primitive value={(it as Record<string, unknown>)[k]} />
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Array of primitives -> chips.
|
|
return (
|
|
<div className="flex flex-wrap gap-2">
|
|
{items.map((it, i) => (
|
|
<Badge key={i}>{toFa(String(it))}</Badge>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function TimerOptionsPage() {
|
|
const { data, loading, error, reload } = useItem<Record<string, unknown>>(
|
|
"/timer/options",
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title="گزینههای تایمر"
|
|
subtitle="مقادیر پیشفرض و فهرستهایی که اپلیکیشن برای ساخت تایمر مدیتیشن استفاده میکند."
|
|
/>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center py-16">
|
|
<Spinner className="h-8 w-8" />
|
|
</div>
|
|
) : error ? (
|
|
<EmptyState
|
|
icon="⚠️"
|
|
title="خطا در دریافت اطلاعات"
|
|
message={error}
|
|
action={
|
|
<Button variant="secondary" onClick={reload}>
|
|
تلاش دوباره
|
|
</Button>
|
|
}
|
|
/>
|
|
) : !data || typeof data !== "object" || !Object.keys(data).length ? (
|
|
<EmptyState
|
|
title="گزینهای موجود نیست"
|
|
message="هیچ گزینهای از سرور دریافت نشد."
|
|
/>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
|
{Object.entries(data).map(([key, value]) => (
|
|
<Card key={key}>
|
|
<h2 className="mb-3 font-bold text-foreground">{key}</h2>
|
|
{Array.isArray(value) ? (
|
|
<ArrayBlock items={value} />
|
|
) : value && typeof value === "object" ? (
|
|
<dl className="flex flex-col gap-2 text-sm">
|
|
{Object.entries(value as Record<string, unknown>).map(
|
|
([k, v]) => (
|
|
<div key={k} className="flex justify-between gap-3 border-b border-border pb-1.5 last:border-0">
|
|
<dt className="text-muted">{k}</dt>
|
|
<dd>
|
|
<Primitive value={v} />
|
|
</dd>
|
|
</div>
|
|
),
|
|
)}
|
|
</dl>
|
|
) : (
|
|
<Primitive value={value} />
|
|
)}
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|