58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import Image from 'next/image';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const sizeClasses = {
|
|
sm: 'size-8 rounded-md border-2 p-0.5',
|
|
md: 'size-12 rounded-md border-2 p-1.5',
|
|
lg: 'size-28 rounded-lg border-[5px] p-3',
|
|
} as const;
|
|
|
|
const variantClasses = {
|
|
default: 'border-white bg-primary shadow-md',
|
|
solid: 'border-white bg-primary',
|
|
glass: 'border-primary-foreground bg-primary/85 shadow-md',
|
|
sidebar: 'border-0 bg-primary',
|
|
} as const;
|
|
|
|
type LogoWrapperProps = {
|
|
alt?: string;
|
|
className?: string;
|
|
imageClassName?: string;
|
|
priority?: boolean;
|
|
size?: keyof typeof sizeClasses;
|
|
variant?: keyof typeof variantClasses;
|
|
};
|
|
|
|
export function LogoWrapper({
|
|
alt = 'RoadMonitor logo',
|
|
className,
|
|
imageClassName,
|
|
priority = false,
|
|
size = 'md',
|
|
variant = 'default',
|
|
}: LogoWrapperProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex shrink-0 items-center justify-center',
|
|
sizeClasses[size],
|
|
variantClasses[variant],
|
|
className,
|
|
)}
|
|
>
|
|
<Image
|
|
src="/logo.png"
|
|
alt={alt}
|
|
width={112}
|
|
height={112}
|
|
className={cn(
|
|
'size-full object-contain brightness-0 invert',
|
|
imageClassName,
|
|
)}
|
|
priority={priority}
|
|
/>
|
|
</span>
|
|
);
|
|
}
|