announcement

1import type { ComponentProps, HTMLAttributes } from "react";
2import { Badge } from "@/components/ui/badge";
3import { cn } from "@/lib/utils";
4 
5export type AnnouncementProps = ComponentProps<typeof Badge> & {
6  themed?: boolean;
7};
8 
9export const Announcement = ({
10  variant = "outline",
11  themed = false,
12  className,
13  ...props
14}: AnnouncementProps) => (
15  <Badge
16    className={cn(
17      "group max-w-full gap-2 rounded-full bg-background px-3 py-0.5 font-medium shadow-sm transition-all",
18      "hover:shadow-md",
19      themed && "announcement-themed border-foreground/5",
20      className
21    )}
22    variant={variant}
23    {...props}
24  />
25);
26 
27export type AnnouncementTagProps = HTMLAttributes<HTMLDivElement>;
28 
29export const AnnouncementTag = ({
30  className,
31  ...props
32}: AnnouncementTagProps) => (
33  <div
34    className={cn(
35      "-ml-2.5 shrink-0 truncate rounded-full bg-foreground/5 px-2.5 py-1 text-xs",
36      "group-[.announcement-themed]:bg-background/60",
37      className
38    )}
39    {...props}
40  />
41);
42 
43export type AnnouncementTitleProps = HTMLAttributes<HTMLDivElement>;
44 
45export const AnnouncementTitle = ({
46  className,
47  ...props
48}: AnnouncementTitleProps) => (
49  <div
50    className={cn("flex items-center gap-1 truncate py-1", className)}
51    {...props}
52  />
53);