frontend/_src/app/api-keys/page.tsx

'use client'

import { Sidebar } from '@/components/sidebar'
import { Key, Server } from 'lucide-react'

export default function APIKeysPage() {
  return (
    <div className="flex min-h-screen">
      <Sidebar />
      <main className="flex-1 flex flex-col">
        <header className="h-14 bg-bg-secondary border-b border-border flex items-center px-6 justify-between">
          <h1 className="text-base font-medium">API Keys</h1>
        </header>
        <div className="flex-1 p-6">
          <div className="bg-bg-tertiary border border-border rounded-xl p-6">
            <div className="flex items-center gap-3 mb-4">
              <Key className="w-5 h-5 text-accent-cyan" />
              <h3 className="text-sm font-medium">Manage API Keys</h3>
            </div>
            <p className="text-sm text-text-muted">Generate API keys for programmatic access to the platform.</p>
          </div>
        </div>
      </main>
    </div>
  )
}