Composants UI

import { Button } from "@/components/ui/button";
 
export default function Example() {
  return (
    <>
      <Button>Défaut</Button>
      <Button variant="secondary">Secondaire</Button>
      <Button variant="destructive">Danger</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button disabled>Désactivé</Button>
      <Button size="sm">Petit</Button>
      <Button size="lg">Grand</Button>
    </>
  );
}

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 
export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Titre de la carte</CardTitle>
      </CardHeader>
      <CardContent>
        Contenu ici
      </CardContent>
    </Card>
  );
}

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Ouvrir dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Titre du dialog</DialogTitle>
        </DialogHeader>
        Contenu du dialog
      </DialogContent>
    </Dialog>
  );
}

import { useForm } from "react-hook-form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
 
export default function LoginForm() {
  const { register, handleSubmit } = useForm();
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input {...register("email")} placeholder="Email" />
      <Input {...register("password")} type="password" placeholder="Password" />
      <Button type="submit">Login</Button>
    </form>
  );
}

import { Input } from "@/components/ui/input";
 
export default function Example() {
  return (
    <>
      <Input placeholder="Texte" />
      <Input type="email" placeholder="Email" />
      <Input type="password" placeholder="Password" />
      <Input disabled placeholder="Désactivé" />
    </>
  );
}

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
 
export default function Example() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Sélectionner..." />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="option1">Option 1</SelectItem>
        <SelectItem value="option2">Option 2</SelectItem>
      </SelectContent>
    </Select>
  );
}

import { Textarea } from "@/components/ui/textarea";
 
export default function Example() {
  return (
    <Textarea placeholder="Écrivez votre message..." rows={4} />
  );
}

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 
export default function Example() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Contenu 1</TabsContent>
      <TabsContent value="tab2">Contenu 2</TabsContent>
    </Tabs>
  );
}

import { Badge } from "@/components/ui/badge";
 
export default function Example() {
  return (
    <>
      <Badge>Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </>
  );
}

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 
export default function Example() {
  return (
    <Alert>
      <AlertTitle>Attention!</AlertTitle>
      <AlertDescription>Ceci est un message d'alerte.</AlertDescription>
    </Alert>
  );
}

import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
 
export default function Example() {
  return (
    <Tooltip>
      <TooltipTrigger>Hover me</TooltipTrigger>
      <TooltipContent>Ceci est une info-bulle</TooltipContent>
    </Tooltip>
  );
}

import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
 
export default function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Ouvrir popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        Contenu du popover
      </PopoverContent>
    </Popover>
  );
}

<Button className="bg-blue-600 hover:bg-blue-700">Custom</Button>