ad1370ea7e
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Introduced turbopack alias for canvas in next.config.mjs. - Updated package.json scripts for development and branding tasks. - Added new dependencies for Tiptap extensions. - Implemented new demo layouts for agenda, contacts, drive, and mail applications. - Enhanced globals.css for improved theming and splash screen animations. - Added OAuth callback handling for drive mounts. - Updated layout components to integrate new demo shells and improve structure.
136 lines
3.4 KiB
TypeScript
136 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import {
|
|
SUITE_APP_LOGO_LOCKUP_CLASS,
|
|
SUITE_APP_LOGO_MARK_CLASS,
|
|
SUITE_APP_LOGO_TEXT_CLASS,
|
|
} from "@/lib/suite/suite-chrome-classes"
|
|
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
|
|
}
|
|
|
|
/** Mark vectoriel plat 4 couleurs (style suite) — source des PNG via `pnpm run brand:ultimail`. */
|
|
const HEADER_ICON = "/ultimail-mark.svg"
|
|
const STACKED_WORDMARK = "/brand/ultimail-wordmark-stacked.png"
|
|
/** Fond transparent, texte clair pour fond sombre. */
|
|
const STACKED_WORDMARK_DARK = "/brand/ultimail-wordmark-stacked-dark.png"
|
|
const DEFAULT_INBOX_HREF = "/mail/inbox"
|
|
|
|
const STACKED_IMG_CLASS =
|
|
"h-[11.25rem] w-auto max-w-none shrink-0 object-contain select-none sm:h-[12rem]"
|
|
|
|
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(
|
|
SUITE_APP_LOGO_MARK_CLASS,
|
|
variant === "mark" && "h-10 w-10",
|
|
)}
|
|
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={cn(STACKED_IMG_CLASS, "dark:hidden")}
|
|
/>
|
|
<img
|
|
src={STACKED_WORDMARK_DARK}
|
|
alt="Ultimail"
|
|
width={320}
|
|
height={320}
|
|
draggable={false}
|
|
aria-hidden
|
|
className={cn(STACKED_IMG_CLASS, "hidden dark:block")}
|
|
/>
|
|
</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={cn(SUITE_APP_LOGO_LOCKUP_CLASS, "min-w-0 text-foreground")}
|
|
>
|
|
{mark}
|
|
<span className={SUITE_APP_LOGO_TEXT_CLASS}>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>
|
|
)
|
|
}
|