API Key Manager

<div class="w-full max-w-4xl mx-auto">
        <div class="flex justify-between items-end mb-8">
            <div>
                <h2 class="text-2xl font-bold text-white mb-2">API Keys</h2>
                <p class="text-zinc-500 text-sm">Manage authentication keys for your applications and services.</p>
            </div>
            <button
                class="px-4 py-2 bg-zinc-100 text-zinc-900 rounded-lg text-sm font-bold hover:bg-white transition-all">+
                Create new key</button>
        </div>
        <div class="bg-zinc-900 border border-zinc-800 rounded-xl divide-y divide-zinc-800 font-sans">
            <div class="p-4 grid grid-cols-4 gap-4 items-center">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex items-center justify-center text-indigo-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
                                stroke-width="2"></path>
                        </svg>
                    </div>
                    <span class="text-sm font-semibold text-white">Production-Main</span>
                </div>
                <div class="font-mono text-xs text-zinc-500">sk_live_•••••••••4k2z</div>
                <div class="text-xs text-zinc-400">Used 4 mins ago</div>
                <div class="flex justify-end gap-2">
                    <button class="p-2 hover:bg-zinc-800 rounded-lg text-zinc-400 transition-colors"><svg
                            class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2"
                                stroke-width="2"></path>
                        </svg></button>
                    <button
                        class="p-2 hover:bg-rose-500/10 hover:text-rose-500 rounded-lg text-zinc-400 transition-colors"><svg
                            class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                                stroke-width="2"></path>
                        </svg></button>
                </div>
            </div>
            <div class="p-4 grid grid-cols-4 gap-4 items-center bg-zinc-950/30">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-lg bg-zinc-800 flex items-center justify-center text-zinc-400">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
                                stroke-width="2"></path>
                        </svg>
                    </div>
                    <span class="text-sm font-semibold text-white">Staging-Test</span>
                </div>
                <div class="font-mono text-xs text-zinc-500">sk_test_•••••••••9x1p</div>
                <div class="text-xs text-zinc-400">Never used</div>
                <div class="flex justify-end gap-2">
                    <button class="p-2 hover:bg-zinc-800 rounded-lg text-zinc-400 transition-colors"><svg
                            class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2"
                                stroke-width="2"></path>
                        </svg></button>
                    <button
                        class="p-2 hover:bg-rose-500/10 hover:text-rose-500 rounded-lg text-zinc-400 transition-colors"><svg
                            class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path
                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                                stroke-width="2"></path>
                        </svg></button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const originalText = btn.innerText;
                if (originalText === 'PROCESSING...' || originalText === 'SUCCESS') return;
                btn.innerText = 'PROCESSING...';
                btn.classList.add('opacity-50');
                setTimeout(() => {
                    btn.innerText = 'SUCCESS';
                    btn.classList.remove('opacity-50');
                    setTimeout(() => btn.innerText = originalText, 1500);
                }, 800);
            });
        });
    </script>