APIKeyManager

apikeymanager-1779388705730.tsx

'use client';
import { useState } from 'react';

export default function APIKeyManager() {
  const [keys, setKeys] = useState([
    { id: 1, name: 'Production', key: 'sk-prod-xK9mN2pL8qR4vT7wZ3aB', created: '2026-01-15', usage: '48,293' },
    { id: 2, name: 'Development', key: 'sk-dev-hJ5cF1nQ6uY9eI2oW8sM', created: '2026-03-22', usage: '1,847' },
  ]);
  const [revealed, setRevealed] = useState({});
  const [copied, setCopied] = useState(null);

  const mask = key => key.slice(0, 10) + '•'.repeat(12) + key.slice(-4);
  const copy = (id, key) => {
    navigator.clipboard?.writeText(key);
    setCopied(id);
    setTimeout(() => setCopied(null), 2000);
  };

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '580px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '16px', fontWeight: 700 }}>API Keys</h3>
        <button style={{
          background: 'linear-gradient(135deg, #C9A84C, #e8c96d)',
          border: 'none', borderRadius: '8px', padding: '8px 16px',
          color: '#0A0A0A', fontSize: '13px', fontWeight: 700, cursor: 'pointer',
        }}>+ New Key</button>
      </div>
      {keys.map(k => (
        <div key={k.id} style={{
          background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(255,255,255,0.07)',
          borderRadius: '12px', padding: '16px 20px',
          marginBottom: '10px',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>
            <span style={{ color: '#F5F5F0', fontWeight: 600, fontSize: '14px' }}>{k.name}</span>
            <span style={{ color: 'rgba(245,245,240,0.35)', fontSize: '12px' }}>Created {k.created}</span>
          </div>
          <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '10px' }}>
            <code style={{
              flex: 1, background: '#0A0A0A', borderRadius: '8px', padding: '8px 12px',
              color: '#C9A84C', fontSize: '13px', fontFamily: 'monospace',
              border: '1px solid rgba(201,168,76,0.15)',
            }}>{revealed[k.id] ? k.key : mask(k.key)}</code>
            <button onClick={() => setRevealed(r => ({ ...r, [k.id]: !r[k.id] }))} style={{
              background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: '8px', padding: '8px 12px', cursor: 'pointer', color: '#F5F5F0', fontSize: '14px',
            }}>{revealed[k.id] ? '🙈' : '👁️'}</button>
            <button onClick={() => copy(k.id, k.key)} style={{
              background: copied === k.id ? 'rgba(74,222,128,0.1)' : 'rgba(255,255,255,0.05)',
              border: `1px solid ${copied === k.id ? 'rgba(74,222,128,0.3)' : 'rgba(255,255,255,0.1)'}`,
              borderRadius: '8px', padding: '8px 12px', cursor: 'pointer',
              color: copied === k.id ? '#4ade80' : '#F5F5F0', fontSize: '13px',
            }}>{copied === k.id ? '✓' : 'Copy'}</button>
          </div>
          <p style={{ margin: 0, color: 'rgba(245,245,240,0.35)', fontSize: '12px' }}>{k.usage} requests this month</p>
        </div>
      ))}
    </div>
  );
}

Component info

CategorySettings

Frameworkreact

TierFREE

Copies0

About

API key management panel with show/hide and copy

More from Settings

'use client'
import { useState } from 'react'

function Toggle({ on, onChange }: { on: boolean; onChange: (v: boolean) => void }) {
  return (
    <button onClick={() => onChange(!on)} style={{
      width: 40, height: 22, borderRadius: 11, border: '

SettingsPanel

Settings

'use client';
import { useState } from 'react';

export default function DesignTokenPanel() {
  const [tokens, setTokens] = useState({
    primary: '#C9A84C',
    secondary: '#6366f1',
    background: '#0A0A0A',
    text: '#F5F5F0',
    radius: 12,

DesignTokenPanel

Settings