haixunMaster/components/brand/logo.tsx

55 lines
1.2 KiB
TypeScript

import Image from "next/image";
import { BRAND_ASSETS, BRAND_NAME } from "@/lib/brand";
import { cn } from "@/lib/utils";
interface BrandLogoProps {
size?: "sm" | "md" | "lg";
className?: string;
}
const sizes = {
sm: 32,
md: 40,
lg: 56,
};
export function BrandLogo({ size = "md", className }: BrandLogoProps) {
const px = sizes[size];
return (
<div
className={cn("brand-logo relative shrink-0 overflow-hidden", className)}
style={{ width: px, height: px }}
>
<Image
src={BRAND_ASSETS.logo}
alt={BRAND_NAME}
width={px}
height={px}
className="h-full w-full object-cover object-center"
priority
/>
</div>
);
}
interface BrandMarkProps {
subtitle?: string;
className?: string;
}
export function BrandMark({ subtitle, className }: BrandMarkProps) {
return (
<div className={cn("min-w-0", className)}>
<p className="brand-title">
<span className="brand-title-accent">{BRAND_NAME.slice(0, 1)}</span>
{BRAND_NAME.slice(1)}
</p>
{subtitle && (
<p className="mt-0.5 text-[10px] leading-snug tracking-wide text-muted-foreground">
{subtitle}
</p>
)}
</div>
);
}