From 0f0b879ebe10662515b59413486c62cb87ca19df Mon Sep 17 00:00:00 2001 From: Ryukemeister Date: Thu, 12 Oct 2023 18:16:33 +0530 Subject: [PATCH] add badge component --- packages/atoms/src/components/ui/badge.tsx | 30 ++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 packages/atoms/src/components/ui/badge.tsx diff --git a/packages/atoms/src/components/ui/badge.tsx b/packages/atoms/src/components/ui/badge.tsx new file mode 100644 index 0000000000..890299bb6f --- /dev/null +++ b/packages/atoms/src/components/ui/badge.tsx @@ -0,0 +1,30 @@ +import { cn } from "@/lib/utils"; +import { cva, type VariantProps } from "class-variance-authority"; +import * as React from "react"; + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +); + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return
; +} + +export { Badge, badgeVariants };