pill

1import { ChevronDownIcon, ChevronUpIcon, MinusIcon } from "lucide-react";
2import type { ComponentProps, ReactNode } from "react";
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { Badge } from "@/components/ui/badge";
5import { Button } from "@/components/ui/button";
6import { cn } from "@/lib/utils";
7 
8export type PillProps = ComponentProps<typeof Badge> & {
9  themed?: boolean;
10};
11 
12export const Pill = ({
13  variant = "secondary",
14  themed = false,
15  className,
16  ...props
17}: PillProps) => (
18  <Badge
19    className={cn("gap-2 rounded-full px-3 py-1.5 font-normal", className)}
20    variant={variant}
21    {...props}
22  />
23);
24 
25export type PillAvatarProps = ComponentProps<typeof AvatarImage> & {
26  fallback?: string;
27};
28 
29export const PillAvatar = ({
30  fallback,
31  className,
32  ...props
33}: PillAvatarProps) => (
34  <Avatar className={cn("-ml-1 h-4 w-4", className)}>
35    <AvatarImage {...props} />
36    <AvatarFallback>{fallback}</AvatarFallback>
37  </Avatar>
38);
39 
40export type PillButtonProps = ComponentProps<typeof Button>;
41 
42export const PillButton = ({ className, ...props }: PillButtonProps) => (
43  <Button
44    className={cn(
45      "-my-2 -mr-2 size-6 rounded-full p-0.5 hover:bg-foreground/5",
46      className
47    )}
48    size="icon"
49    variant="ghost"
50    {...props}
51  />
52);
53 
54export type PillStatusProps = {
55  children: ReactNode;
56  className?: string;
57};
58 
59export const PillStatus = ({
60  children,
61  className,
62  ...props
63}: PillStatusProps) => (
64  <div
65    className={cn(
66      "flex items-center gap-2 border-r pr-2 font-medium",
67      className
68    )}
69    {...props}
70  >
71    {children}
72  </div>
73);
74 
75export type PillIndicatorProps = {
76  variant?: "success" | "error" | "warning" | "info";
77  pulse?: boolean;
78};
79 
80export const PillIndicator = ({
81  variant = "success",
82  pulse = false,
83}: PillIndicatorProps) => (
84  <span className="relative flex size-2">
85    {pulse && (
86      <span
87        className={cn(
88          "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
89          variant === "success" && "bg-emerald-400",
90          variant === "error" && "bg-rose-400",
91          variant === "warning" && "bg-amber-400",
92          variant === "info" && "bg-sky-400"
93        )}
94      />
95    )}
96    <span
97      className={cn(
98        "relative inline-flex size-2 rounded-full",
99        variant === "success" && "bg-emerald-500",
100        variant === "error" && "bg-rose-500",
101        variant === "warning" && "bg-amber-500",
102// … truncated