Components

Guide des composants et patterns utilisés dans Wagoo.

Composants UI

Wagoo utilise shadcn/ui pour tous les composants.

Composants disponibles :

• Button
• Card
• Dialog
• Form
• Input
• Select
• Textarea
• Tabs
• Badge
• Alert
• Popover
• Tooltip

Voir Composants UI pour des exemples.

Éditeur TipTap

Le blog utilise TipTap pour l’édition riche avec :

• Autocomplétion
• Mentions
• Emojis
• Code syntax highlighting

Voir Éditeur TipTap.

Layouts

Structures de mise en page courantes :

• Sidebar navigation
• Main container
• Header/Footer
• Responsive grids

Voir Layouts.

Patterns

Patterns React courants :

• Context API
• Form handling
• Data fetching
• Error handling

Voir Patterns.

Installation

Tous les composants sont dans components/:

components/
├── ui/
│   ├── button.tsx
│   ├── card.tsx
│   ├── dialog.tsx
│   └── ...
├── layout/
│   ├── sidebar.tsx
│   └── header.tsx
├── forms/
│   ├── login-form.tsx
│   └── project-form.tsx
└── common/
    ├── navbar.tsx
    └── footer.tsx

Utilisation

import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
 
export default function MyComponent() {
  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  );
}

Voir Stack Technologique pour plus de détails sur shadcn/ui.