mirror of
https://github.com/Anil-matcha/Open-Generative-AI.git
synced 2026-05-07 01:17:18 +00:00
ebcddfa187
Update all references across source files, config, and docs — including page titles, app name, package name, Electron window title, and release asset URLs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
67 lines
3.1 KiB
JavaScript
67 lines
3.1 KiB
JavaScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
export default function ApiKeyModal({ onSave }) {
|
|
const [key, setKey] = useState('');
|
|
const [error, setError] = useState('');
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
const trimmed = key.trim();
|
|
if (!trimmed) { setError('Please enter your API key'); return; }
|
|
onSave(trimmed);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#030303] flex items-center justify-center px-4 font-inter">
|
|
<div className="w-full max-w-sm bg-[#0a0a0a]/40 backdrop-blur-xl border border-white/10 rounded-xl p-10 shadow-2xl">
|
|
<div className="flex flex-col items-center text-center mb-10">
|
|
<div className="w-14 h-14 bg-[#d9ff00]/5 rounded-2xl flex items-center justify-center border border-[#d9ff00]/10 mb-6 group hover:border-[#d9ff00]/30 transition-colors">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#d9ff00" strokeWidth="1.5" className="group-hover:scale-110 transition-transform">
|
|
<path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L12 17.25l-4.5-4.5L15.5 7.5z" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<h1 className="text-xl font-bold text-white tracking-tight mb-2">
|
|
Open Generative AI
|
|
</h1>
|
|
<p className="text-white/40 text-[13px] leading-relaxed px-4">
|
|
Enter your <a href="https://muapi.ai/access-keys" target="_blank" rel="noreferrer" className="text-[#d9ff00] hover:text-[#e5ff33] transition-colors">Muapi.ai</a> API key to start creating
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="space-y-2">
|
|
<label className="block text-xs font-bold text-white/30 ml-1">
|
|
API Access Key
|
|
</label>
|
|
<input
|
|
type="password"
|
|
value={key}
|
|
onChange={(e) => { setKey(e.target.value); setError(''); }}
|
|
placeholder="Paste your key here..."
|
|
className="w-full bg-white/5 border border-white/[0.03] rounded-md px-5 py-3 text-sm text-white placeholder:text-white/10 focus:outline-none focus:ring-1 focus:ring-[#d9ff00]/30 focus:bg-white/[0.07] transition-all"
|
|
suppressHydrationWarning
|
|
/>
|
|
{error && <p className="mt-2 text-red-500/80 text-[11px] font-medium ml-1">{error}</p>}
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-[#d9ff00] text-black font-medium py-2.5 rounded-md hover:bg-[#e5ff33] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-[#d9ff00]/5"
|
|
suppressHydrationWarning
|
|
>
|
|
Get Started
|
|
</button>
|
|
|
|
<p className="text-center text-[12px] text-white/20 pt-2">
|
|
Need a key?{' '}
|
|
<a href="https://muapi.ai/access-keys" target="_blank" rel="noreferrer" className="text-white/40 hover:text-[#d9ff00] transition-colors font-medium">
|
|
Get one free →
|
|
</a>
|
|
</p>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|