Spaces:
Sleeping
Sleeping
File size: 4,158 Bytes
481234c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
import React, { useState } from 'react';
import { Search, Sparkles, Loader2, Target, Type, AlignLeft, Zap } from 'lucide-react';
import { motion } from 'framer-motion';
const ResearchForm = ({ onSearch, isLoading }) => {
const [formData, setFormData] = useState({
niche: '',
target_audience: '',
prompt: '',
product_description: ''
});
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
onSearch(formData);
};
return (
<motion.div
initial={{ opacity: 0, x: -30 }}
animate={{ opacity: 1, x: 0 }}
className="glass"
style={{ padding: '2rem' }}
>
<div className="flex items-center gap-4 mb-10">
<div className="icon-badge">
<Sparkles size={20} />
</div>
<div>
<h2 style={{ fontSize: '1.25rem', fontWeight: '700' }}>Research Form</h2>
<p style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>Configure generation parameters</p>
</div>
</div>
<form onSubmit={handleSubmit}>
<div className="form-group">
<label className="flex items-center gap-2">
<Target size={14} /> Niche / Category
</label>
<input
name="niche"
placeholder="e.g. Minimalist Rings"
value={formData.niche}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label className="flex items-center gap-2">
<Search size={14} /> Target Audience
</label>
<input
name="target_audience"
placeholder="e.g. Corporate Professionals"
value={formData.target_audience}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label className="flex items-center gap-2">
<Type size={14} /> User Prompt
</label>
<textarea
name="prompt"
placeholder="What emotion should we trigger?"
rows={3}
value={formData.prompt}
onChange={handleChange}
required
/>
</div>
<div className="form-group">
<label className="flex items-center gap-2">
<AlignLeft size={14} /> Product Context
</label>
<textarea
name="product_description"
placeholder="Materials, design philosophy, price point..."
rows={4}
value={formData.product_description}
onChange={handleChange}
required
/>
</div>
<button
type="submit"
className="premium-button"
disabled={isLoading}
style={{ marginTop: '1rem' }}
>
{isLoading ? (
<>
<Loader2 className="animate-spin" size={20} />
Analyzing...
</>
) : (
<>
<Zap size={20} />
Generate Strategy
</>
)}
</button>
</form>
</motion.div>
);
};
export default ResearchForm;
|