Announcement

1import { Announcement, AnnouncementTitle } from "@/components/ui/announcement";
2
3<Announcement />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { tv, type VariantProps } from "tailwind-variants";
6import { cn } from "@/lib/utils";
7
8export const announcementVariants = tv({
9  base: [
10    "group/announcement",
11    "relative",
12    "inline-flex min-w-0 max-w-full items-center gap-2",
13    "py-0.5 ps-3 pe-3",
14    "bg-input/4",
15    "rounded-2xl border border-input",
16    "transition-colors",
17    "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring/32",
18    "[&_svg]:size-3.5 [&_svg]:shrink-0",
19    "has-data-[slot=badge]:ps-0.5",
20    "[button&,a&]:cursor-pointer",
21    "[&>svg]:text-muted-foreground",
22    "[a&]:hover:bg-input/12",
23    "**:data-[slot=badge]:h-6.5 **:data-[slot=badge]:rounded-xl **:data-[slot=badge]:px-2 **:data-[slot=badge]:sm:text-xs",
24    "[button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11",
25    "motion-reduce:transition-none!",
26  ],
27});
28