119 lines
3.0 KiB
TypeScript
119 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
type UltiMailLogoProps = {
|
|
className?: string
|
|
/** `horizontal` = picto + texte. `mark` = picto seul. `stacked` = wordmark empilé. */
|
|
variant?: "horizontal" | "mark" | "stacked"
|
|
/** Lien au clic ; `null` = pas de lien. Défaut : boîte de réception. */
|
|
href?: string | null
|
|
}
|
|
|
|
/** Icône extraite du master PNG (pas le SVG VTracer, trop « M Gmail » à petite taille). */
|
|
const HEADER_ICON = "/brand/ultimail-header-icon.png"
|
|
const STACKED_WORDMARK = "/brand/ultimail-wordmark-stacked.png"
|
|
const DEFAULT_INBOX_HREF = "/mail/inbox"
|
|
|
|
export function UltiMailLogo({
|
|
className,
|
|
variant = "horizontal",
|
|
href = DEFAULT_INBOX_HREF,
|
|
}: UltiMailLogoProps) {
|
|
const mark = (
|
|
<img
|
|
src={HEADER_ICON}
|
|
alt=""
|
|
width={288}
|
|
height={288}
|
|
draggable={false}
|
|
className={cn(
|
|
"shrink-0 object-contain object-center select-none",
|
|
variant === "mark" ? "h-10 w-10" : "h-8 w-8"
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
)
|
|
|
|
if (variant === "mark") {
|
|
if (href === null) {
|
|
return <div className={cn("shrink-0", className)}>{mark}</div>
|
|
}
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"shrink-0 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
|
|
className
|
|
)}
|
|
aria-label="Ultimail — Boîte de réception"
|
|
>
|
|
{mark}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
if (variant === "stacked") {
|
|
const stacked = (
|
|
<div className="flex h-[6.25rem] items-center justify-center overflow-hidden sm:h-[6.75rem]">
|
|
<img
|
|
src={STACKED_WORDMARK}
|
|
alt="Ultimail"
|
|
width={320}
|
|
height={320}
|
|
draggable={false}
|
|
className="h-[11.25rem] w-auto max-w-none shrink-0 object-contain select-none sm:h-[12rem]"
|
|
/>
|
|
</div>
|
|
)
|
|
|
|
if (href === null) {
|
|
return <div className={cn("flex justify-center", className)}>{stacked}</div>
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"flex justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
|
|
className
|
|
)}
|
|
aria-label="Ultimail — Boîte de réception"
|
|
>
|
|
{stacked}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
const body = (
|
|
<div
|
|
role="img"
|
|
aria-label="Ultimail"
|
|
className="flex min-w-0 items-center gap-2.5 text-foreground"
|
|
>
|
|
{mark}
|
|
<span className="min-w-0 truncate text-[1.375rem] font-semibold leading-none tracking-tight text-foreground dark:text-white">
|
|
Ultimail
|
|
</span>
|
|
</div>
|
|
)
|
|
|
|
if (href === null) {
|
|
return <div className={cn("min-w-0", className)}>{body}</div>
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={cn(
|
|
"flex min-w-0 items-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
|
|
className
|
|
)}
|
|
aria-label="Ultimail — Boîte de réception"
|
|
>
|
|
{body}
|
|
</Link>
|
|
)
|
|
}
|