🎨 style: establish console design system

2026-09-15 03:39:18 +00:00 · 2026-08-13 02:19:26 +07:00
parent 5e88c660dc
commit 3a09f0b571
26 changed files with 840 additions and 269 deletions
@@ -0,0 +1,42 @@
+import { cn } from "@/lib/cn";
+
+type BrandMarkProps = {
+  className?: string;
+  inverted?: boolean;
+};
+
+export function BrandMark({ className, inverted = false }: BrandMarkProps) {
+  return (
+    <div
+      className={cn(
+        "grid size-11 shrink-0 place-items-center border font-mono text-lg font-black",
+        inverted
+          ? "border-foreground bg-foreground text-background"
+          : "border-sidebar-primary bg-sidebar-primary text-sidebar-primary-foreground",
+        className
+      )}
+    >
+      M
+    </div>
+  );
+}
+
+type BrandLockupProps = BrandMarkProps & {
+  subtitle: string;
+  compact?: boolean;
+  textClassName?: string;
+};
+
+export function BrandLockup({ subtitle, compact, className, textClassName }: BrandLockupProps) {
+  return (
+    <div className={cn("flex items-center gap-3", className)}>
+      <BrandMark className={compact ? "size-9 text-sm" : undefined} />
+      <div className={textClassName}>
+        <p className={cn("font-black uppercase tracking-[0.14em]", compact ? "text-base" : "text-lg")}>
+          Minikura
+        </p>
+        <p className="font-mono text-[9px] uppercase tracking-[0.2em] text-current/45">{subtitle}</p>
+      </div>
+    </div>
+  );
+}