63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import type { SetupChecklistItem } from "../types";
|
||
|
||
export function SetupChecklist({
|
||
items,
|
||
completionPercent,
|
||
}: {
|
||
items: SetupChecklistItem[];
|
||
completionPercent?: number | null;
|
||
}) {
|
||
if (!items.length) {
|
||
return (
|
||
<p className="text-sm text-gray-500">
|
||
چکلیست راهاندازی از commercial checklist API یا محصولات کشفشده ساخته میشود.
|
||
</p>
|
||
);
|
||
}
|
||
|
||
const doneCount = items.filter((i) => i.done).length;
|
||
const computed =
|
||
completionPercent != null
|
||
? completionPercent
|
||
: Math.round((doneCount / items.length) * 100);
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
<div className="flex items-center justify-between text-xs text-gray-500">
|
||
<span>پیشرفت راهاندازی</span>
|
||
<span className="font-semibold text-secondary">{computed}%</span>
|
||
</div>
|
||
<div className="h-2 overflow-hidden rounded-full bg-gray-100">
|
||
<div
|
||
className="h-full rounded-full bg-primary transition-all"
|
||
style={{ width: `${Math.min(100, Math.max(0, computed))}%` }}
|
||
/>
|
||
</div>
|
||
<ul className="space-y-2">
|
||
{items.map((item) => (
|
||
<li
|
||
key={item.id}
|
||
className="flex items-center justify-between gap-3 rounded-xl border border-gray-100 bg-white px-3 py-2.5 text-sm"
|
||
>
|
||
<span className="text-secondary">
|
||
{item.done ? "✓ " : item.required ? "● " : "○ "}
|
||
{item.label}
|
||
</span>
|
||
{item.href ? (
|
||
<Link
|
||
href={item.href}
|
||
className="shrink-0 text-xs font-medium text-primary hover:underline"
|
||
>
|
||
رفتن
|
||
</Link>
|
||
) : null}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|