Toggle and Toggle Group

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

export default function Basic() {
  return (
    <ToggleGroup type="multiple">
      <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>
  );
}

import { Toggle } from "@/components/ui/toggle";
import { TypeBold } from "@mynaui/icons-react";

export default function Single() {
  return (
    <Toggle aria-label="Toggle bold">
      <TypeBold className="size-4" stroke={2} />
    </Toggle>
  );
}

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

export default function Outline() {
  return (
    <ToggleGroup variant="outline" type="multiple">
      <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>
  );
}

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

export default function WithText() {
  return (
    <ToggleGroup variant="outline" type="multiple">
      <ToggleGroupItem
        className="min-w-auto"
        value="bold"
        aria-label="Toggle bold"
      >
        <TypeBold className="stroke-2" />
        Bold
      </ToggleGroupItem>
      <ToggleGroupItem
        className="min-w-auto"
        value="italic"
        aria-label="Toggle italic"
      >
        <TypeItalic className="stroke-2" />
        Italic
      </ToggleGroupItem>
      <ToggleGroupItem
        className="min-w-auto"
        value="underline"
        aria-label="Toggle underline"
      >
        <TypeUnderline className="stroke-2" />
        Underline
      </ToggleGroupItem>
      <ToggleGroupItem
        className="min-w-auto"
        value="text"
        aria-label="Toggle text"
      >
        <TypeText className="stroke-2" />
        Text
      </ToggleGroupItem>
    </ToggleGroup>
  );
}

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>
    </>
  );
}