DeploymentFilter() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ DeploymentFilter() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/vercel.tsx lines 234–414

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 asChild>
            <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"
              )}
            </Button>
          </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>