Notice

Un mensaje descartable con un botón de cierre de tamaño completo y esquinas concéntricas.

Your domain is live

ssntl.app now points to your store. It can take a few minutes to reach everyone.

Instalación

$ pnpm dlx shadcn@latest add @ssntl/notice

Uso

tsx

import { Notice, NoticeClose, NoticeDescription, NoticeTitle } from "@/components/ui/notice"

<Notice>
  <NoticeTitle>Tu dominio está en línea</NoticeTitle>
  <NoticeDescription>Puede tardar unos minutos en llegar a todos.</NoticeDescription>
  <NoticeClose label="Descartar" onClick={descartar} />
</Notice>

Concéntrico: el botón de cierre de 48px queda a 8px de la esquina de una tarjeta de 32px, así ambas curvas comparten centro.
El texto deja 64px libres al final, para que nunca pase debajo del botón de cierre.
Agrega role="status" solo cuando el aviso aparece como respuesta a algo; los avisos fijos no necesitan rol.

Código

components/ui/notice.tsx

import * as React from "react"

import { cn } from "@/lib/utils"
import { CloseButton } from "@/registry/ssntl/ui/close-button"

// A dismissible message on a card surface. Concentric: the close button
// (48px, radius 24) sits 8px from the corner, so the notice takes 24 + 8 = 32
// (rounded-lg) and both curves share a center. The text keeps clear of it,
// and 20px on top puts the title's first line on the button's center (32px).
function Notice({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="notice"
      className={cn(
        "relative grid gap-1 rounded-lg bg-card p-6 pe-16 pt-5 text-left shadow-float",
        className
      )}
      {...props}
    />
  )
}

function NoticeTitle({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="notice-title"
      className={cn("text-heading", className)}
      {...props}
    />
  )
}

function NoticeDescription({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="notice-description"
      className={cn("text-body text-muted-foreground", className)}
      {...props}
    />
  )
}

function NoticeClose({
  className,
  ...props
}: React.ComponentProps<typeof CloseButton>) {
  return (
    <CloseButton className={cn("absolute end-2 top-2", className)} {...props} />
  )
}

export { Notice, NoticeClose, NoticeDescription, NoticeTitle }