layout-branding.tsx38 lines · main
1'use client';
2
3import { useState } from 'react';
4
5interface Props {
6 /** Absolute URL for the tenant's logo image, or null if none is set. */
7 logoUrl: string | null;
8 /** Display name used as aria-label and alt text. */
9 tenantName?: string;
10}
11
12/**
13 * Renders the tenant's logo in the hosted auth header, falling back to
14 * the "briven" wordmark if the img fails to load or no logoUrl is set.
15 *
16 * Client component because `onError` is a browser event handler.
17 */
18export function TenantLogo({ logoUrl, tenantName = 'briven' }: Props) {
19 const [failed, setFailed] = useState(false);
20
21 if (logoUrl && !failed) {
22 return (
23 <img
24 src={logoUrl}
25 alt={tenantName}
26 onError={() => setFailed(true)}
27 className="max-h-8 max-w-[140px] object-contain"
28 />
29 );
30 }
31
32 // Fallback: wordmark matching the original layout style
33 return (
34 <span className="font-mono text-lg tracking-tight text-[var(--color-text)]">
35 {tenantName}
36 </span>
37 );
38}