DeploymentFilter() — ui Function Reference

Architecture documentation for the DeploymentFilter() function in vercel.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ DeploymentFilter() — ui Function Reference

Dependency Diagram

graph TD
  c240e7a4_2e03_f69f_4254_4e09fa019e01["DeploymentFilter()"]
  57afcab1_fc30_7f69_ecf5_50ea8da6ba44["vercel.tsx"]
  c240e7a4_2e03_f69f_4254_4e09fa019e01 -->|defined in| 57afcab1_fc30_7f69_ecf5_50ea8da6ba44
  style c240e7a4_2e03_f69f_4254_4e09fa019e01 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/vercel.tsx lines 235–415

function DeploymentFilter() {
  const [selectedEnvironment, setSelectedEnvironment] = React.useState(
    environments[0]
  )
  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(
    new Set(statuses.slice(0, 5).map((s) => s.name))
  )
  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()

  const toggleStatus = (statusName: string) => {
    setSelectedStatuses((prev) => {
      const next = new Set(prev)
      if (next.has(statusName)) {
        next.delete(statusName)
      } else {
        next.add(statusName)
      }
      return next
    })
  }

  return (
    <Example title="Deployment Filter" containerClassName="col-span-full">
      <div className="flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto">
        <Popover>
          <PopoverTrigger
            render={<Button variant="outline" className="justify-start" />}
          >
            <IconPlaceholder
              lucide="CalendarIcon"
              tabler="IconCalendar"
              hugeicons="Calendar01Icon"
              phosphor="CalendarIcon"
              remixicon="RiCalendarLine"
              data-icon="inline-start"
              className="text-muted-foreground"
            />
            {dateRange?.from ? (
              dateRange.to ? (
                <>
                  {format(dateRange.from, "LLL dd, y")} -{" "}
                  {format(dateRange.to, "LLL dd, y")}
                </>
              ) : (
                format(dateRange.from, "LLL dd, y")
              )
            ) : (
              "Select Date Range"
            )}
          </PopoverTrigger>
          <PopoverContent className="w-auto p-0" align="start">
            <Calendar
              mode="range"
              defaultMonth={dateRange?.from}
              selected={dateRange}
              onSelect={setDateRange}
              numberOfMonths={2}
            />
          </PopoverContent>
        </Popover>
        <InputGroup className="lg:ml-auto lg:max-w-72">
          <InputGroupAddon>
            <IconPlaceholder
              lucide="Search"
              tabler="IconSearch"
              hugeicons="Search01Icon"
              phosphor="MagnifyingGlassIcon"
              remixicon="RiSearchLine"
            />
          </InputGroupAddon>
          <InputGroupInput placeholder="All Authors..." />
          <InputGroupAddon align="inline-end">
            <IconPlaceholder
              lucide="ChevronDownIcon"
              tabler="IconChevronDown"
              hugeicons="ArrowDown01Icon"
              phosphor="CaretDownIcon"
              remixicon="RiArrowDownSLine"
              className="text-muted-foreground"
            />
          </InputGroupAddon>