56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import Image from 'next/image'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface LogoProps {
|
|
variant?: 'small' | 'long'
|
|
className?: string
|
|
showText?: boolean
|
|
textSuffix?: string
|
|
}
|
|
|
|
export function Logo({
|
|
variant = 'small',
|
|
className,
|
|
showText = false,
|
|
textSuffix,
|
|
}: LogoProps) {
|
|
if (variant === 'long') {
|
|
return (
|
|
<div className={cn('flex items-center gap-2', className)}>
|
|
<Image
|
|
src="/images/MOPC-blue-long.png"
|
|
alt="MOPC Logo"
|
|
width={120}
|
|
height={40}
|
|
className="h-8 w-auto"
|
|
priority
|
|
/>
|
|
{textSuffix && (
|
|
<span className="text-xs text-muted-foreground">{textSuffix}</span>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={cn('flex items-center gap-3', className)}>
|
|
<Image
|
|
src="/images/MOPC-blue-small.png"
|
|
alt="MOPC Logo"
|
|
width={32}
|
|
height={32}
|
|
className="h-8 w-8"
|
|
priority
|
|
/>
|
|
{showText && (
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-semibold">MOPC</span>
|
|
{textSuffix && (
|
|
<span className="text-xs text-muted-foreground">{textSuffix}</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|