45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
|
|
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { Copy, Check, Eye, EyeOff } from 'lucide-react';
|
|
|
|
interface ApiKeyVisibilityToggleProps {
|
|
apiKey: string;
|
|
}
|
|
|
|
export default function ApiKeyVisibilityToggle({ apiKey }: ApiKeyVisibilityToggleProps) {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(apiKey);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="bg-gray-50 p-5 rounded-2xl border border-gray-100 flex items-center justify-between gap-4">
|
|
<code className="text-xs font-mono font-bold text-gray-600 truncate flex-1">
|
|
{isVisible ? apiKey : `${apiKey.substring(0, 8)}${'•'.repeat(24)}`}
|
|
</code>
|
|
<div className="flex items-center gap-3 shrink-0">
|
|
<button
|
|
onClick={() => setIsVisible(!isVisible)}
|
|
className="p-2 hover:bg-white rounded-lg transition-colors text-gray-400 hover:text-blue-600"
|
|
title={isVisible ? "Gizle" : "Göster"}
|
|
>
|
|
{isVisible ? <EyeOff size={16} /> : <Eye size={16} />}
|
|
</button>
|
|
<button
|
|
onClick={handleCopy}
|
|
className="p-2 hover:bg-white rounded-lg transition-colors text-gray-400 hover:text-blue-600"
|
|
title="Kopyala"
|
|
>
|
|
{copied ? <Check size={16} className="text-emerald-500" /> : <Copy size={16} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|