From f29cdf51e781f7aea78d34bdd920fa75f3c52ff6 Mon Sep 17 00:00:00 2001
From: d3v1l0n <d3v1l0n@outlook.in>
Date: Sat, 11 Jan 2025 14:22:17 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20perf:=20improve=20some=20f?=
 =?UTF-8?q?unctions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PackageCard/Badge.tsx | 29 +++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/PackageCard/Badge.tsx b/src/components/PackageCard/Badge.tsx
index 8a18746..96c5455 100644
--- a/src/components/PackageCard/Badge.tsx
+++ b/src/components/PackageCard/Badge.tsx
@@ -2,12 +2,35 @@ import React from 'react';
 
 interface BadgeProps {
   children: React.ReactNode;
+  color?: 'default' | 'success' | 'warning' | 'error'; // Add more colors as needed
+  size?: 'small' | 'medium' | 'large'; // Size options
+  ariaLabel?: string; // For accessibility
 }
 
-export function Badge({ children }: BadgeProps) {
+const colorClasses = {
+  default: 'bg-gradient-to-r from-nord-7 to-nord-8/80 dark:from-nord-8/50 dark:to-nord-9/80 text-nord-0 dark:text-nord-6',
+  success: 'bg-green-500 text-white',
+  warning: 'bg-yellow-500 text-black',
+  error: 'bg-red-500 text-white',
+};
+
+const sizeClasses = {
+  small: 'text-xs px-2 py-1',
+  medium: 'text-sm px-3 py-1.5',
+  large: 'text-base px-4 py-2',
+};
+
+export function Badge({ children, color = 'default', size = 'medium', ariaLabel }: BadgeProps) {
+  const badgeColorClass = colorClasses[color] || colorClasses.default;
+  const badgeSizeClass = sizeClasses[size] || sizeClasses.medium;
+
   return (
-    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-nord-7 to-nord-8/80 dark:from-nord-8/50 dark:to-nord-9/80 text-nord-0 dark:text-nord-6 shadow-md hover:shadow-lg transition-all duration-300">
+    <span
+      className={`inline-flex items-center rounded-full font-semibold shadow-md hover:shadow-lg transition-all duration-300 ${badgeColorClass} ${badgeSizeClass}`}
+      aria-label={ariaLabel}
+      title={ariaLabel} // Optional: Add title for tooltips
+    >
       {children}
     </span>
   );
-}
+}
\ No newline at end of file