update badges, cosmetic things and UI change

src/components/badges/ClipboardBadge.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Clipboard } from 'lucide-react';
+
+interface ClipboardEvent {
+    timestamp: Date;
+    field: string;
+    length: number;
+}
+
+interface ClipboardBadgeProps {
+  events: ClipboardEvent[];
+  onOpenClipboardModal: () => void; // New prop
+}
+
+const ClipboardBadge: React.FC<ClipboardBadgeProps> = ({ events, onOpenClipboardModal }) => {
+  const count = events.length;
+
+  // Determine badge style based on clipboard count
+  const badgeStyle = 
+    count === 0 
+      ? "text-green-500 bg-green-500/10 border-green-500/20" // Safe
+      : count < 5
+      ? "text-amber-500 bg-amber-500/10 border-amber-500/30 font-semibold" // Warning
+      : "text-red-500 bg-red-500/10 border-red-500/30 font-bold animate-pulse"; // Danger
+
+  return (
+    <button
+      onClick={onOpenClipboardModal}
+      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all hover:scale-105 ${badgeStyle}`}
+    >
+      <Clipboard className="w-3.5 h-3.5" />
+      <span className="text-xs">
+        {count === 0 ? "Empty" : `${count} item${count > 1 ? 's' : ''}`}
+      </span>
+    </button>
+  );
+};
+
+export default ClipboardBadge;