dfeff836ce
Add SumiButton and SumiCanvas components with lavis ink wash aesthetic. Add useSeason and useTimeOfDay hooks for time-aware UI tinting. Update storybook config, UI components, locales (en/es/fr), and dependencies. Add Chromatic CI workflow. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
|
|
import React, { useEffect } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
|
|
export const DesignSystemDemo: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
useEffect(() => {
|
|
document.title = t('designSystem.pageTitle');
|
|
}, [t]);
|
|
|
|
return (
|
|
<main
|
|
id="main-content"
|
|
className="min-h-screen bg-[var(--sumi-bg-void)] text-[var(--sumi-text-primary)]"
|
|
data-testid="design-system-page"
|
|
>
|
|
<header className="flex flex-col items-center justify-center px-4 sm:px-6 pt-16 pb-12">
|
|
<h1
|
|
className="text-3xl sm:text-4xl tracking-[0.1em] mb-3"
|
|
style={{ fontFamily: 'var(--sumi-font-heading)', fontWeight: 200 }}
|
|
>
|
|
{t('designSystem.title')}
|
|
</h1>
|
|
<div
|
|
className="w-16 h-px bg-gradient-to-r from-transparent via-[var(--sumi-kin)]/30 to-transparent mb-4"
|
|
aria-hidden="true"
|
|
/>
|
|
<p
|
|
className="text-sm text-[var(--sumi-text-secondary)]"
|
|
style={{ fontFamily: 'var(--sumi-font-body)' }}
|
|
>
|
|
{t('designSystem.subtitle')}
|
|
</p>
|
|
</header>
|
|
|
|
<section className="px-4 sm:px-6 pb-16 max-w-[800px] mx-auto text-center">
|
|
<p
|
|
className="text-sm text-[var(--sumi-text-tertiary)] leading-relaxed"
|
|
style={{ fontFamily: 'var(--sumi-font-body)' }}
|
|
>
|
|
{t('designSystem.underConstruction')}
|
|
</p>
|
|
<div className="mt-8">
|
|
<Link
|
|
to="/"
|
|
className="text-xs tracking-[0.1em] px-4 py-1.5 border border-[var(--sumi-border-strong)] rounded-sm text-[var(--sumi-text-secondary)] hover:text-[var(--sumi-text-primary)] hover:border-[var(--sumi-accent)]/40 transition-all"
|
|
style={{ fontFamily: 'var(--sumi-font-heading)', fontWeight: 300 }}
|
|
>
|
|
{t('designSystem.backToHome')}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
};
|