Button group using icons for visual actions

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export function Pattern() {
  return (
    <ButtonGroup>
      <Button variant="outline" size="icon">
        <IconPlaceholder
          lucide="FlipHorizontalIcon"
          tabler="IconBorderHorizontal"
          hugeicons="BorderHorizontalIcon"
          phosphor="SquareSplitHorizontalIcon"
          remixicon="RiSplitCellsHorizontal"
          aria-hidden="true"
        />
      </Button>
      <Button variant="outline" size="icon">
        <IconPlaceholder
          lucide="FlipVerticalIcon"
          tabler="IconBorderVertical"
          hugeicons="BorderVerticalIcon"
          phosphor="SquareSplitVerticalIcon"
          remixicon="RiSplitCellsVertical"
          aria-hidden="true"
        />
      </Button>
      <Button variant="outline" size="icon">
        <IconPlaceholder
          lucide="RotateCwIcon"
          tabler="IconRotateClockwise"
          hugeicons="Rotate01Icon"
          phosphor="ArrowClockwiseIcon"
          remixicon="RiResetRightLine"
          aria-hidden="true"
        />
      </Button>
    </ButtonGroup>
  )
}