ui Architecture Docs
Home / File/ combobox-input-group.tsx — ui Source File

combobox-input-group.tsx — ui Source File

Architecture documentation for combobox-input-group.tsx, a tsx file in the ui codebase. 3 imports, 0 dependents.

File tsx DocumentationAtlas Changelog 3 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  15fa48a9_59cd_7075_f86e_38a5b78f58d2["combobox-input-group.tsx"]
  2ee3500a_5201_6dbf_1440_a4d47d14fa5d["combobox"]
  15fa48a9_59cd_7075_f86e_38a5b78f58d2 --> 2ee3500a_5201_6dbf_1440_a4d47d14fa5d
  4a37d855_5768_bc5a_31ae_9f42eba9091a["input-group"]
  15fa48a9_59cd_7075_f86e_38a5b78f58d2 --> 4a37d855_5768_bc5a_31ae_9f42eba9091a
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  15fa48a9_59cd_7075_f86e_38a5b78f58d2 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  style 15fa48a9_59cd_7075_f86e_38a5b78f58d2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import {
  Combobox,
  ComboboxCollection,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxInput,
  ComboboxItem,
  ComboboxLabel,
  ComboboxList,
} from "@/examples/base/ui/combobox"
import { InputGroupAddon } from "@/examples/base/ui/input-group"
import { GlobeIcon } from "lucide-react"

const timezones = [
  {
    value: "Americas",
    items: [
      "(GMT-5) New York",
      "(GMT-8) Los Angeles",
      "(GMT-6) Chicago",
      "(GMT-5) Toronto",
      "(GMT-8) Vancouver",
      "(GMT-3) São Paulo",
    ],
  },
  {
    value: "Europe",
    items: [
      "(GMT+0) London",
      "(GMT+1) Paris",
      "(GMT+1) Berlin",
      "(GMT+1) Rome",
      "(GMT+1) Madrid",
      "(GMT+1) Amsterdam",
    ],
  },
  {
    value: "Asia/Pacific",
    items: [
      "(GMT+9) Tokyo",
      "(GMT+8) Shanghai",
      "(GMT+8) Singapore",
      "(GMT+4) Dubai",
      "(GMT+11) Sydney",
      "(GMT+9) Seoul",
    ],
  },
] as const

export function ComboxboxInputGroup() {
  return (
    <Combobox items={timezones}>
      <ComboboxInput placeholder="Select a timezone">
        <InputGroupAddon>
          <GlobeIcon />
        </InputGroupAddon>
      </ComboboxInput>
      <ComboboxContent alignOffset={-28} className="w-60">
        <ComboboxEmpty>No timezones found.</ComboboxEmpty>
        <ComboboxList>
          {(group) => (
            <ComboboxGroup key={group.value} items={group.items}>
              <ComboboxLabel>{group.value}</ComboboxLabel>
              <ComboboxCollection>
                {(item) => (
                  <ComboboxItem key={item} value={item}>
                    {item}
                  </ComboboxItem>
                )}
              </ComboboxCollection>
            </ComboboxGroup>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}

Domain

Subdomains

Functions

Dependencies

  • combobox
  • input-group
  • lucide-react

Source

Frequently Asked Questions

What does combobox-input-group.tsx do?
combobox-input-group.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, Changelog subdomain.
What functions are defined in combobox-input-group.tsx?
combobox-input-group.tsx defines 1 function(s): ComboxboxInputGroup.
What does combobox-input-group.tsx depend on?
combobox-input-group.tsx imports 3 module(s): combobox, input-group, lucide-react.
Where is combobox-input-group.tsx in the architecture?
combobox-input-group.tsx is located at apps/v4/examples/base/combobox-input-group.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/examples/base).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free