48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import type { CapabilityFeature } from "@/lib/capabilities/types";
|
||
|
|
import { useCapabilities } from "@/lib/capabilities/context";
|
||
|
|
|
||
|
|
interface FeatureGateProps {
|
||
|
|
feature: CapabilityFeature;
|
||
|
|
children?: React.ReactNode;
|
||
|
|
/** 未就緒時是否顯示說明（預設不顯示，直接隱藏） */
|
||
|
|
showHint?: boolean;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function FeatureGate({
|
||
|
|
feature,
|
||
|
|
children,
|
||
|
|
showHint = false,
|
||
|
|
className,
|
||
|
|
}: FeatureGateProps) {
|
||
|
|
const { loading, get } = useCapabilities();
|
||
|
|
|
||
|
|
if (loading) return null;
|
||
|
|
|
||
|
|
const cap = get(feature);
|
||
|
|
if (cap?.ready) {
|
||
|
|
return <>{children}</>;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!showHint || !cap) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={className ?? "rounded-lg border border-dashed border-border bg-muted/40 px-3 py-2.5"}>
|
||
|
|
<p className="text-[12px] text-muted-foreground">
|
||
|
|
{cap.reason ?? `${cap.label}尚未就緒`}
|
||
|
|
{cap.setupHref && cap.setupLabel && (
|
||
|
|
<>
|
||
|
|
{" · "}
|
||
|
|
<Link href={cap.setupHref} className="text-primary underline-offset-2 hover:underline">
|
||
|
|
{cap.setupLabel}
|
||
|
|
</Link>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|