40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
import type { FC } from 'react'
|
|
import { Box, Group, Text } from '@pikku/mantine/core'
|
|
import type { I18nString } from '@pikku/react'
|
|
|
|
// Placeholder brand mark + app name. A gradient tile (brand primary → secondary,
|
|
// both theme-driven so it recolours with the active theme) holding a bold spark
|
|
// glyph — a confident, generic starting point, NOT a flat monochrome square.
|
|
// Reshape the glyph into a real brand mark per project.
|
|
export const Wordmark: FC<{ name: I18nString; size?: number }> = ({ name, size = 30 }) => {
|
|
return (
|
|
<Group gap={10} align="center" wrap="nowrap">
|
|
<Box
|
|
w={size}
|
|
h={size}
|
|
style={{
|
|
flexShrink: 0,
|
|
borderRadius: 'var(--mantine-radius-md)',
|
|
// Gradient falls back to the solid primary fill if the theme defines no
|
|
// secondary, so it always renders on-brand.
|
|
backgroundImage:
|
|
'linear-gradient(135deg, var(--mantine-primary-color-filled), var(--mantine-color-secondary-5, var(--mantine-primary-color-filled)))',
|
|
color: 'var(--mantine-primary-color-contrast)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
boxShadow: 'var(--mantine-shadow-sm)',
|
|
}}
|
|
>
|
|
<svg width={size * 0.56} height={size * 0.56} viewBox="0 0 24 24" fill="currentColor">
|
|
{/* Four-point spark — energetic, distinctive, reads at any size. */}
|
|
<path d="M12 1.5c.9 5.1 4.5 8.7 9.6 9.6v1.8c-5.1.9-8.7 4.5-9.6 9.6h-1.8c-.9-5.1-4.5-8.7-9.6-9.6v-1.8c5.1-.9 8.7-4.5 9.6-9.6Z" />
|
|
</svg>
|
|
</Box>
|
|
<Text fw={700} style={{ fontSize: size * 0.55, letterSpacing: '-0.02em' }}>
|
|
{name}
|
|
</Text>
|
|
</Group>
|
|
)
|
|
}
|