Component Test

Button Component

Variants

<Button variant="default">Default Button</Button>
<Button variant="destructive">Destructive Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="link">Link Button</Button>

Sizes

<Button size="default">Default Size</Button>
<Button size="sm">Small Size</Button>
<Button size="lg">Large Size</Button>
<Button size="icon">Icon</Button>

States

<Button>Normal State</Button>
<Button disabled>Disabled State</Button>
<Button loading>Loading State</Button>
<Button active>Active State</Button>

With Icons

<Button>
  <PlusIcon className="mr-2 h-4 w-4" /> Add Item
</Button>

<Button>
  <ArrowRightIcon className="ml-2 h-4 w-4" /> Continue
</Button>

<Button size="icon">
  <BellIcon className="h-4 w-4" />
</Button>

Email Subscription Form

Success State

<Form onSubmit={handleSubmit}>
  <Input
    type="email"
    placeholder="Enter your email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
  />
  <Button type="submit">Subscribe</Button>
  {success && (
    <Alert variant="success">
      Thanks for subscribing!
    </Alert>
  )}
</Form>

Error State

<Form onSubmit={handleSubmit}>
  <Input
    type="email"
    placeholder="Enter your email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
    error={error}
  />
  <Button type="submit">Subscribe</Button>
  {error && (
    <Alert variant="error">
      {error}
    </Alert>
  )}
</Form>

Card Component

Basic Card

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content goes here</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Interactive Card

<Card
  as="button"
  onClick={handleClick}
  className="hover:bg-muted"
>
  <CardHeader>
    <CardTitle>Interactive Card</CardTitle>
  </CardHeader>
  <CardContent>
    Click me!
  </CardContent>
</Card>

Dialog Component

Basic Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        Dialog description goes here.
      </DialogDescription>
    </DialogHeader>
    <div className="py-4">
      Dialog content
    </div>
    <DialogFooter>
      <Button onClick={onClose}>Close</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Alert Dialog

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={handleDelete}>
        Delete
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>