| import { useState } from 'react'; |
| import { Lock, X } from 'lucide-react'; |
| import { cn } from '../lib/utils'; |
|
|
| interface PasscodeModalProps { |
| isOpen: boolean; |
| onClose: () => void; |
| onSubmit: (code: string) => void; |
| error?: string; |
| } |
|
|
| export const PasscodeModal = ({ isOpen, onClose, onSubmit, error }: PasscodeModalProps) => { |
| const [code, setCode] = useState(''); |
|
|
| if (!isOpen) return null; |
|
|
| const handleSubmit = (e: React.FormEvent) => { |
| e.preventDefault(); |
| onSubmit(code); |
| setCode(''); |
| }; |
|
|
| return ( |
| <div className="fixed inset-0 z-50 flex items-center justify-center p-4"> |
| <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} /> |
| <div className="relative glassmorphism rounded-2xl p-8 w-full max-w-md animate-slide-up"> |
| <button |
| onClick={onClose} |
| className="absolute top-4 right-4 p-2 rounded-lg hover:bg-accent/50 transition-colors" |
| > |
| <X className="w-5 h-5 text-muted-foreground" /> |
| </button> |
| |
| <div className="flex flex-col items-center text-center mb-6"> |
| <div className="w-16 h-16 rounded-full bg-gradient-to-br from-red-500 to-orange-600 flex items-center justify-center mb-4"> |
| <Lock className="w-8 h-8 text-white" /> |
| </div> |
| <h2 className="text-2xl font-bold text-foreground mb-2"> |
| Private Terminal |
| </h2> |
| <p className="text-muted-foreground"> |
| This influencer's terminal is private. Enter the access code to view their P&L and orderbook. |
| </p> |
| </div> |
| |
| <form onSubmit={handleSubmit} className="space-y-4"> |
| <div> |
| <input |
| type="password" |
| value={code} |
| onChange={(e) => setCode(e.target.value)} |
| placeholder="Enter access code" |
| className="w-full px-4 py-3 rounded-lg bg-background border border-input text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all" |
| autoFocus |
| /> |
| </div> |
| |
| {error && ( |
| <div className="p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-500 text-sm"> |
| {error} |
| </div> |
| )} |
| |
| <button |
| type="submit" |
| className="w-full py-3 rounded-lg bg-primary text-primary-foreground font-medium hover:bg-primary/90 transition-colors" |
| > |
| Unlock Terminal |
| </button> |
| </form> |
| |
| <div className="mt-6 text-center text-sm text-muted-foreground"> |
| <p>Hint: Try <span className="text-foreground font-mono">WHALE2026</span> or <span className="text-foreground font-mono">DEFI2026</span></p> |
| </div> |
| </div> |
| </div> |
| ); |
| }; |
|
|
