Spaces:
Sleeping
Sleeping
File size: 6,087 Bytes
9215c5e | 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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | 'use client'
import React from "react"
import { useState } from 'react'
import { Send } from 'lucide-react'
import { Button } from '@/components/ui/button'
export function ShareProblemSection() {
const [formData, setFormData] = useState({
name: '',
email: '',
problem: '',
})
const [isSubmitting, setIsSubmitting] = useState(false)
const [submitStatus, setSubmitStatus] = useState<'idle' | 'success' | 'error'>('idle')
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = e.target
setFormData(prev => ({
...prev,
[name]: value,
}))
}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setIsSubmitting(true)
try {
// Simulate form submission
await new Promise(resolve => setTimeout(resolve, 1000))
setSubmitStatus('success')
setFormData({ name: '', email: '', problem: '' })
setTimeout(() => setSubmitStatus('idle'), 3000)
} catch (error) {
setSubmitStatus('error')
setTimeout(() => setSubmitStatus('idle'), 3000)
} finally {
setIsSubmitting(false)
}
}
return (
<section className="py-12 sm:py-16 md:py-20 px-4 md:px-6 bg-gradient-to-b from-background via-muted/20 to-background" aria-labelledby="share-problem-heading">
<div className="container mx-auto max-w-3xl">
<div className="bg-card border border-border rounded-2xl sm:rounded-3xl p-5 sm:p-8 md:p-12 shadow-lg">
<div className="text-center mb-6 sm:mb-8">
<h2 id="share-problem-heading" className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-foreground mb-3 sm:mb-4">
Share Your Problem
</h2>
<p className="text-sm sm:text-base md:text-lg text-muted-foreground px-2">
Have a challenge you'd like the community to help solve? Tell us about it and let's innovate together.
</p>
</div>
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
{/* Name Field */}
<div>
<label htmlFor="name" className="block text-xs sm:text-sm font-semibold text-foreground mb-1.5 sm:mb-2">
Your Name
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
required
placeholder="Enter your full name"
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary transition-all text-sm sm:text-base"
/>
</div>
{/* Email Field */}
<div>
<label htmlFor="email" className="block text-xs sm:text-sm font-semibold text-foreground mb-1.5 sm:mb-2">
Email Address
</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
required
placeholder="your.email@example.com"
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary transition-all text-sm sm:text-base"
/>
</div>
{/* Problem Field */}
<div>
<label htmlFor="problem" className="block text-xs sm:text-sm font-semibold text-foreground mb-1.5 sm:mb-2">
Describe Your Problem
</label>
<textarea
id="problem"
name="problem"
value={formData.problem}
onChange={handleChange}
required
placeholder="Tell us about the challenge you're facing. What problem are you trying to solve?"
rows={5}
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-lg border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary transition-all resize-none text-sm sm:text-base"
/>
</div>
{/* Submit Button and Status */}
<div className="flex flex-col gap-4">
<Button
type="submit"
disabled={isSubmitting || submitStatus === 'success'}
className="w-full bg-gradient-to-r from-primary to-secondary hover:opacity-90 disabled:opacity-50 text-white py-3 rounded-lg font-semibold flex items-center justify-center gap-2"
>
{isSubmitting ? (
<>
<span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
Submitting...
</>
) : (
<>
<Send className="w-4 h-4" />
Share Problem with Community
</>
)}
</Button>
{submitStatus === 'success' && (
<div className="bg-green-50 dark:bg-green-950/50 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-400 px-4 py-3 rounded-lg text-center text-sm">
Thank you! We've received your problem and will review it shortly.
</div>
)}
{submitStatus === 'error' && (
<div className="bg-red-50 dark:bg-red-950/50 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 px-4 py-3 rounded-lg text-center text-sm">
Something went wrong. Please try again.
</div>
)}
</div>
</form>
</div>
</div>
</section>
)
}
|