38 lines
2.0 KiB
PHP
38 lines
2.0 KiB
PHP
@props([
|
|
'size' => 'md', // sm | md | lg
|
|
'suffix' => false, // append "Cloud" in the muted tone
|
|
'tone' => 'ink', // ink | white — for the dark sign-in plate
|
|
])
|
|
{{--
|
|
The lockup. Mark plus wordmark, one definition.
|
|
|
|
It had five. The website header set the word in ink at -0.02em, the
|
|
sidebar split it into "Clu" plus an orange "Pilot", the sign-in plate set
|
|
it white at a third size, the placeholder inlined its own, and the
|
|
maintenance screen had no wordmark at all — five surfaces of one product,
|
|
each with its own idea of the brand.
|
|
|
|
The ink version wins because the website is the newest and most considered
|
|
of them, and because a two-tone wordmark makes the accent a permanent
|
|
fixture rather than something used sparingly.
|
|
|
|
The mark and the word are the only two children of the flex row, and the
|
|
word is a single element. `gap` applies between EVERY child of a flex
|
|
container and a bare text node is a child — written the other way this
|
|
shipped reading "Clu Pilot Cloud".
|
|
--}}
|
|
@php
|
|
$marks = ['sm' => 'size-6', 'md' => 'size-7', 'lg' => 'size-9'];
|
|
$words = ['sm' => 'text-base', 'md' => 'text-lg', 'lg' => 'text-xl'];
|
|
@endphp
|
|
<span {{ $attributes->merge(['class' => 'inline-flex items-center gap-2.5']) }}>
|
|
<x-ui.logo class="{{ $marks[$size] ?? $marks['md'] }} shrink-0" />
|
|
{{-- The directive sits on its own line on purpose. Blade only compiles a
|
|
directive at a non-word boundary, so `CluPilot@if (…)` leaves the @if
|
|
as literal text and the matching @endif then blows up the compiled
|
|
view with a parse error. The newline also supplies the space before
|
|
"Cloud". --}}
|
|
<span class="whitespace-nowrap {{ $words[$size] ?? $words['md'] }} font-bold tracking-[-0.025em] {{ $tone === 'white' ? 'text-white' : 'text-ink' }}">CluPilot
|
|
@if ($suffix)<span class="font-semibold {{ $tone === 'white' ? 'text-white/70' : 'text-muted' }}">Cloud</span>@endif</span>
|
|
</span>
|