APIKeyCard

apikeycard-1779394345593.tsx

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

export default function APIKeyCard({ keyValue = 'sk-emp_live_a7Bx9mK2nPqR5vWjT3eL8hF4cZ6', label = 'Production API Key' }) {
  const [visible, setVisible] = useState(false)
  const [copied, setCopied] = useState(false)
  const [rotating, setRotating] = useState(false)
  const masked = keyValue.slice(0,8) + '••••••••••••••••' + keyValue.slice(-4)
  const copy = () => { navigator.clipboard.writeText(keyValue); setCopied(true); setTimeout(()=>setCopied(false),2000) }
  const rotate = () => { setRotating(true); setTimeout(()=>setRotating(false),1500) }
  return (
    <div style={{ background:'#fff', borderRadius:'14px', padding:'20px', boxShadow:'0 2px 16px rgba(0,0,0,0.06)', maxWidth:'420px' }}>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:'12px' }}>
        <div>
          <div style={{ fontSize:'12px', color:'#94a3b8', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em' }}>{label}</div>
          <div style={{ display:'flex', alignItems:'center', gap:'6px', marginTop:'4px' }}>
            <div style={{ width:'8px', height:'8px', borderRadius:'50%', background:'#10b981' }} />
            <span style={{ fontSize:'12px', color:'#10b981', fontWeight:600 }}>Active</span>
          </div>
        </div>
        <button onClick={rotate} style={{
          background:rotating?'#fef3c7':'#f8fafc', border:'1px solid #e2e8f0', borderRadius:'8px',
          padding:'6px 12px', cursor:'pointer', fontSize:'12px', fontWeight:600, color:rotating?'#92400e':'#374151',
          transition:'all 0.2s',
        }}>
          {rotating ? '🔄 Rotating...' : '↻ Rotate'}
        </button>
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:'10px', background:'#f8fafc', borderRadius:'10px', padding:'12px 14px', marginBottom:'12px' }}>
        <code style={{ flex:1, fontFamily:'monospace', fontSize:'13px', color:'#374151', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
          {visible ? keyValue : masked}
        </code>
        <button onClick={()=>setVisible(!visible)} style={{ background:'none', border:'none', cursor:'pointer', fontSize:'16px', color:'#64748b' }}>
          {visible?'🙈':'👁️'}
        </button>
        <button onClick={copy} style={{
          background:copied?'#10b981':'#6d28d9', color:'#fff', border:'none', borderRadius:'6px',
          padding:'5px 10px', cursor:'pointer', fontSize:'12px', fontWeight:600, transition:'background 0.2s', whiteSpace:'nowrap',
        }}>{copied?'✓':'Copy'}</button>
      </div>
      <div style={{ fontSize:'12px', color:'#94a3b8' }}>
        Created Jan 15, 2025 · Last used 2 hours ago
      </div>
    </div>
  )
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

API key display with mask/reveal, copy and regenerate actions

More from Utility

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

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

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

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

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

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility

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

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility