Label

"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  Label,
  Input,
  Button
} from "@pimolu/react";

export function DemoExample() {
  return (
    <div
      className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,280px),1fr))] gap-6 min-w-0 items-start"
    >
      <Card>
        <CardHeader>
          <CardTitle>Sign in</CardTitle>
          <CardDescription>Labels linked to their fields with htmlFor.</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            <div className="grid gap-5 min-w-0">
              <Label htmlFor="login-email" required>Email</Label>
              <Input id="login-email" type="email" placeholder="you@example.com" />
            </div>
            <div className="grid gap-5 min-w-0">
              <Label htmlFor="login-password" required>Password</Label>
              <Input id="login-password" type="password" placeholder="••••••••" />
            </div>
            <Button>Sign in</Button>
          </div>
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Invite</CardTitle>
          <CardDescription>
            The optional hint makes the requirement explicit.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-5 min-w-0">
            <div className="grid gap-5 min-w-0">
              <Label htmlFor="invite-email" required>Email</Label>
              <Input
                id="invite-email"
                type="email"
                placeholder="teammate@example.com"
              />
            </div>
            <div className="grid gap-5 min-w-0">
              <Label htmlFor="invite-message" optional optionalLabel="Optional">Message</Label>
              <Input id="invite-message" placeholder="Welcome to the team" />
            </div>
            <Button appearance="outline">Send invitation</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}