List Toolbar

import * as React from 'react'
import { Button, FilterMenu, ListToolbar, SearchInput, type FilterOption } from 'ferry-ui'
import { Plus } from 'lucide-react'

const PROJECTS = [
  { name: 'Billing portal', status: 'active' },
  { name: 'Customer portal', status: 'active' },
  { name: 'Marketing site', status: 'paused' },
  { name: 'Internal wiki', status: 'archived' },
]

const STATUS_OPTIONS: FilterOption[] = [
  { value: 'active', label: 'Active' },
  { value: 'paused', label: 'Paused' },
  { value: 'archived', label: 'Archived' },
]

export default function ListToolbarHero() {
  const [query, setQuery] = React.useState('')
  const [statuses, setStatuses] = React.useState<string[]>([])

  const rows = PROJECTS.filter(
    (project) =>
      project.name.toLowerCase().includes(query.trim().toLowerCase()) &&
      (statuses.length === 0 || statuses.includes(project.status)),
  )

  return (
    <div className="flex flex-col gap-4">
      <ListToolbar
        actions={
          <Button variant="primary" icon={<Plus />}>
            New project
          </Button>
        }
      >
        <SearchInput placeholder="Search projects" value={query} onValueChange={setQuery} />
        <FilterMenu label="Status" options={STATUS_OPTIONS} value={statuses} onValueChange={setStatuses} />
      </ListToolbar>
      <div className="divide-y rounded-lg border bg-surface-100 text-sm">
        {rows.map((project) => (
          <div key={project.name} className="flex items-center justify-between gap-4 px-4 py-2.5">
            <span className="text-foreground">{project.name}</span>
            <span className="text-[13px] text-foreground-light capitalize">{project.status}</span>
          </div>
        ))}
        {rows.length === 0 && (
          <p className="px-4 py-6 text-center text-foreground-light">No projects match your filters.</p>
        )}
      </div>
    </div>
  )
}

import * as React from 'react'
import { SearchInput } from 'ferry-ui'

export default function SearchInputDemo() {
  const [query, setQuery] = React.useState('')

  return (
    <>
      <SearchInput placeholder="Search invoices" value={query} onValueChange={setQuery} />
      <span className="text-[13px] text-foreground-light" aria-live="polite">
        {query === '' ? 'The query is empty.' : `Query: ${query}`}
      </span>
    </>
  )
}

import { SearchInput } from 'ferry-ui'

export default function SearchInputSizes() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <SearchInput size="tiny" placeholder="Search members" />
      <SearchInput size="sm" placeholder="Search members" />
      <SearchInput size="md" placeholder="Search members" />
    </div>
  )
}

import * as React from 'react'
import { FilterMenu, StatusDot, type FilterOption } from 'ferry-ui'

const STATUS_OPTIONS: FilterOption[] = [
  { value: 'paid', label: 'Paid', count: 18, icon: <StatusDot tone="success" /> },
  { value: 'open', label: 'Open', count: 6, icon: <StatusDot tone="info" /> },
  { value: 'overdue', label: 'Overdue', count: 2, icon: <StatusDot tone="destructive" /> },
  { value: 'void', label: 'Void', count: 0, icon: <StatusDot tone="neutral" />, disabled: true },
]

export default function FilterMenuDemo() {
  const [statuses, setStatuses] = React.useState<string[]>(['overdue'])

  return (
    <>
      <FilterMenu label="Status" options={STATUS_OPTIONS} value={statuses} onValueChange={setStatuses} />
      <span className="text-[13px] text-foreground-light" aria-live="polite">
        {statuses.length === 0 ? 'No filter' : `Selected: ${statuses.join(', ')}`}
      </span>
    </>
  )
}

import * as React from 'react'
import { Checkbox, FilterButton, Label, Popover, PopoverContent, PopoverTrigger } from 'ferry-ui'

const OWNERS = ['Maya Chen', 'Jonas Weber', 'Priya Patel']

export default function FilterButtonDemo() {
  const [selected, setSelected] = React.useState<string[]>(['Maya Chen'])

  function toggle(owner: string, checked: boolean) {
    setSelected(OWNERS.filter((name) => (name === owner ? checked : selected.includes(name))))
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <FilterButton label="Owner" selected={selected} />
      </PopoverTrigger>
      <PopoverContent align="start" className="flex w-56 flex-col gap-3" aria-label="Filter by owner">
        {OWNERS.map((owner) => (
          <Label key={owner}>
            <Checkbox
              checked={selected.includes(owner)}
              onCheckedChange={(checked) => toggle(owner, checked === true)}
            />
            {owner}
          </Label>
        ))}
      </PopoverContent>
    </Popover>
  )
}

import * as React from 'react'
import {
  Button,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
  ListToolbar,
  SearchInput,
  ToggleGroup,
  ToggleGroupItem,
} from 'ferry-ui'
import { ArrowUpDown, LayoutGrid, List } from 'lucide-react'

export default function ListToolbarSortView() {
  const [sort, setSort] = React.useState('updated')
  const [view, setView] = React.useState('list')

  return (
    <ListToolbar
      actions={
        <ToggleGroup
          type="single"
          variant="outline"
          aria-label="View"
          value={view}
          onValueChange={(next) => next && setView(next)}
        >
          <ToggleGroupItem value="grid" aria-label="Grid view">
            <LayoutGrid />
          </ToggleGroupItem>
          <ToggleGroupItem value="list" aria-label="List view">
            <List />
          </ToggleGroupItem>
        </ToggleGroup>
      }
    >
      <SearchInput placeholder="Search projects" />
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button icon={<ArrowUpDown />}>{sort === 'name' ? 'Name' : 'Last update'}</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" className="w-48">
          <DropdownMenuLabel>Sort by</DropdownMenuLabel>
          <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
            <DropdownMenuRadioItem value="updated">Last update</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="name">Name</DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </ListToolbar>
  )
}

import { FilterMenu, type FilterOption } from 'ferry-ui'

const PLAN_OPTIONS: FilterOption[] = [
  { value: 'free', label: 'Free' },
  { value: 'pro', label: 'Pro' },
  { value: 'enterprise', label: 'Enterprise' },
]

export default function FilterMenuTexts() {
  return (
    <FilterMenu
      label="Plan"
      options={PLAN_OPTIONS}
      defaultValue={['pro']}
      heading="Show the customers on"
      clearLabel="Show all plans"
      triggerLabel={(label, selected) =>
        selected.length > 0 ? `${label}: ${selected.join(', ')}. Change the filter` : `Select a ${label.toLowerCase()}`
      }
    />
  )
}