703145a791
- Refactored `UIShowcaseClient` to utilize new section components: `ButtonsSection`, `BadgesSection`, `CardsSection`, `FormsSection`, `NavigationSection`, `FeedbackSection`, and `DataDisplaySection`. - Removed redundant state management and imports, simplifying the component structure. - Enhanced organization of UI components for improved usability and navigation within the showcase.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { Header } from '@/components/ui/Header';
|
|
import { TableOfContents } from './TableOfContents';
|
|
import {
|
|
ButtonsSection,
|
|
BadgesSection,
|
|
CardsSection,
|
|
FormsSection,
|
|
NavigationSection,
|
|
FeedbackSection,
|
|
DataDisplaySection
|
|
} from './sections';
|
|
|
|
export function UIShowcaseClient() {
|
|
return (
|
|
<div className="min-h-screen bg-[var(--background)]">
|
|
{/* Header avec navigation et dropdown de thèmes */}
|
|
<Header
|
|
title="🎨 UI Showcase"
|
|
subtitle="Démonstration de tous les composants UI disponibles"
|
|
/>
|
|
|
|
<div className="max-w-7xl mx-auto p-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
{/* Menu de navigation */}
|
|
<div className="lg:col-span-1">
|
|
<TableOfContents />
|
|
</div>
|
|
|
|
{/* Contenu principal */}
|
|
<div className="lg:col-span-3 space-y-16">
|
|
<ButtonsSection />
|
|
<BadgesSection />
|
|
<CardsSection />
|
|
<FormsSection />
|
|
<NavigationSection />
|
|
<FeedbackSection />
|
|
<DataDisplaySection />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|