104 lines
4 KiB
TypeScript
104 lines
4 KiB
TypeScript
|
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { Button } from '../../ui/button';
|
||
|
|
import { Input } from '../../ui/input';
|
||
|
|
import { X, Layers } from 'lucide-react';
|
||
|
|
|
||
|
|
interface CreateProjectModalProps {
|
||
|
|
onClose: () => void;
|
||
|
|
onCreate: (project: any) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({ onClose, onCreate }) => {
|
||
|
|
const [formData, setFormData] = useState({
|
||
|
|
name: '',
|
||
|
|
daw: 'Ableton',
|
||
|
|
bpm: '128',
|
||
|
|
key: 'C Min',
|
||
|
|
description: ''
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleSubmit = () => {
|
||
|
|
if (!formData.name) return;
|
||
|
|
onCreate({
|
||
|
|
...formData,
|
||
|
|
progress: 0,
|
||
|
|
status: 'Idea',
|
||
|
|
collaborators: [],
|
||
|
|
modified: 'Just now'
|
||
|
|
});
|
||
|
|
onClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
||
|
|
<div className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm" onClick={onClose}></div>
|
||
|
|
<div className="relative w-full max-w-lg bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
|
||
|
|
|
||
|
|
<div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
|
||
|
|
<h3 className="font-bold text-white flex items-center gap-2">
|
||
|
|
<Layers className="w-5 h-5 text-kodo-cyan" /> New Project
|
||
|
|
</h3>
|
||
|
|
<button onClick={onClose}><X className="w-5 h-5 text-gray-400 hover:text-white" /></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-6 space-y-6">
|
||
|
|
<Input
|
||
|
|
label="Project Name"
|
||
|
|
placeholder="e.g. Neon Genesis"
|
||
|
|
value={formData.name}
|
||
|
|
onChange={(e) => setFormData({...formData, name: e.target.value})}
|
||
|
|
autoFocus
|
||
|
|
/>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">Primary Workstation (DAW)</label>
|
||
|
|
<div className="grid grid-cols-3 gap-3">
|
||
|
|
{['Ableton', 'FL Studio', 'Logic Pro'].map(daw => (
|
||
|
|
<button
|
||
|
|
key={daw}
|
||
|
|
onClick={() => setFormData({...formData, daw})}
|
||
|
|
className={`p-3 rounded-lg border text-sm font-bold transition-all ${formData.daw === daw ? 'bg-kodo-cyan/10 border-kodo-cyan text-white' : 'bg-kodo-void border-kodo-steel text-gray-500 hover:border-gray-400'}`}
|
||
|
|
>
|
||
|
|
{daw}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-2 gap-4">
|
||
|
|
<Input
|
||
|
|
label="BPM"
|
||
|
|
type="number"
|
||
|
|
placeholder="128"
|
||
|
|
value={formData.bpm}
|
||
|
|
onChange={(e) => setFormData({...formData, bpm: e.target.value})}
|
||
|
|
/>
|
||
|
|
<Input
|
||
|
|
label="Key"
|
||
|
|
placeholder="C Minor"
|
||
|
|
value={formData.key}
|
||
|
|
onChange={(e) => setFormData({...formData, key: e.target.value})}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">Description</label>
|
||
|
|
<textarea
|
||
|
|
className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
|
||
|
|
placeholder="Project goals, vibe, or reference tracks..."
|
||
|
|
value={formData.description}
|
||
|
|
onChange={(e) => setFormData({...formData, description: e.target.value})}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
|
||
|
|
<Button variant="ghost" onClick={onClose}>Cancel</Button>
|
||
|
|
<Button variant="primary" onClick={handleSubmit} disabled={!formData.name}>Create Project</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|