Files
explorer-monorepo/frontend/src/components/common/BrandMark.tsx

46 lines
1.5 KiB
TypeScript

export default function BrandMark({ size = 'default' }: { size?: 'default' | 'compact' }) {
const containerClassName =
size === 'compact'
? 'h-10 w-10 rounded-xl'
: 'h-11 w-11 rounded-2xl'
const iconClassName = size === 'compact' ? 'h-6 w-6' : 'h-7 w-7'
return (
<span
className={[
'relative inline-flex shrink-0 items-center justify-center border border-primary-200/70 bg-white text-primary-600 shadow-[0_10px_30px_rgba(37,99,235,0.10)] transition-transform group-hover:-translate-y-0.5 dark:border-primary-500/20 dark:bg-gray-900 dark:text-primary-400',
containerClassName,
].join(' ')}
>
<svg className={iconClassName} viewBox="0 0 32 32" fill="none" aria-hidden>
<path
d="M16 4.75 7.5 9.2v9.55L16 23.2l8.5-4.45V9.2L16 4.75Z"
stroke="currentColor"
strokeWidth="1.8"
/>
<path
d="m7.75 9.45 8.25 4.3 8.25-4.3"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
/>
<path d="M16 13.9v9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
<path
d="M22.75 6.8c2.35 1.55 3.9 4.2 3.9 7.2"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
opacity=".9"
/>
<path
d="M9.35 6.8c-2.3 1.55-3.85 4.2-3.85 7.2"
stroke="currentColor"
strokeWidth="1.6"
strokeLinecap="round"
opacity=".65"
/>
</svg>
</span>
)
}