Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 71x 71x 215x 7x 7x 71x | import * as React from "react";
import { XIcon } from "lucide-react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils";
const chipVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 whitespace-nowrap",
{
variants: {
variant: {
default: "bg-primary/80 text-slate-50 hover:bg-primary/70 ",
function: "bg-slate-300 hover:bg-primary/90 hover:text-slate-50",
noIcon: "bg-primary text-slate-50 hover:bg-primary/90",
destructive: "bg-slate-300 hover:bg-destructive hover:text-slate-50",
},
},
defaultVariants: {
variant: "default",
},
},
);
export interface ChipProps extends VariantProps<typeof chipVariants> {
className?: string;
onChipClick?: () => void;
onIconClick?: () => void;
}
const Chip = ({
className,
onChipClick,
onIconClick,
variant,
...props
}: React.PropsWithChildren<ChipProps>) => {
const noIcon = variant === "noIcon" || variant === "destructive";
return (
<div
className={cn(chipVariants({ variant, className }), "h-8 py-2 cursor-pointer")}
{...props}
onClick={onChipClick}
>
<div className={noIcon ? "px-2" : "pl-2 pr-1"}>{props.children}</div>
{!noIcon && (
<button
onClick={(e) => {
onIconClick?.();
e.stopPropagation();
}}
className="p-1 m-1 hover:bg-slate-300 hover:text-slate-700 rounded-md justify-center items-center "
>
<XIcon className="w-4 h-4" />
</button>
)}
</div>
);
};
Chip.displayName = "Chip";
export { Chip, chipVariants };
|