forked from baron/baron-sso
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { ServerCog, ShieldHalf } from "lucide-react";
|
|
import { useMemo, useState } from "react";
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "../../../components/ui/avatar";
|
|
import type { ClientSummary, ClientType } from "../../../lib/devApi";
|
|
import { t } from "../../../lib/i18n";
|
|
|
|
type ClientLogoProps = {
|
|
client: Pick<ClientSummary, "name" | "type" | "metadata">;
|
|
};
|
|
|
|
function readLogoUrl(metadata?: Record<string, unknown>): string | undefined {
|
|
const logoUrl = metadata?.logo_url;
|
|
if (typeof logoUrl !== "string") {
|
|
return undefined;
|
|
}
|
|
|
|
const trimmedLogoUrl = logoUrl.trim();
|
|
return trimmedLogoUrl.length > 0 ? trimmedLogoUrl : undefined;
|
|
}
|
|
|
|
function TypeFallbackIcon({ type }: { type: ClientType }) {
|
|
if (type === "private") {
|
|
return <ServerCog className="h-4 w-4" aria-hidden="true" />;
|
|
}
|
|
|
|
return <ShieldHalf className="h-4 w-4" aria-hidden="true" />;
|
|
}
|
|
|
|
export function ClientLogo({ client }: ClientLogoProps) {
|
|
const [didImageFail, setDidImageFail] = useState(false);
|
|
const logoUrl = useMemo(
|
|
() => readLogoUrl(client.metadata),
|
|
[client.metadata],
|
|
);
|
|
const showImage = Boolean(logoUrl) && !didImageFail;
|
|
const clientName = client.name || t("ui.dev.clients.untitled", "Untitled");
|
|
|
|
return (
|
|
<Avatar className="h-9 w-9 rounded-lg border border-border/60 bg-primary/10 text-primary">
|
|
{showImage ? (
|
|
<AvatarImage
|
|
src={logoUrl}
|
|
alt={t("ui.dev.clients.logo_alt", "{{name}} 로고", {
|
|
name: clientName,
|
|
})}
|
|
className="object-contain p-1"
|
|
onError={() => setDidImageFail(true)}
|
|
/>
|
|
) : null}
|
|
<AvatarFallback className="rounded-lg bg-primary/10 text-primary">
|
|
<TypeFallbackIcon type={client.type} />
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
);
|
|
}
|