54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { usePublicConfig } from '../lib/usePublicConfig'
|
|
|
|
/**
|
|
* Znak instancji: logo z ustawien i nazwa marki.
|
|
*
|
|
* Jedno i drugie pochodzi z ustawien (`APP_LOGO_URL`, `APP_BRAND_NAME`), wiec
|
|
* kazdy klient wstawia wlasne bez zmiany kodu.
|
|
*
|
|
* BRAK LOGO POKAZUJE SAMA NAZWE, BEZ GRAFIKI ZASTEPCZEJ.
|
|
* ---------------------------------------------------------------------------
|
|
* Wczesniej przy pustym `APP_LOGO_URL` pojawiala sie kropla w kolorze marki.
|
|
* Wygladalo to jak logo klienta, choc nim nie bylo: instancja, ktora logo nie
|
|
* wgrala, prezentowala sie cudzym znakiem. Nazwa bez grafiki jest uczciwsza
|
|
* i czytelniejsza niz ikona, ktora nic nie znaczy.
|
|
*/
|
|
export function BrandMark({
|
|
size = 'md',
|
|
inverse = false,
|
|
}: {
|
|
size?: 'sm' | 'md'
|
|
inverse?: boolean
|
|
}) {
|
|
const { brandName, logoUrl } = usePublicConfig()
|
|
|
|
const text = size === 'sm' ? 'text-sm' : 'text-base'
|
|
|
|
return (
|
|
<span className="flex min-w-0 items-center gap-2.5">
|
|
{/* Bez logo nie pokazujemy niczego w jego miejscu: sama nazwa marki. */}
|
|
{logoUrl && (
|
|
// Logo bywa poziome, wiec ograniczamy tylko wysokosc, a szerokosc
|
|
// dobiera sie do proporcji. object-contain nie przycina i nie rozciaga.
|
|
<img
|
|
src={logoUrl}
|
|
alt=""
|
|
className={`${size === 'sm' ? 'h-7' : 'h-9'} w-auto max-w-[160px] shrink-0 object-contain`}
|
|
// uszkodzony adres nie moze zostawiac pustej ramki
|
|
onError={(e) => {
|
|
e.currentTarget.style.display = 'none'
|
|
}}
|
|
/>
|
|
)}
|
|
<span
|
|
className={`truncate font-semibold tracking-tight ${text} ${
|
|
inverse ? 'text-white' : 'text-slate-900'
|
|
}`}
|
|
title={brandName || undefined}
|
|
>
|
|
{brandName || 'Webinary'}
|
|
</span>
|
|
</span>
|
|
)
|
|
}
|