"use client";
 
import { useState } from 'react'
import { Divider, Group } from 'ui-lab-components'
import { FaGrip, FaList, FaTable } from 'react-icons/fa6'
 
export const metadata = {
  title: 'Button Group',
  description: 'Joined view switcher using the Group compound component with active state.',
  access: 'free' as const,
};
 
export default function Example() {
  const [viewMode, setViewMode] = useState("list");
 
  return (
    <Group orientation="horizontal" spacing="xs">
      <Group.Button active={viewMode === "list"} onPress={() => setViewMode("list")}>
        <FaList className="mr-1.5 text-foreground-400" /> List
      </Group.Button>
      <Divider orientation="vertical" />
      <Group.Button active={viewMode === "grid"} onPress={() => setViewMode("grid")}>
        <FaGrip className="mr-1.5 text-foreground-400" /> Grid
      </Group.Button>
      <Divider orientation="vertical" />
      <Group.Button active={viewMode === "table"} onPress={() => setViewMode("table")}>
        <FaTable className="mr-1.5 text-foreground-400" /> Table
      </Group.Button>
    </Group>
  )
}
 

import { Button, Flex } from 'ui-lab-components'
import { FaArrowRight, FaDownload, FaEllipsisVertical, FaPlus } from 'react-icons/fa6'
 
export const metadata = {
  title: 'Icons',
  description: 'Left, right, and icon-only button patterns.',
  access: 'free' as const,
};
 
export default function Example() {
  return (
    <Flex gap="md" align="center" justify="center">
      <Button icon={<FaPlus />}>
        New Project
      </Button>
      <Button icon={{ right: <FaDownload /> }}>
        Download
      </Button>
      <Button variant="ghost" aria-label="More actions" icon={<FaEllipsisVertical />} />
    </Flex>
  )
}
 

"use client";
 
import { useState } from 'react'
import { Button, Group, Divider, Flex } from 'ui-lab-components'
import { FaList, FaGrip, FaTable, FaPlus } from "react-icons/fa6";
 
export const metadata = {
  title: 'Joined Toggle Buttons',
  description: 'Multiple buttons grouped together for view/mode selection with active state indication.',
  access: 'free' as const,
};
 
export default function Example() {
  const [viewMode, setViewMode] = useState("list");
  return (
    <Flex styles="w-fit">
      <Group orientation="horizontal" value={viewMode} onChange={setViewMode}>
        <Group.Button size="icon" value="list"><FaList /></Group.Button>
        <Divider orientation="vertical" />
        <Group.Button size="icon" value="grid"><FaGrip /></Group.Button>
        <Divider orientation="vertical" />
        <Group.Button size="icon" value="table"><FaTable /></Group.Button>
      </Group>
      <Button size="sm" icon={{ left: <FaPlus size={12} /> }} >New</Button>
    </Flex>
  );
}
 

"use client";
 
import { useState } from 'react'
import { Button, Divider, Flex, Group, Select } from 'ui-lab-components'
import { FaChevronDown } from 'react-icons/fa6'
 
const splitActions = [
  { value: "publish", label: "Publish now" },
  { value: "schedule", label: "Schedule publish" },
  { value: "save", label: "Save draft" },
] as const;
 
export const metadata = {
  title: 'Split Button',
  description: 'Group + Select primitives for a classic split button with a primary action and a separate menu trigger.',
  access: 'free' as const,
};
 
export default function Example() {
  const [action, setAction] = useState<string | number | null>(splitActions[0].value);
  const selectedAction = splitActions.find((item) => item.value === action) ?? splitActions[0];
 
  return (
    <Flex direction="column" gap="sm" align="center">
      <Group orientation="horizontal">
        <Group.Select className="w-full" selectedKey={action} onSelectionChange={setAction}>
          <Select.Value>
            <Button variant="primary">{selectedAction.label}</Button>
          </Select.Value>
          <Divider />
          <Select.Trigger
            chevron={<FaChevronDown className="h-3.5 w-3.5" />}
            aria-label="Choose split action"
          />
          <Select.Content>
            <Select.List>
              {splitActions.map((item) => (
                <Select.Item key={item.value} value={item.value} textValue={item.label}>
                  {item.label}
                </Select.Item>
              ))}
            </Select.List>
          </Select.Content>
        </Group.Select>
      </Group>
    </Flex>
  )
}
 

"use client";
 
import { useState } from 'react'
import { Button, Group, Flex } from 'ui-lab-components'
import { FaList, FaGrip, FaPlus } from "react-icons/fa6";
 
export const metadata = {
  title: 'Sub Stack Actions',
  description: 'A collection of buttons arranged horizontally for grouped actions and quick controls.',
  access: 'free' as const,
};
 
export default function Example() {
  const [viewMode, setViewMode] = useState("list");
  return (
    <Flex styles='w-fit' align="center" gap="xl">
      <Group orientation="horizontal" spacing="xs" value={viewMode} onChange={setViewMode}>
        <Group.Button size="icon" value="list"><FaList /></Group.Button>
        <Group.Button size="icon" value="grid"><FaGrip /></Group.Button>
      </Group>
      <Button size="sm" icon={{ right: <FaPlus size={12} /> }} >Upload</Button>
    </Flex>
  );
}