Announcement

import type { ComponentProps } from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cn } from "cn"

import { badgeVariants } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"

/**
 * A small pill that links to news, such as a launch, above a heading. It
 * renders an `<a>` styled as the secondary `Badge`, at reading size. Put an
 * `AnnouncementText` and an `AnnouncementAction` inside.
 *
 * Over artwork, add `className="dark"` so the pill takes the dark theme's
 * colors. Pass `render` to use your framework's link in place of the `<a>`.
 */
function Announcement({
  className,
  render,
  ...props
}: useRender.ComponentProps<"a">) {
  return useRender({
    defaultTagName: "a",
    render,
    state: { slot: "announcement" },
    props: mergeProps<"a">(
      {
        className: cn(
          badgeVariants({ variant: "secondary" }),
          "h-auto max-w-full gap-3 px-3 py-0.5 text-sm/6 font-normal",
          className
        ),
      },
      props
    ),
  })
}

/**
 * The headline inside `Announcement`. When space runs short it is cut off
 * with an ellipsis, while `AnnouncementAction` keeps its full width.
 */
function AnnouncementText({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="announcement-text"
      className={cn("min-w-0 truncate", className)}
      {...props}
    />
  )
}

/**
 * The call to action at the end of `Announcement`, such as "Learn more" and a
 * caret icon. A short vertical rule sets it apart from `AnnouncementText`,
 * and it never shrinks.
 */
function AnnouncementAction({
  className,
  children,
  ...props
}: ComponentProps<"span">) {
  return (
    <span
      data-slot="announcement-action"
      className={cn(
        "inline-flex shrink-0 items-center gap-1.5 font-medium",
        className
      )}
      {...props}
    >
      <Separator
        aria-hidden="true"
        orientation="vertical"
        className="mr-1.5 data-vertical:h-3 data-vertical:self-center"
      />
      {children}
    </span>
  )
}

export { Announcement, AnnouncementText, AnnouncementAction }

pnpm dlx shadcn add @01orbital/announcement

npx shadcn add @01orbital/announcement

yarn shadcn add @01orbital/announcement

bunx --bun shadcn add @01orbital/announcement

pnpm add @phosphor-icons/react

npm install @phosphor-icons/react

yarn add @phosphor-icons/react

bun add @phosphor-icons/react