62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
|
import Link from "next/link";
|
||
|
|
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
type LogoProps = {
|
||
|
|
className?: string;
|
||
|
|
showTagline?: boolean;
|
||
|
|
size?: "sm" | "md" | "lg";
|
||
|
|
variant?: "dark" | "light";
|
||
|
|
};
|
||
|
|
|
||
|
|
const sizeClasses = {
|
||
|
|
sm: { rule: "w-8", word: "text-xl tracking-[0.22em]", tag: "text-[10px]" },
|
||
|
|
md: { rule: "w-10", word: "text-2xl tracking-[0.24em]", tag: "text-xs" },
|
||
|
|
lg: { rule: "w-14", word: "text-4xl tracking-[0.26em]", tag: "text-sm" },
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Logo({
|
||
|
|
className,
|
||
|
|
showTagline = false,
|
||
|
|
size = "md",
|
||
|
|
variant = "light",
|
||
|
|
}: LogoProps) {
|
||
|
|
const s = sizeClasses[size];
|
||
|
|
const isDark = variant === "dark";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link href="/landing" className={cn("group inline-flex flex-col gap-1", className)}>
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"h-0.5 rounded-full transition-colors",
|
||
|
|
s.rule,
|
||
|
|
isDark
|
||
|
|
? "bg-[hsl(var(--hero-foreground))] group-hover:bg-[hsl(var(--matter))]"
|
||
|
|
: "bg-foreground group-hover:bg-primary",
|
||
|
|
)}
|
||
|
|
aria-hidden
|
||
|
|
/>
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"font-display font-extrabold leading-none",
|
||
|
|
s.word,
|
||
|
|
isDark ? "text-[hsl(var(--hero-foreground))]" : "text-foreground",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
SBMTR
|
||
|
|
</span>
|
||
|
|
{showTagline ? (
|
||
|
|
<span
|
||
|
|
className={cn(
|
||
|
|
"font-marketing",
|
||
|
|
s.tag,
|
||
|
|
isDark ? "text-[hsl(var(--hero-muted))]" : "text-muted-foreground",
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
Submatter
|
||
|
|
</span>
|
||
|
|
) : null}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
}
|