feat: restructure UI showcase with new sections and components
- 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.
This commit is contained in:
Julien Froidefond
File diff suppressed because it is too large
Load Diff
64
src/components/ui-showcase/sections/BadgesSection.tsx
Normal file
64
src/components/ui-showcase/sections/BadgesSection.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Badge } from '@/components/ui/Badge';
|
||||||
|
import { PriorityBadge } from '@/components/ui/PriorityBadge';
|
||||||
|
import { StatusBadge } from '@/components/ui/StatusBadge';
|
||||||
|
|
||||||
|
export function BadgesSection() {
|
||||||
|
return (
|
||||||
|
<section id="badges" className="space-y-8">
|
||||||
|
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
|
||||||
|
Badges
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Variants</h3>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<Badge variant="default">Default Badge</Badge>
|
||||||
|
<Badge variant="primary">Primary Badge</Badge>
|
||||||
|
<Badge variant="success">Success Badge</Badge>
|
||||||
|
<Badge variant="destructive">Destructive Badge</Badge>
|
||||||
|
<Badge variant="accent">Accent Badge</Badge>
|
||||||
|
<Badge variant="purple">Purple Badge</Badge>
|
||||||
|
<Badge variant="yellow">Yellow Badge</Badge>
|
||||||
|
<Badge variant="green">Green Badge</Badge>
|
||||||
|
<Badge variant="blue">Blue Badge</Badge>
|
||||||
|
<Badge variant="gray">Gray Badge</Badge>
|
||||||
|
<Badge variant="outline">Outline Badge</Badge>
|
||||||
|
<Badge variant="danger">Danger Badge</Badge>
|
||||||
|
<Badge variant="warning">Warning Badge</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Tailles</h3>
|
||||||
|
<div className="flex flex-wrap items-center gap-4">
|
||||||
|
<Badge size="sm">Small Badge</Badge>
|
||||||
|
<Badge size="md">Medium Badge</Badge>
|
||||||
|
<Badge size="lg">Large Badge</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Priority Badges</h3>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<PriorityBadge priority="low" />
|
||||||
|
<PriorityBadge priority="medium" />
|
||||||
|
<PriorityBadge priority="high" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Status Badges</h3>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<StatusBadge status="todo" />
|
||||||
|
<StatusBadge status="in_progress" />
|
||||||
|
<StatusBadge status="done" />
|
||||||
|
<StatusBadge status="cancelled" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
45
src/components/ui-showcase/sections/ButtonsSection.tsx
Normal file
45
src/components/ui-showcase/sections/ButtonsSection.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
|
||||||
|
export function ButtonsSection() {
|
||||||
|
return (
|
||||||
|
<section id="buttons" className="space-y-8">
|
||||||
|
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
|
||||||
|
Buttons
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Variants</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Button variant="primary">Primary Button</Button>
|
||||||
|
<Button variant="secondary">Secondary Button</Button>
|
||||||
|
<Button variant="ghost">Ghost Button</Button>
|
||||||
|
<Button variant="destructive">Destructive Button</Button>
|
||||||
|
<Button variant="success">Success Button</Button>
|
||||||
|
<Button variant="selected">Selected Button</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Sizes</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Button size="sm">Small Button</Button>
|
||||||
|
<Button size="md">Medium Button</Button>
|
||||||
|
<Button size="lg">Large Button</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">States</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Button>Normal State</Button>
|
||||||
|
<Button disabled>Disabled State</Button>
|
||||||
|
<Button className="opacity-50">Loading State</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
239
src/components/ui-showcase/sections/CardsSection.tsx
Normal file
239
src/components/ui-showcase/sections/CardsSection.tsx
Normal file
@@ -0,0 +1,239 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
|
||||||
|
import { StyledCard } from '@/components/ui/StyledCard';
|
||||||
|
import { StatCard } from '@/components/ui/StatCard';
|
||||||
|
import { ActionCard } from '@/components/ui/ActionCard';
|
||||||
|
import { TaskCard } from '@/components/ui/TaskCard';
|
||||||
|
import { MetricCard } from '@/components/ui/MetricCard';
|
||||||
|
import { AchievementCard } from '@/components/ui/AchievementCard';
|
||||||
|
import { ChallengeCard } from '@/components/ui/ChallengeCard';
|
||||||
|
import { SkeletonCard } from '@/components/ui/SkeletonCard';
|
||||||
|
import { AchievementData } from '@/components/ui/AchievementCard';
|
||||||
|
import { ChallengeData } from '@/components/ui/ChallengeCard';
|
||||||
|
|
||||||
|
export function CardsSection() {
|
||||||
|
const sampleAchievements: AchievementData[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: 'Refactoring de la page Daily',
|
||||||
|
description: 'Migration vers les composants UI génériques',
|
||||||
|
impact: 'high',
|
||||||
|
completedAt: new Date(),
|
||||||
|
updatedAt: new Date(),
|
||||||
|
tags: ['refactoring', 'ui'],
|
||||||
|
todosCount: 8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: 'Implémentation du système de thèmes',
|
||||||
|
description: 'Ajout de 10 nouveaux thèmes avec CSS variables',
|
||||||
|
impact: 'medium',
|
||||||
|
completedAt: new Date(Date.now() - 86400000),
|
||||||
|
updatedAt: new Date(Date.now() - 86400000),
|
||||||
|
tags: ['themes', 'css'],
|
||||||
|
todosCount: 3
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const sampleChallenges: ChallengeData[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: 'Migration vers Next.js 15',
|
||||||
|
description: 'Mise à jour majeure avec nouvelles fonctionnalités',
|
||||||
|
priority: 'high',
|
||||||
|
deadline: new Date(Date.now() + 7 * 86400000),
|
||||||
|
tags: ['migration', 'nextjs'],
|
||||||
|
todosCount: 12,
|
||||||
|
blockers: ['Tests à mettre à jour']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: 'Optimisation des performances',
|
||||||
|
description: 'Réduction du temps de chargement',
|
||||||
|
priority: 'medium',
|
||||||
|
deadline: new Date(Date.now() + 14 * 86400000),
|
||||||
|
tags: ['performance', 'optimization'],
|
||||||
|
todosCount: 5
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="cards" className="space-y-8">
|
||||||
|
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
|
||||||
|
Cards
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Basic Cards */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Basic Cards</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Basic Card</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-[var(--muted-foreground)]">
|
||||||
|
This is a basic card component with header and content.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<StyledCard>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3 className="text-lg font-semibold text-[var(--foreground)] mb-2">Styled Card</h3>
|
||||||
|
<p className="text-[var(--muted-foreground)]">
|
||||||
|
A styled card with custom styling and hover effects.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</StyledCard>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stat Cards */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Stat Cards</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<StatCard
|
||||||
|
title="Total Tasks"
|
||||||
|
value="42"
|
||||||
|
icon="📋"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Completed"
|
||||||
|
value="28"
|
||||||
|
icon="✅"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="In Progress"
|
||||||
|
value="14"
|
||||||
|
icon="🔄"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
title="Overdue"
|
||||||
|
value="3"
|
||||||
|
icon="⚠️"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Action Cards */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Action Cards</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<ActionCard
|
||||||
|
title="Quick Actions"
|
||||||
|
description="Common actions for task management"
|
||||||
|
icon="⚡"
|
||||||
|
/>
|
||||||
|
<ActionCard
|
||||||
|
title="Settings"
|
||||||
|
description="Configure your workspace"
|
||||||
|
icon="⚙️"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Task Cards */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Task Cards</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<TaskCard
|
||||||
|
id="1"
|
||||||
|
title="Implement user authentication"
|
||||||
|
description="Add login and registration functionality"
|
||||||
|
priority="high"
|
||||||
|
status="in_progress"
|
||||||
|
dueDate={new Date(Date.now() + 3 * 86400000)}
|
||||||
|
tags={['auth', 'security']}
|
||||||
|
/>
|
||||||
|
<TaskCard
|
||||||
|
id="2"
|
||||||
|
title="Design new dashboard"
|
||||||
|
description="Create a modern dashboard interface"
|
||||||
|
priority="medium"
|
||||||
|
status="todo"
|
||||||
|
dueDate={new Date(Date.now() + 7 * 86400000)}
|
||||||
|
tags={['design', 'ui']}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Achievement Cards */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Achievement Cards</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{sampleAchievements.map((achievement, index) => (
|
||||||
|
<AchievementCard
|
||||||
|
key={achievement.id}
|
||||||
|
achievement={achievement}
|
||||||
|
availableTags={[]}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Challenge Cards */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Challenge Cards</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{sampleChallenges.map((challenge, index) => (
|
||||||
|
<ChallengeCard
|
||||||
|
key={challenge.id}
|
||||||
|
challenge={challenge}
|
||||||
|
availableTags={[]}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metric Cards */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Metric Cards</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
<MetricCard
|
||||||
|
title="Performance Score"
|
||||||
|
value="98"
|
||||||
|
subtitle="Excellent"
|
||||||
|
icon="⚡"
|
||||||
|
color="success"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
title="Code Coverage"
|
||||||
|
value="92%"
|
||||||
|
subtitle="Good coverage"
|
||||||
|
icon="📊"
|
||||||
|
color="primary"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
title="Bugs Found"
|
||||||
|
value="3"
|
||||||
|
subtitle="Need attention"
|
||||||
|
icon="🐛"
|
||||||
|
color="warning"
|
||||||
|
/>
|
||||||
|
<MetricCard
|
||||||
|
title="Uptime"
|
||||||
|
value="99.9%"
|
||||||
|
subtitle="Last 30 days"
|
||||||
|
icon="🟢"
|
||||||
|
color="default"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Skeleton Cards */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Skeleton Cards</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<SkeletonCard />
|
||||||
|
<SkeletonCard />
|
||||||
|
<SkeletonCard />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
291
src/components/ui-showcase/sections/DataDisplaySection.tsx
Normal file
291
src/components/ui-showcase/sections/DataDisplaySection.tsx
Normal file
@@ -0,0 +1,291 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ControlPanel, ControlSection, ControlGroup } from '@/components/ui/ControlPanel';
|
||||||
|
import { FilterChip } from '@/components/ui/FilterChip';
|
||||||
|
import { FilterSummary } from '@/components/ui/FilterSummary';
|
||||||
|
import { ColumnHeader } from '@/components/ui/ColumnHeader';
|
||||||
|
import { MetricsGrid } from '@/components/ui/MetricsGrid';
|
||||||
|
import { TagDisplay } from '@/components/ui/TagDisplay';
|
||||||
|
import { CollapsibleSection, CollapsibleItem } from '@/components/ui/CollapsibleSection';
|
||||||
|
|
||||||
|
export function DataDisplaySection() {
|
||||||
|
const sampleTags = [
|
||||||
|
{ id: '1', name: 'refactoring', color: '#3b82f6', usage: 5 },
|
||||||
|
{ id: '2', name: 'ui', color: '#10b981', usage: 8 },
|
||||||
|
{ id: '3', name: 'themes', color: '#8b5cf6', usage: 3 },
|
||||||
|
{ id: '4', name: 'css', color: '#f59e0b', usage: 4 },
|
||||||
|
{ id: '5', name: 'migration', color: '#ef4444', usage: 2 },
|
||||||
|
{ id: '6', name: 'nextjs', color: '#06b6d4', usage: 3 },
|
||||||
|
{ id: '7', name: 'performance', color: '#84cc16', usage: 6 },
|
||||||
|
{ id: '8', name: 'optimization', color: '#f97316', usage: 2 }
|
||||||
|
];
|
||||||
|
|
||||||
|
const collapsibleItems: CollapsibleItem[] = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
title: 'Tâche en attente',
|
||||||
|
subtitle: '15 Jan 2024',
|
||||||
|
metadata: 'Il y a 2 jours',
|
||||||
|
isChecked: false,
|
||||||
|
icon: '📋',
|
||||||
|
actions: [
|
||||||
|
{ label: 'Déplacer', icon: '📅', onClick: () => console.log('Move'), variant: 'primary' },
|
||||||
|
{ label: 'Supprimer', icon: '🗑️', onClick: () => console.log('Delete'), variant: 'destructive' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
title: 'Réunion importante',
|
||||||
|
subtitle: '16 Jan 2024',
|
||||||
|
metadata: 'Dans 1 jour',
|
||||||
|
isChecked: true,
|
||||||
|
icon: '👥',
|
||||||
|
actions: [
|
||||||
|
{ label: 'Modifier', icon: '✏️', onClick: () => console.log('Edit'), variant: 'secondary' },
|
||||||
|
{ label: 'Dupliquer', icon: '📋', onClick: () => console.log('Duplicate'), variant: 'secondary' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="data-display" className="space-y-8">
|
||||||
|
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
|
||||||
|
Data Display & Layout
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Control Panel */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Control Panel</h3>
|
||||||
|
<ControlPanel>
|
||||||
|
<ControlSection>
|
||||||
|
<ControlGroup>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-[var(--foreground)]">Status</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<FilterChip variant="selected">Open</FilterChip>
|
||||||
|
<FilterChip>In Progress</FilterChip>
|
||||||
|
<FilterChip>Done</FilterChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ControlGroup>
|
||||||
|
<ControlGroup>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-[var(--foreground)]">Priority</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<FilterChip>High</FilterChip>
|
||||||
|
<FilterChip variant="selected">Medium</FilterChip>
|
||||||
|
<FilterChip>Low</FilterChip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ControlGroup>
|
||||||
|
</ControlSection>
|
||||||
|
<ControlSection>
|
||||||
|
<ControlGroup>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-[var(--foreground)]">Sort by</label>
|
||||||
|
<select className="w-full p-2 border border-[var(--border)] rounded-lg bg-[var(--background)] text-[var(--foreground)]">
|
||||||
|
<option>Due Date</option>
|
||||||
|
<option>Priority</option>
|
||||||
|
<option>Status</option>
|
||||||
|
<option>Created</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</ControlGroup>
|
||||||
|
</ControlSection>
|
||||||
|
</ControlPanel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Summary */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Filter Summary</h3>
|
||||||
|
<FilterSummary
|
||||||
|
filters={{
|
||||||
|
search: 'urgent',
|
||||||
|
priorities: ['high'],
|
||||||
|
tags: ['refactoring']
|
||||||
|
}}
|
||||||
|
activeFiltersCount={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Column Headers */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Column Headers</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<ColumnHeader
|
||||||
|
title="Tasks"
|
||||||
|
count={42}
|
||||||
|
/>
|
||||||
|
<ColumnHeader
|
||||||
|
title="In Progress"
|
||||||
|
count={14}
|
||||||
|
/>
|
||||||
|
<ColumnHeader
|
||||||
|
title="Completed"
|
||||||
|
count={28}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tag Display */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Tag Display</h3>
|
||||||
|
|
||||||
|
{/* Avec couleurs */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">Avec couleurs et dots</p>
|
||||||
|
<TagDisplay
|
||||||
|
tags={['refactoring', 'ui', 'themes']}
|
||||||
|
availableTags={sampleTags}
|
||||||
|
showColors={true}
|
||||||
|
showDot={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sans couleurs */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">Sans couleurs</p>
|
||||||
|
<TagDisplay
|
||||||
|
tags={['refactoring', 'ui', 'themes']}
|
||||||
|
showColors={false}
|
||||||
|
showDot={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Différentes tailles */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">Tailles différentes</p>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<TagDisplay
|
||||||
|
tags={['small']}
|
||||||
|
availableTags={sampleTags}
|
||||||
|
size="sm"
|
||||||
|
/>
|
||||||
|
<TagDisplay
|
||||||
|
tags={['medium']}
|
||||||
|
availableTags={sampleTags}
|
||||||
|
size="md"
|
||||||
|
/>
|
||||||
|
<TagDisplay
|
||||||
|
tags={['large']}
|
||||||
|
availableTags={sampleTags}
|
||||||
|
size="lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Avec limite */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">Avec limite (max 2)</p>
|
||||||
|
<TagDisplay
|
||||||
|
tags={['refactoring', 'ui', 'themes', 'css', 'migration']}
|
||||||
|
availableTags={sampleTags}
|
||||||
|
maxTags={2}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cliquable */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">Cliquable</p>
|
||||||
|
<TagDisplay
|
||||||
|
tags={['refactoring', 'ui']}
|
||||||
|
availableTags={sampleTags}
|
||||||
|
onClick={(tag) => console.log('Clicked tag:', tag)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Collapsible Section */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Collapsible Section</h3>
|
||||||
|
<CollapsibleSection
|
||||||
|
title="Sample Items"
|
||||||
|
items={collapsibleItems}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Metrics Grid */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Metrics Grid</h3>
|
||||||
|
|
||||||
|
{/* Différentes couleurs */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">Avec couleurs</p>
|
||||||
|
<MetricsGrid
|
||||||
|
metrics={[
|
||||||
|
{ title: 'Tasks Completed', value: '28', color: 'success' },
|
||||||
|
{ title: 'Tasks Created', value: '35', color: 'primary' },
|
||||||
|
{ title: 'Tasks Overdue', value: '3', color: 'destructive' },
|
||||||
|
{ title: 'Avg. Completion Time', value: '2.5d', color: 'warning' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Avec icônes et subtitles */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">Avec icônes et subtitles</p>
|
||||||
|
<MetricsGrid
|
||||||
|
metrics={[
|
||||||
|
{ title: 'Total Tasks', value: '42', subtitle: 'This week', icon: '📋' },
|
||||||
|
{ title: 'Completed', value: '28', subtitle: '+12% from last week', icon: '✅' },
|
||||||
|
{ title: 'In Progress', value: '14', subtitle: 'Active work', icon: '🔄' },
|
||||||
|
{ title: 'Overdue', value: '3', subtitle: 'Need attention', icon: '⚠️' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Différentes colonnes */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">2 colonnes</p>
|
||||||
|
<MetricsGrid
|
||||||
|
columns={2}
|
||||||
|
metrics={[
|
||||||
|
{ title: 'Team Velocity', value: '85%', color: 'success' },
|
||||||
|
{ title: 'Sprint Progress', value: '72%', color: 'primary' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">3 colonnes</p>
|
||||||
|
<MetricsGrid
|
||||||
|
columns={3}
|
||||||
|
metrics={[
|
||||||
|
{ title: 'Bugs Fixed', value: '12', color: 'success' },
|
||||||
|
{ title: 'Features Added', value: '8', color: 'primary' },
|
||||||
|
{ title: 'Tests Written', value: '25', color: 'warning' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sans couleurs */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)]">Sans couleurs (default)</p>
|
||||||
|
<MetricsGrid
|
||||||
|
metrics={[
|
||||||
|
{ title: 'Code Coverage', value: '92%' },
|
||||||
|
{ title: 'Performance Score', value: '98' },
|
||||||
|
{ title: 'Uptime', value: '99.9%' },
|
||||||
|
{ title: 'User Satisfaction', value: '4.8/5' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Skeleton Grid */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Skeleton Grid</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
|
||||||
|
<div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
|
||||||
|
<div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
|
||||||
|
<div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
|
||||||
|
<div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
|
||||||
|
<div className="h-32 bg-[var(--card)] rounded-lg animate-pulse"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
187
src/components/ui-showcase/sections/FeedbackSection.tsx
Normal file
187
src/components/ui-showcase/sections/FeedbackSection.tsx
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Alert as ShadcnAlert, AlertTitle, AlertDescription } from '@/components/ui/Alert';
|
||||||
|
import { AlertBanner, AlertItem } from '@/components/ui/AlertBanner';
|
||||||
|
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||||
|
import { ProgressBar } from '@/components/ui/ProgressBar';
|
||||||
|
import { EmptyState } from '@/components/ui/EmptyState';
|
||||||
|
import { DropZone } from '@/components/ui/DropZone';
|
||||||
|
|
||||||
|
export function FeedbackSection() {
|
||||||
|
const alertItems: AlertItem[] = [
|
||||||
|
{ id: '1', title: 'Tâche critique', icon: '🔴', urgency: 'critical', metadata: 'Dans 1 jour' },
|
||||||
|
{ id: '2', title: 'Réunion urgente', icon: '🟠', urgency: 'high', metadata: 'Dans 2 jours' },
|
||||||
|
{ id: '3', title: 'Rappel', icon: '🟡', urgency: 'medium', metadata: 'Dans 5 jours' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="feedback" className="space-y-8">
|
||||||
|
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
|
||||||
|
Feedback & States
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Alerts */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Alerts</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<ShadcnAlert>
|
||||||
|
<AlertTitle>Information</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
This is an informational alert with some important details.
|
||||||
|
</AlertDescription>
|
||||||
|
</ShadcnAlert>
|
||||||
|
|
||||||
|
<ShadcnAlert variant="success">
|
||||||
|
<AlertTitle>Success</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Your action was completed successfully.
|
||||||
|
</AlertDescription>
|
||||||
|
</ShadcnAlert>
|
||||||
|
|
||||||
|
<ShadcnAlert variant="warning">
|
||||||
|
<AlertTitle>Warning</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Please review this information before proceeding.
|
||||||
|
</AlertDescription>
|
||||||
|
</ShadcnAlert>
|
||||||
|
|
||||||
|
<ShadcnAlert variant="info">
|
||||||
|
<AlertTitle>Info</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Additional information about this process.
|
||||||
|
</AlertDescription>
|
||||||
|
</ShadcnAlert>
|
||||||
|
|
||||||
|
<ShadcnAlert variant="destructive">
|
||||||
|
<AlertTitle>Error</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Something went wrong. Please try again.
|
||||||
|
</AlertDescription>
|
||||||
|
</ShadcnAlert>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Alert Banner */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Alert Banner</h3>
|
||||||
|
<AlertBanner
|
||||||
|
items={alertItems}
|
||||||
|
onDismiss={(id) => console.log('Dismiss alert:', id)}
|
||||||
|
onAction={(id, action) => console.log('Alert action:', id, action)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading States */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Loading States</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)] mb-2">Tailles différentes</p>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<LoadingSpinner size="sm" />
|
||||||
|
<LoadingSpinner size="md" />
|
||||||
|
<LoadingSpinner size="lg" />
|
||||||
|
<span className="text-[var(--muted-foreground)]">Loading...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)] mb-2">Avec texte</p>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<LoadingSpinner size="sm" text="Chargement..." />
|
||||||
|
<LoadingSpinner size="md" text="Synchronisation en cours..." />
|
||||||
|
<LoadingSpinner size="lg" text="Traitement des données..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Progress Bars */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Progress Bars</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)] mb-2">Couleurs différentes</p>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<ProgressBar
|
||||||
|
value={75}
|
||||||
|
label="Default Progress"
|
||||||
|
color="default"
|
||||||
|
/>
|
||||||
|
<ProgressBar
|
||||||
|
value={60}
|
||||||
|
label="Success Progress"
|
||||||
|
color="success"
|
||||||
|
/>
|
||||||
|
<ProgressBar
|
||||||
|
value={45}
|
||||||
|
label="Warning Progress"
|
||||||
|
color="warning"
|
||||||
|
/>
|
||||||
|
<ProgressBar
|
||||||
|
value={90}
|
||||||
|
label="Destructive Progress"
|
||||||
|
color="destructive"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)] mb-2">Avec et sans pourcentage</p>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<ProgressBar
|
||||||
|
value={50}
|
||||||
|
label="Avec pourcentage"
|
||||||
|
showPercentage={true}
|
||||||
|
/>
|
||||||
|
<ProgressBar
|
||||||
|
value={50}
|
||||||
|
label="Sans pourcentage"
|
||||||
|
showPercentage={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-[var(--muted-foreground)] mb-2">Sans label</p>
|
||||||
|
<ProgressBar
|
||||||
|
value={80}
|
||||||
|
showPercentage={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Empty States */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Empty States</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<EmptyState
|
||||||
|
icon="📋"
|
||||||
|
title="No tasks found"
|
||||||
|
description="Create your first task to get started"
|
||||||
|
/>
|
||||||
|
<EmptyState
|
||||||
|
icon="🔍"
|
||||||
|
title="No search results"
|
||||||
|
description="Try adjusting your search criteria"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Drop Zone */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Drop Zone</h3>
|
||||||
|
<DropZone>
|
||||||
|
<div className="text-center p-8">
|
||||||
|
<div className="text-4xl mb-4">📁</div>
|
||||||
|
<p className="text-[var(--foreground)] font-medium mb-2">Drop files here</p>
|
||||||
|
<p className="text-[var(--muted-foreground)] text-sm">
|
||||||
|
Or click to browse files
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</DropZone>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
155
src/components/ui-showcase/sections/FormsSection.tsx
Normal file
155
src/components/ui-showcase/sections/FormsSection.tsx
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { SearchInput } from '@/components/ui/SearchInput';
|
||||||
|
import { TagInput } from '@/components/ui/TagInput';
|
||||||
|
import { DateTimeInput } from '@/components/ui/DateTimeInput';
|
||||||
|
import { FormField } from '@/components/ui/FormField';
|
||||||
|
import { PrioritySelector } from '@/components/ui/PrioritySelector';
|
||||||
|
import { DailyAddForm } from '@/components/ui/DailyAddForm';
|
||||||
|
import { CheckboxItem, CheckboxItemData } from '@/components/ui/CheckboxItem';
|
||||||
|
|
||||||
|
export function FormsSection() {
|
||||||
|
const [inputValue, setInputValue] = useState('');
|
||||||
|
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||||
|
const [checkboxItems, setCheckboxItems] = useState<CheckboxItemData[]>([
|
||||||
|
{ id: '1', text: 'Tâche complétée', isChecked: true, type: 'task' },
|
||||||
|
{ id: '2', text: 'Réunion importante', isChecked: false, type: 'meeting' },
|
||||||
|
{ id: '3', text: 'Tâche en cours', isChecked: false, type: 'task' }
|
||||||
|
]);
|
||||||
|
|
||||||
|
const handleAddCheckbox = (text: string) => {
|
||||||
|
const newItem: CheckboxItemData = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
text,
|
||||||
|
isChecked: false,
|
||||||
|
type: 'task'
|
||||||
|
};
|
||||||
|
setCheckboxItems(prev => [...prev, newItem]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleCheckbox = (id: string) => {
|
||||||
|
setCheckboxItems(prev =>
|
||||||
|
prev.map(item =>
|
||||||
|
item.id === id ? { ...item, isChecked: !item.isChecked } : item
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateCheckbox = (id: string, text: string) => {
|
||||||
|
setCheckboxItems(prev =>
|
||||||
|
prev.map(item =>
|
||||||
|
item.id === id ? { ...item, text } : item
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="forms" className="space-y-8">
|
||||||
|
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
|
||||||
|
Forms & Inputs
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Basic Inputs */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Basic Inputs</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Input
|
||||||
|
placeholder="Enter text..."
|
||||||
|
value={inputValue}
|
||||||
|
onChange={(e) => setInputValue(e.target.value)}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
placeholder="Disabled input"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
placeholder="With error"
|
||||||
|
className="border-[var(--destructive)]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<SearchInput
|
||||||
|
placeholder="Search tasks..."
|
||||||
|
/>
|
||||||
|
<SearchInput
|
||||||
|
placeholder="Search with filters..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form Fields */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Form Fields</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<FormField
|
||||||
|
placeholder="Enter task title..."
|
||||||
|
value={inputValue}
|
||||||
|
onChange={(e) => setInputValue(e)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
placeholder="Enter description..."
|
||||||
|
value=""
|
||||||
|
onChange={() => {}}
|
||||||
|
/>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-[var(--foreground)]">Priority</label>
|
||||||
|
<PrioritySelector
|
||||||
|
value="medium"
|
||||||
|
onChange={(priority) => console.log('Priority:', priority)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-[var(--foreground)]">Due Date</label>
|
||||||
|
<DateTimeInput
|
||||||
|
value={selectedDate}
|
||||||
|
onChange={(date) => date && setSelectedDate(date)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tag Input */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Tag Input</h3>
|
||||||
|
<TagInput
|
||||||
|
placeholder="Add tags..."
|
||||||
|
tags={[]}
|
||||||
|
onChange={() => {}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Checkbox Items */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Checkbox Items</h3>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{checkboxItems.map((item) => (
|
||||||
|
<CheckboxItem
|
||||||
|
key={item.id}
|
||||||
|
item={item}
|
||||||
|
onToggle={async () => handleToggleCheckbox(item.id)}
|
||||||
|
onUpdate={async (text) => handleUpdateCheckbox(item.id, text)}
|
||||||
|
onDelete={async () => {
|
||||||
|
setCheckboxItems(prev => prev.filter(i => i.id !== item.id));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Daily Add Form */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Daily Add Form</h3>
|
||||||
|
<DailyAddForm
|
||||||
|
placeholder="Add new daily item..."
|
||||||
|
onAdd={async () => console.log('Add item')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
157
src/components/ui-showcase/sections/NavigationSection.tsx
Normal file
157
src/components/ui-showcase/sections/NavigationSection.tsx
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { Header } from '@/components/ui/Header';
|
||||||
|
import { Tabs, TabItem } from '@/components/ui/Tabs';
|
||||||
|
import { Calendar } from '@/components/ui/Calendar';
|
||||||
|
import { PeriodSelector } from '@/components/ui/PeriodSelector';
|
||||||
|
import { ToggleButton } from '@/components/ui/ToggleButton';
|
||||||
|
import { FontSizeToggle } from '@/components/ui/FontSizeToggle';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { KeyboardShortcutsModal } from '@/components/ui/KeyboardShortcutsModal';
|
||||||
|
|
||||||
|
export function NavigationSection() {
|
||||||
|
const [activeTab, setActiveTab] = useState('tab1');
|
||||||
|
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||||
|
const [selectedPeriod, setSelectedPeriod] = useState('7d');
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
const [showKeyboardModal, setShowKeyboardModal] = useState(false);
|
||||||
|
const [isToggled, setIsToggled] = useState(false);
|
||||||
|
|
||||||
|
const tabItems: TabItem[] = [
|
||||||
|
{ id: 'tab1', label: 'Vue Executive', icon: '📝' },
|
||||||
|
{ id: 'tab2', label: 'Accomplissements', icon: '✅', count: 5 },
|
||||||
|
{ id: 'tab3', label: 'Enjeux', icon: '🎯', count: 3 },
|
||||||
|
{ id: 'tab4', label: 'Métriques', icon: '📊' }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section id="navigation" className="space-y-8">
|
||||||
|
<h2 className="text-2xl font-mono font-semibold text-[var(--foreground)] border-b border-[var(--border)] pb-3">
|
||||||
|
Navigation & Controls
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Header</h3>
|
||||||
|
<Header
|
||||||
|
title="Sample Header"
|
||||||
|
subtitle="This is a sample header component"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tabs */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Tabs</h3>
|
||||||
|
<Tabs
|
||||||
|
items={tabItems}
|
||||||
|
activeTab={activeTab}
|
||||||
|
onTabChange={setActiveTab}
|
||||||
|
/>
|
||||||
|
<div className="p-4 bg-[var(--card)] rounded-lg">
|
||||||
|
<p className="text-[var(--muted-foreground)]">
|
||||||
|
Active tab: <span className="font-mono">{activeTab}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Calendar */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Calendar</h3>
|
||||||
|
<div className="max-w-md">
|
||||||
|
<Calendar
|
||||||
|
currentDate={selectedDate}
|
||||||
|
onDateSelect={setSelectedDate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Period Selector */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Period Selector</h3>
|
||||||
|
<PeriodSelector
|
||||||
|
selectedValue={selectedPeriod}
|
||||||
|
onValueChange={setSelectedPeriod}
|
||||||
|
options={[
|
||||||
|
{ value: '1d', label: '1 jour' },
|
||||||
|
{ value: '7d', label: '7 jours' },
|
||||||
|
{ value: '30d', label: '30 jours' },
|
||||||
|
{ value: '90d', label: '90 jours' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Toggle Buttons */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Toggle Buttons</h3>
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<ToggleButton
|
||||||
|
isActive={isToggled}
|
||||||
|
onClick={() => setIsToggled(!isToggled)}
|
||||||
|
icon="🔔"
|
||||||
|
/>
|
||||||
|
<ToggleButton
|
||||||
|
isActive={!isToggled}
|
||||||
|
onClick={() => setIsToggled(!isToggled)}
|
||||||
|
icon="🌙"
|
||||||
|
/>
|
||||||
|
<FontSizeToggle />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modals */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3 className="text-lg font-medium text-[var(--foreground)]">Modals</h3>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(true)}
|
||||||
|
className="px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:bg-[var(--primary)]/90"
|
||||||
|
>
|
||||||
|
Open Modal
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowKeyboardModal(true)}
|
||||||
|
className="px-4 py-2 bg-[var(--secondary)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)]/90"
|
||||||
|
>
|
||||||
|
Keyboard Shortcuts
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Components */}
|
||||||
|
<Modal
|
||||||
|
isOpen={showModal}
|
||||||
|
onClose={() => setShowModal(false)}
|
||||||
|
title="Example Modal"
|
||||||
|
>
|
||||||
|
<div className="p-6">
|
||||||
|
<p className="text-[var(--muted-foreground)] mb-4">
|
||||||
|
This is an example modal with some content.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-end gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(false)}
|
||||||
|
className="px-4 py-2 bg-[var(--secondary)] text-[var(--foreground)] rounded-lg hover:bg-[var(--secondary)]/90"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowModal(false)}
|
||||||
|
className="px-4 py-2 bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:bg-[var(--primary)]/90"
|
||||||
|
>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<KeyboardShortcutsModal
|
||||||
|
isOpen={showKeyboardModal}
|
||||||
|
onClose={() => setShowKeyboardModal(false)}
|
||||||
|
shortcuts={[]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
src/components/ui-showcase/sections/index.ts
Normal file
7
src/components/ui-showcase/sections/index.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export { ButtonsSection } from './ButtonsSection';
|
||||||
|
export { BadgesSection } from './BadgesSection';
|
||||||
|
export { CardsSection } from './CardsSection';
|
||||||
|
export { FormsSection } from './FormsSection';
|
||||||
|
export { NavigationSection } from './NavigationSection';
|
||||||
|
export { FeedbackSection } from './FeedbackSection';
|
||||||
|
export { DataDisplaySection } from './DataDisplaySection';
|
||||||
Reference in New Issue
Block a user