Button Group

"use client"

import { Button } from "@/components/ui/preskok-ui/button"
import {
  ButtonGroup,
  ButtonGroupText,
} from "@/components/ui/preskok-ui/button-group"

export function ButtonGroupPreskokDemo() {
  return (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-sm font-medium">Horizontal Button Group</h3>
        <ButtonGroup>
          <Button intent="outline">First</Button>
          <Button intent="outline">Second</Button>
          <Button intent="outline">Third</Button>
        </ButtonGroup>
      </div>

      <div>
        <h3 className="mb-3 text-sm font-medium">Vertical Button Group</h3>
        <ButtonGroup orientation="vertical">
          <Button intent="outline">Top</Button>
          <Button intent="outline">Middle</Button>
          <Button intent="outline">Bottom</Button>
        </ButtonGroup>
      </div>

      <div>
        <h3 className="mb-3 text-sm font-medium">With Text Label</h3>
        <ButtonGroup>
          <ButtonGroupText>Actions:</ButtonGroupText>
          <Button intent="outline">Save</Button>
          <Button intent="outline">Cancel</Button>
          <Button intent="primary">Submit</Button>
        </ButtonGroup>
      </div>

      <div>
        <h3 className="mb-3 text-sm font-medium">Mixed Intents</h3>
        <ButtonGroup>
          <Button intent="outline">Cancel</Button>
          <Button intent="secondary">Draft</Button>
          <Button intent="primary">Publish</Button>
        </ButtonGroup>
      </div>
    </div>
  )
}

"use client"

import { Button } from "@/components/ui/preskok-ui/button"
import {
  ButtonGroup,
  ButtonGroupText,
} from "@/components/ui/preskok-ui/button-group"

export function ButtonGroupPreskokDemo() {
  return (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-sm font-medium">Horizontal Button Group</h3>
        <ButtonGroup>
          <Button intent="outline">First</Button>
          <Button intent="outline">Second</Button>
          <Button intent="outline">Third</Button>
        </ButtonGroup>
      </div>

      <div>
        <h3 className="mb-3 text-sm font-medium">Vertical Button Group</h3>
        <ButtonGroup orientation="vertical">
          <Button intent="outline">Top</Button>
          <Button intent="outline">Middle</Button>
          <Button intent="outline">Bottom</Button>
        </ButtonGroup>
      </div>

      <div>
        <h3 className="mb-3 text-sm font-medium">With Text Label</h3>
        <ButtonGroup>
          <ButtonGroupText>Actions:</ButtonGroupText>
          <Button intent="outline">Save</Button>
          <Button intent="outline">Cancel</Button>
          <Button intent="primary">Submit</Button>
        </ButtonGroup>
      </div>

      <div>
        <h3 className="mb-3 text-sm font-medium">Mixed Intents</h3>
        <ButtonGroup>
          <Button intent="outline">Cancel</Button>
          <Button intent="secondary">Draft</Button>
          <Button intent="primary">Publish</Button>
        </ButtonGroup>
      </div>
    </div>
  )
}

"use client"

import { Volume2Icon, VolumeXIcon } from "lucide-react"

import { Button } from "@/components/ui/preskok-ui/button"
import { ButtonGroup } from "@/components/ui/preskok-ui/button-group"

export function ButtonGroupOrientationDemo() {
  return (
    <ButtonGroup orientation="vertical">
      <Button intent="secondary">
        <Volume2Icon />
      </Button>
      <Button intent="secondary">
        <VolumeXIcon />
      </Button>
    </ButtonGroup>
  )
}

"use client"

import {
  FileTextIcon,
  MoreHorizontalIcon,
  RocketIcon,
  RotateCcwIcon,
  SettingsIcon,
  UndoIcon,
} from "lucide-react"

import { Button } from "@/components/ui/preskok-ui/button"
import { ButtonGroup } from "@/components/ui/preskok-ui/button-group"
import {
  Menu,
  MenuContent,
  MenuItem,
} from "@/components/ui/preskok-ui/menu"

export function ButtonGroupWithMenuDemo() {
  return (
    <ButtonGroup>
      <Button intent="secondary">
        <RocketIcon data-slot="icon" />
        Deploy
      </Button>
      <Menu>
        <Button intent="secondary">
          <MoreHorizontalIcon data-slot="icon" />
        </Button>
        <MenuContent placement="bottom end">
          <MenuItem href="#">
            <RotateCcwIcon data-slot="icon" />
            Redeploy
          </MenuItem>
          <MenuItem href="#">
            <UndoIcon data-slot="icon" />
            Rollback
          </MenuItem>
          <MenuItem href="#">
            <FileTextIcon data-slot="icon" />
            View logs
          </MenuItem>
          <MenuItem href="#">
            <SettingsIcon data-slot="icon" />
            Settings
          </MenuItem>
        </MenuContent>
      </Menu>
    </ButtonGroup>
  )
}

"use client"

import { ChevronDownIcon } from "lucide-react"

import { Button } from "@/components/ui/preskok-ui/button"
import {
  ButtonGroup,
  ButtonGroupText,
} from "@/components/ui/preskok-ui/button-group"

export function ButtonGroupWithTextDemo() {
  return (
    <ButtonGroup>
      <ButtonGroupText>Deploy</ButtonGroupText>
      <Button intent="outline">
        Options
        <ChevronDownIcon />
      </Button>
    </ButtonGroup>
  )
}