37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
import { BrandMark, BrandWordmark } from '@/components/brand/Brand';
|
|
import { BRAND } from '@/lib/brand';
|
|
|
|
export const BrandBlock = React.memo(function BrandBlock({
|
|
adminMode = false,
|
|
}: {
|
|
adminMode?: boolean;
|
|
}) {
|
|
return (
|
|
<NavLink
|
|
to={adminMode ? '/admin' : '/'}
|
|
aria-label={BRAND.name}
|
|
className="group flex min-w-0 items-center gap-3 rounded-2xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
|
|
>
|
|
<BrandMark className="h-12 w-auto max-w-27 drop-shadow-[0_1px_2px_rgba(0,0,0,0.24)] transition-transform duration-200 group-hover:scale-[1.015]" />
|
|
<BrandWordmark className="sr-only" />
|
|
<span className="hidden min-w-0 flex-col leading-none xl:flex">
|
|
<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary/80">
|
|
{adminMode ? 'Admin workspace' : 'Home workspace'}
|
|
</span>
|
|
<span className="mt-1 max-w-48 truncate text-xs text-muted-foreground">
|
|
{adminMode ? 'System care and access' : 'Bills, timing, and clarity'}
|
|
</span>
|
|
</span>
|
|
{adminMode && (
|
|
<span className="hidden rounded-full border border-destructive/25 bg-destructive/10 px-2 py-0.5 text-[10px] font-semibold uppercase text-destructive sm:inline-flex xl:hidden">
|
|
Admin
|
|
</span>
|
|
)}
|
|
</NavLink>
|
|
);
|
|
});
|
|
|
|
BrandBlock.displayName = 'BrandBlock';
|