40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import CopyButton from './CopyButton';
|
|
|
|
interface KeyDisplayProps {
|
|
apiKey: string;
|
|
label?: string;
|
|
className?: string;
|
|
}
|
|
|
|
export default function KeyDisplay({ apiKey, label = 'API Key', className = '' }: KeyDisplayProps) {
|
|
const [revealed, setRevealed] = useState(false);
|
|
|
|
const maskedKey = apiKey ? `${apiKey.substring(0, 8)}${'•'.repeat(48)}` : '';
|
|
const displayKey = revealed ? apiKey : maskedKey;
|
|
|
|
return (
|
|
<div className={`space-y-2 ${className}`}>
|
|
<label className="block text-sm font-medium text-slate-300">{label}</label>
|
|
<div className="flex gap-2">
|
|
<div className="flex-1 px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg font-mono text-sm text-slate-200 overflow-x-auto">
|
|
{displayKey || 'No key generated yet'}
|
|
</div>
|
|
{apiKey && (
|
|
<>
|
|
<button
|
|
onClick={() => setRevealed(!revealed)}
|
|
className="px-4 py-2 text-sm font-medium bg-slate-700 text-slate-200 rounded-lg hover:bg-slate-600 transition-colors"
|
|
>
|
|
{revealed ? 'Hide' : 'Show'}
|
|
</button>
|
|
<CopyButton text={apiKey} />
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|