Field

// owner: Sona
"use client";

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";

export default function FieldExample() {
  return (
    <FieldSet>
      <FieldLegend>Project metadata</FieldLegend>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="name">Name</FieldLabel>
          <FieldContent>
            <Input id="name" defaultValue="Automation" />
            <FieldDescription>
              Visible to everyone in the workspace.
            </FieldDescription>
          </FieldContent>
        </Field>
        <Field>
          <FieldLabel htmlFor="slug">Slug</FieldLabel>
          <FieldContent>
            <Input id="slug" defaultValue="automation" />
            <FieldError errors={[{ message: "Slug already taken" }]} />
          </FieldContent>
        </Field>
      </FieldGroup>
      <FieldSeparator>Notifications</FieldSeparator>
      <FieldGroup>
        <Field orientation="horizontal">
          <FieldTitle>Daily summaries</FieldTitle>
          <FieldContent>
            <Switch defaultChecked />
            <FieldDescription>
              Send a summary email every morning.
            </FieldDescription>
          </FieldContent>
        </Field>
        <Field orientation="horizontal">
          <FieldTitle>Slack alerts</FieldTitle>
          <FieldContent>
            <Switch />
            <FieldDescription>
              Send deployment alerts to the #ops channel.
            </FieldDescription>
          </FieldContent>
        </Field>
      </FieldGroup>
      <Button className="w-fit">Save changes</Button>
    </FieldSet>
  );
}