export const title = "Filter bar components"
export const description = "Powerful and customizable React filter bar components built for modern applications and websites. These filter bars are built using React Aria and styled with Tailwind CSS."

import * as Demos from "@/components/application/filter-bar/filter-bar.demo.tsx";
import * as DropdownDemos from "@/components/application/filter-bar/filter-dropdown-menu.demo.tsx";

<PreviewAndCode title="Filter bar example" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarSimpleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarSimpleDemo" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this filter bar component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add filter-bar
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/filter-bar" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the filter bar components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Filter bar examples

Below are examples and variations of this filter bar component:

### Simple {{ tocOnly:true }}

<PreviewAndCode title="Simple" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarSimpleDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarSimpleDemo" />
    </TabPanel>
</PreviewAndCode>

### Tabs and search

Our filter bar component works seamlessly with tab navigation. This variant combines tabs for quick category switching with a search input for filtering within each category.

<PreviewAndCode title="Tabs and search" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarTabsAndSearchDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarTabsAndSearchDemo" />
    </TabPanel>
</PreviewAndCode>

### Tabs and date picker {{ tocOnly:true }}

<PreviewAndCode title="Tabs and date picker" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarTabsAndDatePickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarTabsAndDatePickerDemo" />
    </TabPanel>
</PreviewAndCode>

### Date filters

The date filters variant provides multiple ways to select time ranges, including quick-select buttons for common periods, a dropdown for additional options, and a date range picker for custom selections.

<PreviewAndCode title="Date filters" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarDateFiltersDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarDateFiltersDemo" />
    </TabPanel>
</PreviewAndCode>

### Dropdowns {{ tocOnly:true }}

<PreviewAndCode title="Dropdowns" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarDropdownsDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarDropdownsDemo" />
    </TabPanel>
</PreviewAndCode>

### Dropdowns and date picker {{ tocOnly:true }}

<PreviewAndCode title="Dropdowns and date picker" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarDropdownsAndDatePickerDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarDropdownsAndDatePickerDemo" />
    </TabPanel>
</PreviewAndCode>

### Advanced filter inactive

The advanced filter variant provides a query builder-style interface with field, operator, and value inputs. This allows users to create complex filter combinations for data-heavy applications.

<PreviewAndCode title="Advanced filter inactive" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarAdvancedInactiveDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarAdvancedInactiveDemo" />
    </TabPanel>
</PreviewAndCode>

### Advanced filter active

This example shows the advanced filter with multiple active filter rows. Each row can be individually configured with a field, operator, and value, and removed with the close button.

<PreviewAndCode title="Advanced filter active" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <Demos.FilterBarAdvancedActiveDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-bar/FilterBarAdvancedActiveDemo" />
    </TabPanel>
</PreviewAndCode>

## Filter dropdown menus

### Filter dropdown empty state {{ tocOnly:true }}

<PreviewAndCode title="Filter dropdown empty state" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <DropdownDemos.FilterDropdownMenuEmptyDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-dropdown-menu/FilterDropdownMenuEmptyDemo" />
    </TabPanel>
</PreviewAndCode>

### Filter dropdown inactive {{ tocOnly:true }}

<PreviewAndCode title="Filter dropdown inactive" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <DropdownDemos.FilterDropdownMenuInactiveDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-dropdown-menu/FilterDropdownMenuInactiveDemo" />
    </TabPanel>
</PreviewAndCode>

### Filter dropdown active {{ tocOnly:true }}

<PreviewAndCode title="Filter dropdown active" isPublic={false}>
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 flex-col min-h-[320px] p-6 ring-1 ring-inset ring-secondary bg-primary">
        <DropdownDemos.FilterDropdownMenuActiveDemo />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="filter-dropdown-menu/FilterDropdownMenuActiveDemo" />
    </TabPanel>
</PreviewAndCode>

## Filter slideout menus

### Filters advanced empty state menu {{ tocOnly:true }}

<PreviewAndCode title="Filters advanced empty state menu" isPublic={false} iframeSrc="/react/iframe/slideout-menus/filters-advanced-empty-menu" cliCommand="npx untitledui@latest add slideout-menus/filters-advanced-menu">
    <ResizablePreview enable id="preview" className="h-[960px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/slideout-menus/filters-advanced-empty-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/FiltersAdvancedEmptyMenu" />
    </TabPanel>
</PreviewAndCode>

### Filters advanced active menu {{ tocOnly:true }}

<PreviewAndCode title="Filters advanced active menu" isPublic={false} iframeSrc="/react/iframe/slideout-menus/filters-advanced-active-menu" cliCommand="npx untitledui@latest add slideout-menus/filters-advanced-menu">
    <ResizablePreview enable id="preview" className="h-[960px]">
        <div className="relative flex overflow-hidden rounded-[20px] h-full">
            <div className="pointer-events-none absolute inset-0 rounded-[20px] border border-secondary_alt"></div>
            <ResponsiveIframe src="/react/iframe/slideout-menus/filters-advanced-active-menu" dynamicHeight={false} height="100%" />
        </div>
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="slideout-menus/FiltersAdvancedActiveMenu" />
    </TabPanel>
</PreviewAndCode>

<Divider />

<FAQ
    faqs={[
        {
            question: "What sub-components make up a filter bar?",
            answer: "A filter bar consists of `FilterBar.Root` (layout container), `FilterBar.Content` (left content area), `FilterBar.Actions` (right actions area), `FilterBar.FilterRow` (advanced filter row), and `FilterBar.FilterIconButton` (icon-only filter button).",
        },
        {
            question: "How do I build an advanced filter?",
            answer: "Use `FilterBar.FilterRow` components to create rows with field, operator, and value inputs. Each row accepts an `onRemove` callback for deletion. Combine with `Select` components for field and operator selection, and `Input` for value entry.",
        },
        {
            question: "Can I combine tabs with filters?",
            answer: "Yes, the filter bar is designed to work with other components like `Tabs`, `Input`, `Select`, and `DateRangePicker`. Place them inside `FilterBar.Content` for left-aligned elements or `FilterBar.Actions` for right-aligned actions.",
        },
        {
            question: "Is the filter bar responsive?",
            answer: "Yes, `FilterBar.Content` uses flexbox wrapping to handle responsive layouts. The demos include responsive breakpoints that adapt the layout for mobile and desktop viewports.",
        },
        {
            question: "How do I add a search input to the filter bar?",
            answer: "Place an `Input` component with a search icon inside `FilterBar.Content`. The filter bar layout will automatically handle spacing and alignment with other filter elements.",
        },
    ]}
/>