import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import {
  TypeBold,
  TypeItalic,
  TypeText,
  TypeUnderline,
} from "@mynaui/icons-react";

export default function Sizes() {
  return (
    <>
      <ToggleGroup variant="outline" type="single" size="sm">
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          <TypeBold className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          <TypeItalic className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline" aria-label="Toggle underline">
          <TypeUnderline className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="text" aria-label="Toggle text">
          <TypeText className="size-4" stroke={2} />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup variant="outline" type="single">
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          <TypeBold className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          <TypeItalic className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline" aria-label="Toggle underline">
          <TypeUnderline className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="text" aria-label="Toggle text">
          <TypeText className="size-4" stroke={2} />
        </ToggleGroupItem>
      </ToggleGroup>
      <ToggleGroup variant="outline" type="single" size="lg">
        <ToggleGroupItem value="bold" aria-label="Toggle bold">
          <TypeBold className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="italic" aria-label="Toggle italic">
          <TypeItalic className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="underline" aria-label="Toggle underline">
          <TypeUnderline className="size-4" stroke={2} />
        </ToggleGroupItem>
        <ToggleGroupItem value="text" aria-label="Toggle text">
          <TypeText className="size-4" stroke={2} />
        </ToggleGroupItem>
      </ToggleGroup>
    </>
  );
}
Toggle and Toggle Group
