mirror of
https://github.com/kccleoc/seedpgp-web.git
synced 2026-03-07 01:47:52 +08:00
7c4fc1460c
- Eliminate all white/light boxes and backgrounds - Fix drag-drop zone with neon cyberpunk colors (#00f0ff, #ff006e, #16213e) - Fix restored mnemonic display with matrix green (#39ff14) - Fix security options panel with dark gradient - Fix all remaining slate-700/slate-800 labels to cyberpunk neon - Fix info banners and text colors - Update badge components with cyberpunk color scheme - Apply consistent dark theme across all components
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
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-[#39ff14] bg-[#39ff14]/10 border-[#39ff14]/20" // Safe
|
|
: count < 5
|
|
? "text-[#ff006e] bg-[#ff006e]/10 border-[#ff006e]/30 font-semibold" // Warning
|
|
: "text-[#ff006e] bg-[#ff006e]/10 border-[#ff006e]/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;
|