BillTracker/client/components/layout/BrandBlock.jsx

29 lines
959 B
React
Raw Normal View History

2026-05-09 13:03:36 -05:00
import React, { useMemo } from 'react';
import { NavLink } from 'react-router-dom';
import { cn } from '@/lib/utils';
export const BrandBlock = React.memo(function BrandBlock({ adminMode = false }) {
const logoSrc = useMemo(() => '/img/logo.png', []);
return (
<NavLink
to={adminMode ? '/admin' : '/'}
aria-label="BillTracker"
className="flex items-center gap-2 rounded-xl focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
>
<img
src={logoSrc}
alt="BillTracker"
className="h-16 w-auto max-w-[9rem] object-contain drop-shadow-[0_1px_2px_rgba(0,0,0,0.45)]"
/>
{adminMode && (
<span className="hidden sm:inline-flex rounded-full border border-destructive/25 bg-destructive/10 px-2 py-0.5 text-[10px] font-semibold uppercase text-destructive">
Admin
</span>
)}
</NavLink>
);
});
BrandBlock.displayName = 'BrandBlock';