igm
61fdd3329f
Some checks failed
CI / ci (push) Has been cancelled
- Create @reviq/frontend-utils package for frontend-specific utilities - Add OrgAvatar component with size variants (xs, sm, md, lg, xl) - Display org initials with deterministic colors when no logo available - Add getOrgInitials and getOrgColor utility functions - Update org-switcher and all org display pages to use OrgAvatar - Add noNonNullAssertion lint rule as error in biome.jsonc Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
47 lines
1.0 KiB
Svelte
47 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
getOrgColor,
|
|
getOrgInitials,
|
|
type OrgLike,
|
|
} from "@reviq/frontend-utils";
|
|
import { cn } from "$lib/utils.js";
|
|
|
|
interface Props {
|
|
org: OrgLike | null | undefined;
|
|
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
class?: string;
|
|
}
|
|
|
|
let { org, size = "md", class: className }: Props = $props();
|
|
|
|
const initials = $derived(getOrgInitials(org));
|
|
const colorClass = $derived(getOrgColor(org));
|
|
|
|
const sizeClasses = {
|
|
xs: "h-5 w-5 text-[10px] rounded",
|
|
sm: "h-6 w-6 text-[10px] rounded",
|
|
md: "h-8 w-8 text-xs rounded-lg",
|
|
lg: "h-10 w-10 text-sm rounded-lg",
|
|
xl: "h-16 w-16 text-xl rounded-xl",
|
|
} as const;
|
|
</script>
|
|
|
|
{#if org?.logoUrl}
|
|
<img
|
|
src={org.logoUrl}
|
|
alt="{org.displayName} logo"
|
|
class={cn(sizeClasses[size], "shrink-0 object-cover", className)}
|
|
/>
|
|
{:else}
|
|
<div
|
|
class={cn(
|
|
"flex shrink-0 items-center justify-center bg-gradient-to-br font-semibold text-white",
|
|
sizeClasses[size],
|
|
colorClass,
|
|
className,
|
|
)}
|
|
>
|
|
{initials}
|
|
</div>
|
|
{/if}
|