Add Footer component to layout and remove StyleGuidePage
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m19s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 2m19s
This commit is contained in:
Julien Froidefond
495
app/style-guide/page.tsx
Normal file
495
app/style-guide/page.tsx
Normal file
@@ -0,0 +1,495 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Navigation from "@/components/navigation/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 src={null} 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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user