mirror of
https://github.com/Since-3/Kumasy-Marketing.git
synced 2026-10-12 19:51:17 +00:00
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
// Imported straight from motion/react, not from ./motion, to keep this leaf
|
||
// component free of a cycle (ui.tsx -> logo.tsx). Only used as a truthy check,
|
||
// so the hook's `null` initial value behaves the same as `false` here.
|
||
import { motion, useReducedMotion } from "motion/react";
|
||
|
||
/**
|
||
* The Kumasy mark, rebuilt as vector from public/icons/icon-512.png:
|
||
* a rounded stem plus a left-pointing triangle, forming a "k".
|
||
* Drawn on a 0 0 512 512 grid to match the source proportions.
|
||
*/
|
||
export function LogoMark({
|
||
className = "",
|
||
/** Rides on currentColor so it inverts on dark surfaces. */
|
||
title,
|
||
}: {
|
||
className?: string;
|
||
title?: string;
|
||
}) {
|
||
return (
|
||
<svg
|
||
viewBox="0 0 512 512"
|
||
className={className}
|
||
role={title ? "img" : undefined}
|
||
aria-label={title}
|
||
aria-hidden={title ? undefined : true}
|
||
fill="currentColor"
|
||
>
|
||
{/* Geometry traced from public/icons/icon-512.png.
|
||
Stem: x 153–224, y 118–395. */}
|
||
<rect x="153" y="118" width="71" height="277" rx="35.5" />
|
||
{/* Triangle: apex ~(236, 307), flat right edge at x≈356,
|
||
spanning y≈218–396, with 20px corner and 10px apex radii. */}
|
||
<path d="M234.6 299.6 317.4 220.5 A20 20 0 0 1 352 234.4 L352 379.6 A20 20 0 0 1 317.4 393.5 L234.6 314.4 A10 10 0 0 1 234.6 299.6 Z" />
|
||
</svg>
|
||
);
|
||
}
|
||
|
||
/** Wordmark: the mark in an amber tile plus the name. */
|
||
export function Logo({ className = "" }: { className?: string }) {
|
||
const reduced = useReducedMotion();
|
||
|
||
return (
|
||
<span className={`inline-flex items-center gap-2.5 ${className}`}>
|
||
<motion.span
|
||
className="grid size-7 shrink-0 place-items-center rounded-[9px] text-ink shadow-amber"
|
||
style={{ background: "var(--gradient-amber)" }}
|
||
whileHover={reduced ? undefined : { rotate: -8, scale: 1.06 }}
|
||
transition={{ type: "spring", stiffness: 400, damping: 18 }}
|
||
>
|
||
<LogoMark className="size-[18px]" />
|
||
</motion.span>
|
||
<span className="text-subheading font-semibold tracking-[-0.4px] text-ink">
|
||
kumasy
|
||
</span>
|
||
</span>
|
||
);
|
||
}
|