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

input-group-button.tsx — ui Source File

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

File tsx DocumentationAtlas SearchAPI 5 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  a43d4223_cf44_7e12_482c_80f333de94de["input-group-button.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  a43d4223_cf44_7e12_482c_80f333de94de --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  d4ae1ebd_39ec_2b17_5c84_fbca1aec26c7["input-group"]
  a43d4223_cf44_7e12_482c_80f333de94de --> d4ae1ebd_39ec_2b17_5c84_fbca1aec26c7
  97b1d83c_62f2_f7a6_4edb_030a627d9a9d["popover"]
  a43d4223_cf44_7e12_482c_80f333de94de --> 97b1d83c_62f2_f7a6_4edb_030a627d9a9d
  39a0d62e_8e7d_d097_eb95_91d2bca361f7["icons-react"]
  a43d4223_cf44_7e12_482c_80f333de94de --> 39a0d62e_8e7d_d097_eb95_91d2bca361f7
  16fc7cf6_3e3a_9efc_f45b_63496f779853["use-copy-to-clipboard"]
  a43d4223_cf44_7e12_482c_80f333de94de --> 16fc7cf6_3e3a_9efc_f45b_63496f779853
  style a43d4223_cf44_7e12_482c_80f333de94de fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/examples/radix/ui/input-group"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/examples/radix/ui/popover"
import {
  IconCheck,
  IconCopy,
  IconInfoCircle,
  IconStar,
} from "@tabler/icons-react"

import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"

export default function InputGroupButtonExample() {
  const { copyToClipboard, isCopied } = useCopyToClipboard()
  const [isFavorite, setIsFavorite] = React.useState(false)

  return (
    <div className="grid w-full max-w-sm gap-6">
      <InputGroup>
        <InputGroupInput placeholder="https://x.com/shadcn" readOnly />
        <InputGroupAddon align="inline-end">
          <InputGroupButton
            aria-label="Copy"
            title="Copy"
            size="icon-xs"
            onClick={() => {
              copyToClipboard("https://x.com/shadcn")
            }}
          >
            {isCopied ? <IconCheck /> : <IconCopy />}
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup className="[--radius:9999px]">
        <Popover>
          <PopoverTrigger asChild>
            <InputGroupAddon>
              <InputGroupButton variant="secondary" size="icon-xs">
                <IconInfoCircle />
              </InputGroupButton>
            </InputGroupAddon>
          </PopoverTrigger>
          <PopoverContent
            align="start"
            className="flex flex-col gap-1 rounded-xl text-sm"
          >
            <p className="font-medium">Your connection is not secure.</p>
            <p>You should not enter any sensitive information on this site.</p>
          </PopoverContent>
        </Popover>
        <InputGroupAddon className="text-muted-foreground pl-1.5">
          https://
        </InputGroupAddon>
        <InputGroupInput id="input-secure-19" />
        <InputGroupAddon align="inline-end">
          <InputGroupButton
            onClick={() => setIsFavorite(!isFavorite)}
            size="icon-xs"
          >
            <IconStar
              data-favorite={isFavorite}
              className="data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600"
            />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput placeholder="Type to search..." />
        <InputGroupAddon align="inline-end">
          <InputGroupButton variant="secondary">Search</InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • icons-react
  • input-group
  • popover
  • react
  • use-copy-to-clipboard

Source

Frequently Asked Questions

What does input-group-button.tsx do?
input-group-button.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in input-group-button.tsx?
input-group-button.tsx defines 1 function(s): InputGroupButtonExample.
What does input-group-button.tsx depend on?
input-group-button.tsx imports 5 module(s): icons-react, input-group, popover, react, use-copy-to-clipboard.
Where is input-group-button.tsx in the architecture?
input-group-button.tsx is located at apps/v4/examples/radix/input-group-button.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, directory: apps/v4/examples/radix).

Analyze Your Own Codebase

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

Try Supermodel Free