import { Group } from 'ui-lab-components';
 
export const metadata = {
  title: 'Basic Group',
  description: 'A simple group container that arranges multiple elements together. Use this to organize related UI elements in a consistent layout.',
  access: 'free' as const,
};
 
export default function Example() {
  return (
    <Group>
      <Group.Button>First</Group.Button>
      <Group.Button>Second</Group.Button>
      <Group.Button>Third</Group.Button>
    </Group>
  );
}
 

"use client";
 
import { useState } from "react";
import { Divider, Group, Select } from "ui-lab-components";
import { FaMagnifyingGlass, FaFilter } from "react-icons/fa6";
 
export const metadata = {
  title: "Filter Bar with Selects",
  description: "Horizontal group combining Select dropdowns with action buttons for filtering interfaces.",
  access: 'free' as const,
};
 
export default function Example() {
  const [status, setStatus] = useState<string | number | null>("active");
 
  return (
    <Group variant="default" orientation="horizontal">
      <Group.Input icon={<FaMagnifyingGlass />} placeholder="Search...">
      </Group.Input>
      <Divider />
      <Group.Select selectedKey={status} onSelectionChange={setStatus} className="w-36">
        <Select.Trigger><Select.Value placeholder="Status" /></Select.Trigger>
        <Select.Content>
          <Select.List>
            <Select.Item value="active" textValue="Active">Active</Select.Item>
            <Select.Item value="inactive" textValue="Inactive">Inactive</Select.Item>
            <Select.Item value="pending" textValue="Pending">Pending</Select.Item>
          </Select.List>
        </Select.Content>
      </Group.Select>
      <Divider />
      <Group.Button size="md"><FaFilter className="mr-1.5" /> Apply</Group.Button>
    </Group>
  );
}
 

import { Divider, Group } from "ui-lab-components";
import { FaMagnifyingGlass } from "react-icons/fa6";
 
export const metadata = {
  title: "Documentation Search",
  description: "A search input with an icon prefix and joined submit button.",
  access: 'free' as const,
};
 
export default function Example() {
  return (
    <Group variant="secondary">
      <div className="bg-background-800 flex items-center px-3 text-foreground-400">
        <FaMagnifyingGlass />
      </div>
      <Divider />
      <Group.Input placeholder="Search documentation..." className="w-64" />
      <Divider />
      <Group.Button className="w-full">Search</Group.Button>
    </Group>
  );
}
 

import { Divider, Group } from "ui-lab-components";
import { FaCopy } from "react-icons/fa6";
 
export const metadata = {
  title: "Copy Command",
  description: "A read-only command field with a joined copy action.",
  access: 'free' as const,
};
 
export default function Example() {
  return (
    <Group>
      <Group.Input defaultValue="npm install ui-lab" readOnly className="w-full font-mono text-sm" />
      <Divider />
      <Group.Button icon={{ left: <FaCopy className="mr-1.5 text-foreground-400" /> }} />
    </Group>
  );
}
 

"use client";
 
import { useState } from "react";
import { Group, Slider } from "ui-lab-components";
import { FaPercent } from "react-icons/fa6";
 
export const metadata = {
  title: "Slider with Input Group",
  description: "Numeric input synced with a slider for precise value selection.",
  access: 'free' as const,
};
 
export default function Example() {
  const [sliderValue, setSliderValue] = useState<number[]>([45]);
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = parseInt(e.target.value);
    if (!isNaN(val)) setSliderValue([Math.min(Math.max(val, 0), 100)]);
  };
 
  return (
    <div className="space-y-4 w-64">
      <Group>
        <Group.Input type="number" min={0} max={100} value={sliderValue[0]} onChange={handleInputChange} className="w-full" />
        <div className="bg-background-800 flex items-center px-3 text-foreground-400 text-sm font-medium">
          <FaPercent />
        </div>
      </Group>
      <Slider.Root value={sliderValue} onValueChange={setSliderValue} max={100} step={1} />
    </div>
  );
}