Goutam
0b76c97445
- Team Management: crew hero, member gallery + list, role rings, invites - Support Center: command-center Overview (live status, pulse ribbon, signal) - AI Assistant: animated orb rings + textured stage - Rules: rulebook cards (watermark, uniform orange), 3-up responsive grid - Brand: --grad-brand now solid rgba(253,169,19,.92), white text/icons on orange, no orange gradients; dark surfaces (--card-grad/--panel-2) #060608 - Segmented tabs get an on-brand orange active state Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
// ============================================================
|
||
// Rules Checklist — the 1–13 business rules in one place.
|
||
// A single filter bar + a uniform (brand-orange) card grid:
|
||
// each rule card has a ghost watermark number, an icon and an
|
||
// "enforced" footer. No per-category colours.
|
||
// (house 181 · OTP to registered mobile · KYC two-docs ·
|
||
// password policy · ticket lifecycle · …)
|
||
// ============================================================
|
||
|
||
import { useMemo, useState } from "react";
|
||
import { rules } from "./account-data";
|
||
import { Icon, PageHead, Pill, Segmented } from "./ui";
|
||
|
||
// Each rule category maps to a glyph so cards read at a glance.
|
||
const TAG_ICON: Record<string, string> = {
|
||
Profile: "user", Security: "shield", KYC: "verify", Support: "chat",
|
||
Notifications: "bell", Privacy: "privacy",
|
||
};
|
||
|
||
export function Rules() {
|
||
const tags = useMemo(() => ["All", ...Array.from(new Set(rules.map((r) => r.tag)))], []);
|
||
const [tag, setTag] = useState("All");
|
||
const list = tag === "All" ? rules : rules.filter((r) => r.tag === tag);
|
||
|
||
return (
|
||
<div className="view">
|
||
<PageHead
|
||
eyebrow="Reference"
|
||
title="Rules Checklist"
|
||
subtitle="The 13 business rules that govern Profile & Support — one source of truth."
|
||
icon="check-circle"
|
||
actions={<Pill tone="blue">{rules.length} rules</Pill>}
|
||
/>
|
||
|
||
<Segmented value={tag} onChange={setTag} options={tags.map((t) => ({ value: t, label: t }))} />
|
||
|
||
<div className="rules-grid view-body">
|
||
{list.map((r) => (
|
||
<article className="card rule-card" key={r.n}>
|
||
<span className="rule-watermark" aria-hidden>{String(r.n).padStart(2, "0")}</span>
|
||
<div className="rule-top">
|
||
<span className="rule-ic"><Icon name={TAG_ICON[r.tag] ?? "check-circle"} size={18} /></span>
|
||
<Pill tone="muted">{r.tag}</Pill>
|
||
</div>
|
||
<div className="rule-title">{r.title}</div>
|
||
<p className="rule-detail">{r.detail}</p>
|
||
<div className="rule-foot"><Icon name="shield-check" size={13} /> Enforced · Rule {r.n}</div>
|
||
</article>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|