496 lines
17 KiB
TypeScript
496 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Navigation from "@/components/Navigation";
|
|
import {
|
|
Button,
|
|
Input,
|
|
Textarea,
|
|
Card,
|
|
Badge,
|
|
Alert,
|
|
Modal,
|
|
ProgressBar,
|
|
StarRating,
|
|
Avatar,
|
|
SectionTitle,
|
|
BackgroundSection,
|
|
CloseButton,
|
|
} from "@/components/ui";
|
|
|
|
export default function StyleGuidePage() {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [inputValue, setInputValue] = useState("");
|
|
const [textareaValue, setTextareaValue] = useState("");
|
|
const [rating, setRating] = useState(0);
|
|
|
|
return (
|
|
<main className="min-h-screen bg-black relative">
|
|
<Navigation />
|
|
<BackgroundSection backgroundImage="/got-2.jpg" className="pt-24 pb-16">
|
|
<div className="w-full max-w-6xl mx-auto px-8">
|
|
<SectionTitle variant="gradient" size="xl" className="mb-12">
|
|
STYLE GUIDE
|
|
</SectionTitle>
|
|
<p className="text-gray-400 text-center mb-12 max-w-3xl mx-auto">
|
|
Guide de style complet avec tous les composants UI disponibles et
|
|
leurs variantes
|
|
</p>
|
|
|
|
{/* Buttons */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">
|
|
Buttons
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
|
|
<div className="flex flex-wrap gap-4">
|
|
<Button variant="primary">Primary</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="success">Success</Button>
|
|
<Button variant="danger">Danger</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
|
|
<div className="flex flex-wrap items-center gap-4">
|
|
<Button variant="primary" size="sm">
|
|
Small
|
|
</Button>
|
|
<Button variant="primary" size="md">
|
|
Medium
|
|
</Button>
|
|
<Button variant="primary" size="lg">
|
|
Large
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">États</h3>
|
|
<div className="flex flex-wrap gap-4">
|
|
<Button variant="primary">Normal</Button>
|
|
<Button variant="primary" disabled>
|
|
Disabled
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Inputs */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">Inputs</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Types</h3>
|
|
<div className="space-y-4 max-w-md">
|
|
<Input
|
|
label="Text Input"
|
|
type="text"
|
|
placeholder="Entrez du texte"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
/>
|
|
<Input
|
|
label="Email Input"
|
|
type="email"
|
|
placeholder="email@example.com"
|
|
/>
|
|
<Input
|
|
label="Password Input"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
/>
|
|
<Input
|
|
label="Number Input"
|
|
type="number"
|
|
placeholder="123"
|
|
/>
|
|
<Input
|
|
label="Date Input"
|
|
type="date"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Avec erreur</h3>
|
|
<div className="max-w-md">
|
|
<Input
|
|
label="Input avec erreur"
|
|
type="text"
|
|
error="Ce champ est requis"
|
|
value={inputValue}
|
|
onChange={(e) => setInputValue(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Textarea */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">
|
|
Textarea
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Basique</h3>
|
|
<div className="max-w-md">
|
|
<Textarea
|
|
label="Commentaire"
|
|
placeholder="Écrivez votre commentaire..."
|
|
value={textareaValue}
|
|
onChange={(e) => setTextareaValue(e.target.value)}
|
|
rows={4}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">
|
|
Avec compteur de caractères
|
|
</h3>
|
|
<div className="max-w-md">
|
|
<Textarea
|
|
label="Bio"
|
|
placeholder="Parlez-nous de vous..."
|
|
value={textareaValue}
|
|
onChange={(e) => setTextareaValue(e.target.value)}
|
|
rows={4}
|
|
maxLength={500}
|
|
showCharCount
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Avec erreur</h3>
|
|
<div className="max-w-md">
|
|
<Textarea
|
|
label="Textarea avec erreur"
|
|
placeholder="Écrivez quelque chose..."
|
|
error="Ce champ est requis"
|
|
value={textareaValue}
|
|
onChange={(e) => setTextareaValue(e.target.value)}
|
|
rows={4}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Badges */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">Badges</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
|
|
<div className="flex flex-wrap gap-4">
|
|
<Badge variant="default">Default</Badge>
|
|
<Badge variant="success">Success</Badge>
|
|
<Badge variant="warning">Warning</Badge>
|
|
<Badge variant="danger">Danger</Badge>
|
|
<Badge variant="info">Info</Badge>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
|
|
<div className="flex flex-wrap items-center gap-4">
|
|
<Badge variant="default" size="sm">
|
|
Small
|
|
</Badge>
|
|
<Badge variant="default" size="md">
|
|
Medium
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Alerts */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">Alerts</h2>
|
|
<div className="space-y-4 max-w-md">
|
|
<Alert variant="success">
|
|
Opération réussie ! Votre action a été effectuée avec succès.
|
|
</Alert>
|
|
<Alert variant="error">
|
|
Une erreur est survenue. Veuillez réessayer.
|
|
</Alert>
|
|
<Alert variant="warning">
|
|
Attention ! Cette action est irréversible.
|
|
</Alert>
|
|
<Alert variant="info">
|
|
Information : Voici quelques informations utiles.
|
|
</Alert>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Cards */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">Cards</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Card variant="default" className="p-4">
|
|
<h3 className="text-lg font-bold text-pixel-gold mb-2">
|
|
Card Default
|
|
</h3>
|
|
<p className="text-gray-300 text-sm">
|
|
Contenu de la carte avec variant default
|
|
</p>
|
|
</Card>
|
|
<Card variant="dark" className="p-4">
|
|
<h3 className="text-lg font-bold text-pixel-gold mb-2">
|
|
Card Dark
|
|
</h3>
|
|
<p className="text-gray-300 text-sm">
|
|
Contenu de la carte avec variant dark
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Progress Bars */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">
|
|
Progress Bars
|
|
</h2>
|
|
<div className="space-y-6 max-w-md">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">HP Bar (High)</h3>
|
|
<ProgressBar
|
|
value={75}
|
|
max={100}
|
|
variant="hp"
|
|
showLabel
|
|
label="HP"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">HP Bar (Medium)</h3>
|
|
<ProgressBar
|
|
value={45}
|
|
max={100}
|
|
variant="hp"
|
|
showLabel
|
|
label="HP"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">HP Bar (Low)</h3>
|
|
<ProgressBar
|
|
value={20}
|
|
max={100}
|
|
variant="hp"
|
|
showLabel
|
|
label="HP"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">XP Bar</h3>
|
|
<ProgressBar
|
|
value={60}
|
|
max={100}
|
|
variant="xp"
|
|
showLabel
|
|
label="XP"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Default</h3>
|
|
<ProgressBar
|
|
value={50}
|
|
max={100}
|
|
variant="default"
|
|
showLabel
|
|
label="Progress"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Sans label</h3>
|
|
<ProgressBar value={60} max={100} variant="default" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Star Rating */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">
|
|
Star Rating
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Interactif</h3>
|
|
<StarRating
|
|
value={rating}
|
|
onChange={setRating}
|
|
showValue
|
|
/>
|
|
<p className="text-gray-400 text-sm mt-2">
|
|
Note sélectionnée : {rating}/5
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<p className="text-gray-400 text-sm mb-2">Small</p>
|
|
<StarRating value={4} size="sm" />
|
|
</div>
|
|
<div>
|
|
<p className="text-gray-400 text-sm mb-2">Medium</p>
|
|
<StarRating value={4} size="md" />
|
|
</div>
|
|
<div>
|
|
<p className="text-gray-400 text-sm mb-2">Large</p>
|
|
<StarRating value={4} size="lg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Avatar */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">Avatar</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
|
|
<div className="flex items-center gap-6">
|
|
<Avatar
|
|
src="/avatar-1.jpg"
|
|
username="User"
|
|
size="sm"
|
|
/>
|
|
<Avatar
|
|
src="/avatar-2.jpg"
|
|
username="User"
|
|
size="md"
|
|
/>
|
|
<Avatar
|
|
src="/avatar-3.jpg"
|
|
username="User"
|
|
size="lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">
|
|
Sans image (fallback)
|
|
</h3>
|
|
<Avatar username="John Doe" size="lg" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Section Title */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">
|
|
Section Title
|
|
</h2>
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Variantes</h3>
|
|
<div className="space-y-4">
|
|
<SectionTitle variant="default" size="md">
|
|
Default Title
|
|
</SectionTitle>
|
|
<SectionTitle variant="gradient" size="md">
|
|
Gradient Title
|
|
</SectionTitle>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
|
|
<div className="space-y-4">
|
|
<SectionTitle variant="gradient" size="sm">
|
|
Small Title
|
|
</SectionTitle>
|
|
<SectionTitle variant="gradient" size="md">
|
|
Medium Title
|
|
</SectionTitle>
|
|
<SectionTitle variant="gradient" size="lg">
|
|
Large Title
|
|
</SectionTitle>
|
|
<SectionTitle variant="gradient" size="xl">
|
|
Extra Large Title
|
|
</SectionTitle>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Avec sous-titre</h3>
|
|
<SectionTitle
|
|
variant="gradient"
|
|
size="lg"
|
|
subtitle="Un sous-titre descriptif"
|
|
>
|
|
Title with Subtitle
|
|
</SectionTitle>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Modal */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">Modal</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
|
|
<div className="flex flex-wrap gap-4">
|
|
<Button onClick={() => setModalOpen(true)}>
|
|
Ouvrir Modal
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Close Button */}
|
|
<Card variant="dark" className="p-6 mb-8">
|
|
<h2 className="text-2xl font-bold text-pixel-gold mb-6">
|
|
Close Button
|
|
</h2>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Tailles</h3>
|
|
<div className="flex items-center gap-6">
|
|
<CloseButton onClick={() => {}} size="sm" />
|
|
<CloseButton onClick={() => {}} size="md" />
|
|
<CloseButton onClick={() => {}} size="lg" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg text-gray-300 mb-3">Disabled</h3>
|
|
<CloseButton onClick={() => {}} disabled />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Modal Demo */}
|
|
<Modal
|
|
isOpen={modalOpen}
|
|
onClose={() => setModalOpen(false)}
|
|
size="md"
|
|
>
|
|
<div className="p-8">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold text-pixel-gold">
|
|
Exemple de Modal
|
|
</h2>
|
|
<CloseButton onClick={() => setModalOpen(false)} />
|
|
</div>
|
|
<p className="text-gray-300 mb-6">
|
|
Ceci est un exemple de modal avec différentes tailles
|
|
disponibles.
|
|
</p>
|
|
<div className="flex gap-4">
|
|
<Button onClick={() => setModalOpen(false)}>Fermer</Button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
</BackgroundSection>
|
|
</main>
|
|
);
|
|
}
|
|
|