import * as React from "react";
 
import { Radio } from "@/components/ui/radio";
import { RadioGroup } from "@/components/ui/radio-group";
import { Stack } from "@/components/ui/stack";
 
export function RadioExample(): React.JSX.Element {
  return (
    <RadioGroup defaultValue="light">
      <Stack alignItems="center" direction="row" gap={2}>
        <Radio value="light" />
        <span>Light</span>
      </Stack>
      <Stack alignItems="center" direction="row" gap={2}>
        <Radio value="dark" />
        <span>Dark</span>
      </Stack>
      <Stack alignItems="center" direction="row" gap={2}>
        <Radio value="system" />
        <span>System</span>
      </Stack>
    </RadioGroup>
  );
}

"use client";
 
import * as React from "react";
 
import { Button } from "@/components/ui/button";
import { Field, FieldControl, FieldLabel } from "@/components/ui/field";
import { Radio } from "@/components/ui/radio";
import { RadioGroup } from "@/components/ui/radio-group";
import { Stack } from "@/components/ui/stack";
import { Text } from "@/components/ui/text";
 
export function RadioExample(): React.JSX.Element {
  const [value, setValue] = React.useState<string>("all");
 
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    console.log("Form value:", value);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <Stack gap={6}>
        <Field>
          <FieldLabel>Notify me about...</FieldLabel>
          <RadioGroup
            name="notify"
            onValueChange={(value) => {
              setValue(value as string);
            }}
            value={value}
          >
            <Stack alignItems="center" direction="row" gap={2}>
              <FieldControl render={<Radio disabled value="all" />} />
              <Text fontSize="sm">All new messages</Text>
            </Stack>
            <Stack alignItems="center" direction="row" gap={2}>
              <FieldControl render={<Radio value="mentions" />} />
              <Text fontSize="sm">Direct messages and mentions</Text>
            </Stack>
            <Stack alignItems="center" direction="row" gap={2}>
              <FieldControl render={<Radio value="none" />} />
              <Text fontSize="sm">Nothing</Text>
            </Stack>
          </RadioGroup>
        </Field>
        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  );
}