Group

import { EllipsisIcon, FilesIcon, FilmIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Group, GroupItem, GroupSeparator } from "@/components/ui/group"

export function GroupDemo() {
  return (
    <Group>
      <GroupItem render={<Button variant="outline" />}>
        <FilesIcon />
        Files
      </GroupItem>
      <GroupSeparator />
      <GroupItem render={<Button variant="outline" />}>
        <FilmIcon />
        Media
      </GroupItem>
      <GroupSeparator />
      <GroupItem
        render={<Button variant="outline" size="icon" aria-label="Menu" />}
      >
        <EllipsisIcon />
      </GroupItem>
    </Group>
  )
}

import { CopyIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Group, GroupItem, GroupSeparator } from "@/components/ui/group"
import { Input } from "@/components/ui/input"

export function GroupWithInput() {
  return (
    <Group>
      <GroupItem
        render={<Input type="text" defaultValue="https://coss.com" />}
      />
      <GroupSeparator />
      <GroupItem
        render={<Button variant="outline" size="icon" aria-label="Copy" />}
      >
        <CopyIcon />
      </GroupItem>
    </Group>
  )
}