Developer
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { SectionCard } from "../components/SectionCard";
|
|
import { useWidgetData } from "../hooks/useWidgets";
|
|
import type { AuthentikApplication } from "../api/authentik";
|
|
import type { WidgetInstance } from "../types";
|
|
|
|
interface Props {
|
|
widget: WidgetInstance;
|
|
refreshIntervalMs: number;
|
|
description?: string;
|
|
}
|
|
|
|
export function AuthentikApplicationsWidget({
|
|
widget,
|
|
refreshIntervalMs,
|
|
description,
|
|
}: Props) {
|
|
const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
|
|
const payload = data?.data as { items?: AuthentikApplication[] } | undefined;
|
|
const applications = payload?.items ?? [];
|
|
return (
|
|
<SectionCard title={widget.title} description={description}>
|
|
{isLoading && !data ? (
|
|
<Skeleton className="h-16 w-full" />
|
|
) : data?.error ? (
|
|
<Alert variant="destructive">
|
|
<AlertDescription>{data.error}</AlertDescription>
|
|
</Alert>
|
|
) : applications.length ? (
|
|
<ul className="space-y-1">
|
|
{applications.map((application) => (
|
|
<li
|
|
key={application.id || application.slug || application.name}
|
|
className="rounded-md border px-2 py-1 text-sm"
|
|
>
|
|
<span className="font-medium">{application.name}</span>
|
|
{application.slug ? (
|
|
<span className="ml-2 text-xs text-muted-foreground">
|
|
{application.slug}
|
|
</span>
|
|
) : null}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground">No applications found.</p>
|
|
)}
|
|
</SectionCard>
|
|
);
|
|
}
|