TorbatYar/frontend/modules/commercial/components/CommercialSidebar.tsx

68 lines
2.4 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui";
import { loadCommercialProducts } from "../adapters";
import type { CommercialProduct } from "../types";
import { resolveProductLaunchUrl } from "../types";
/** Dynamic sidebar — product launch URLs from registry metadata only. */
export function CommercialSidebar({ className = "" }: { className?: string }) {
const [products, setProducts] = useState<CommercialProduct[]>([]);
useEffect(() => {
void loadCommercialProducts().then((r) => {
if (r.availability === "ready") {
setProducts(
r.data
.filter((p) => p.visibility !== "hidden")
.filter((p) => resolveProductLaunchUrl(p))
);
}
});
}, []);
return (
<aside className={`rounded-2xl border border-gray-100 bg-white p-4 shadow-sm ${className}`}>
<p className="text-xs font-semibold tracking-wide text-gray-400">محصولات</p>
<nav className="mt-3 flex flex-col gap-1">
<Link href="/dashboard" className="rounded-lg px-2 py-1.5 text-sm hover:bg-gray-50">
فضای کاری
</Link>
<Link href="/apps" className="rounded-lg px-2 py-1.5 text-sm hover:bg-gray-50">
Products
</Link>
<Link href="/billing" className="rounded-lg px-2 py-1.5 text-sm hover:bg-gray-50">
اشتراک و پرداخت
</Link>
<div className="my-2 border-t border-gray-100" />
{products.length ? (
products.map((p) => {
const href = resolveProductLaunchUrl(p) || "/apps";
return (
<Link
key={p.product_code}
href={href}
className="rounded-lg px-2 py-1.5 text-sm text-secondary hover:bg-gray-50"
>
{p.icon ? <span className="me-1">{p.icon}</span> : null}
{p.display_name}
</Link>
);
})
) : (
<p className="px-2 text-xs text-gray-400">محصولی کشف نشده</p>
)}
</nav>
<div className="mt-4">
<Link href="/">
<Button variant="ghost" size="sm" className="w-full">
ارزیابی مجدد
</Button>
</Link>
</div>
</aside>
);
}