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
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user