wehub-resource-sync
e4dcfc49aa
Tests / Import Check (Python 3.13) (push) Has been cancelled
Tests / Import Check (Python 3.14) (push) Has been cancelled
Tests / Python Tests (Python 3.11) (push) Has been cancelled
Tests / Python Tests (Python 3.12) (push) Has been cancelled
Tests / Python Tests (Python 3.14) (push) Has been cancelled
Tests / Test Summary (push) Has been cancelled
Tests / Lint and Format (push) Has been cancelled
Tests / Web Node Tests (push) Has been cancelled
Tests / Import Check (Python 3.11) (push) Has been cancelled
Tests / Import Check (Python 3.12) (push) Has been cancelled
Tests / Python Tests (Python 3.13) (push) Has been cancelled
60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { Lock } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import { CAPABILITY_LABEL, type Capability } from "@/lib/capability-routes";
|
|
|
|
import { useCapabilityAccess } from "./CapabilityAccessContext";
|
|
|
|
/**
|
|
* Full-surface "this feature is locked" notice. Shown in place of a feature
|
|
* page when the current user lacks the required model capability. Never hides
|
|
* the feature — it explains why it is unavailable and what to do.
|
|
*/
|
|
export function LockedFeatureNotice({
|
|
capability,
|
|
}: {
|
|
capability: Capability;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const modelLabel = t(CAPABILITY_LABEL[capability]);
|
|
|
|
return (
|
|
<div className="flex h-full w-full items-center justify-center p-6">
|
|
<div className="flex max-w-md flex-col items-center gap-4 rounded-2xl border border-[var(--border)] bg-[var(--secondary)]/40 px-8 py-10 text-center">
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--background)] text-[var(--muted-foreground)]">
|
|
<Lock size={20} strokeWidth={1.8} />
|
|
</div>
|
|
<h2 className="text-base font-semibold text-[var(--foreground)]">
|
|
{t("Feature locked")}
|
|
</h2>
|
|
<p className="text-sm leading-relaxed text-[var(--muted-foreground)]">
|
|
{t(
|
|
"Your account doesn't have {{model}} assigned yet. Please contact your administrator to get access.",
|
|
{ model: modelLabel },
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Renders {children} only when the user has the required capability; otherwise
|
|
* renders the locked notice. Pass capability=null to never gate.
|
|
*/
|
|
export function RequireCapability({
|
|
capability,
|
|
children,
|
|
}: {
|
|
capability: Capability | null;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const { has } = useCapabilityAccess();
|
|
if (capability && !has(capability)) {
|
|
return <LockedFeatureNotice capability={capability} />;
|
|
}
|
|
return <>{children}</>;
|
|
}
|