callout.tsx — ui Source File

Architecture documentation for callout.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx Internationalization RTLLayout 2 imports 1 functions

Entity Profile

Internationalization→ RTLLayout→ callout.tsx — ui Source File

Dependency Diagram

graph LR
  6e06e25b_dd13_9f74_5703_ecbb5cde6d1f["callout.tsx"]
  79081a1f_55a3_945a_fb8c_d53d6d3eab81["utils"]
  6e06e25b_dd13_9f74_5703_ecbb5cde6d1f --> 79081a1f_55a3_945a_fb8c_d53d6d3eab81
  9816548b_ba53_dabd_a625_cfede1b0ea32["alert"]
  6e06e25b_dd13_9f74_5703_ecbb5cde6d1f --> 9816548b_ba53_dabd_a625_cfede1b0ea32
  style 6e06e25b_dd13_9f74_5703_ecbb5cde6d1f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { cn } from "@/lib/utils"
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/registry/new-york-v4/ui/alert"

export function Callout({
  title,
  children,
  icon,
  className,
  variant = "default",
  ...props
}: React.ComponentProps<typeof Alert> & {
  icon?: React.ReactNode
  variant?: "default" | "info" | "warning"
}) {
  return (
    <Alert
      data-variant={variant}
      className={cn(
        "bg-surface text-surface-foreground border-surface mt-6 w-auto rounded-xl md:-mx-1 **:[code]:border",
        className
      )}
      {...props}
    >
      {icon}
      {title && <AlertTitle>{title}</AlertTitle>}
      <AlertDescription className="text-card-foreground/80">
        {children}
      </AlertDescription>
    </Alert>
  )
}