Skip to content

Commit 003d28a

Browse files
SparthsSparths
committed
better styling request page
1 parent 4dfbe24 commit 003d28a

File tree

1 file changed

+138
-106
lines changed

1 file changed

+138
-106
lines changed

‎app/request/requestpage.tsx‎

Lines changed: 138 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -60,112 +60,144 @@ const RequestPage = () => {
6060
};
6161

6262
return (
63-
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 mt-10">
64-
<div className="pt-16 p-8">
65-
<div className="max-w-2xl mx-auto">
66-
{/* Community Guidelines Card */}
67-
<Card className="mb-8 bg-slate-800/50 border-slate-700 text-white">
68-
<CardHeader>
69-
<CardTitle className="flex items-center gap-2">
70-
<Heart className="text-purple-500" />
71-
Community Guidelines
72-
</CardTitle>
73-
<CardDescription className="text-gray-300">
74-
Help us maintain a high-quality collection of projects
75-
</CardDescription>
76-
</CardHeader>
77-
<CardContent className="space-y-2 text-gray-300">
78-
<div className="flex items-start gap-2">
79-
<Check className="text-green-500 mt-1" />
80-
<p>Share projects that have made a significant impact on your development workflow</p>
81-
</div>
82-
<div className="flex items-start gap-2">
83-
<Check className="text-green-500 mt-1" />
84-
<p>Include detailed descriptions to help others understand the projects value</p>
85-
</div>
86-
<div className="flex items-start gap-2">
87-
<Check className="text-green-500 mt-1" />
88-
<p>Ensure the project is actively maintained and well-documented</p>
89-
</div>
90-
</CardContent>
91-
</Card>
92-
93-
{/* Request Form Card */}
94-
<Card className="bg-slate-800/50 border-slate-700">
95-
<CardHeader>
96-
<CardTitle className="text-white text-xl text-center">Request a Project</CardTitle>
97-
<CardDescription className="text-gray-300 text-center">
98-
Share an amazing project with the community
99-
</CardDescription>
100-
</CardHeader>
101-
<CardContent className="space-y-4">
102-
<Input
103-
placeholder="Project Title"
104-
value={projectRequest.title}
105-
onChange={(e) => setProjectRequest(prev => ({...prev, title: e.target.value}))}
106-
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
107-
/>
108-
109-
<div className="flex items-center gap-2">
110-
<Github className="text-white" />
111-
<Input
112-
placeholder="GitHub Link"
113-
value={projectRequest.githubLink}
114-
onChange={(e) => setProjectRequest(prev => ({...prev, githubLink: e.target.value}))}
115-
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
116-
/>
117-
</div>
118-
119-
<Textarea
120-
placeholder="What is this project about?"
121-
value={projectRequest.description}
122-
onChange={(e) => setProjectRequest(prev => ({...prev, description: e.target.value}))}
123-
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
124-
/>
125-
126-
<Textarea
127-
placeholder="Why do you think this is a good project?"
128-
value={projectRequest.reason}
129-
onChange={(e) => setProjectRequest(prev => ({...prev, reason: e.target.value}))}
130-
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
131-
/>
132-
133-
{submissionStatus.status && (
134-
<Alert className={`${
135-
submissionStatus.status === 'success' ? 'bg-green-500/20 border-green-500' :
136-
submissionStatus.status === 'error' ? 'bg-red-500/20 border-red-500' :
137-
'bg-blue-500/20 border-blue-500'
138-
} text-white border`}>
139-
<AlertCircle className="h-4 w-4" />
140-
<AlertTitle>
141-
{submissionStatus.status === 'success' ? 'Success!' :
142-
submissionStatus.status === 'error' ? 'Error' :
143-
'Submitting...'}
144-
</AlertTitle>
145-
<AlertDescription>
146-
{submissionStatus.message}
147-
</AlertDescription>
148-
</Alert>
149-
)}
150-
151-
<Button
152-
onClick={handleProjectRequest}
153-
className="bg-purple-500 hover:bg-purple-600 text-white w-full flex items-center justify-center gap-2"
154-
>
155-
<Share2 className="w-4 h-4" />
156-
Submit
157-
</Button>
158-
159-
<div className="flex items-center justify-center gap-4 mt-4">
160-
<Badge variant="secondary" className="bg-slate-700 text-gray-300">
161-
<Star className="w-4 h-4 mr-1" /> Community Driven
162-
</Badge>
163-
<Badge variant="secondary" className="bg-slate-700 text-gray-300">
164-
<Heart className="w-4 h-4 mr-1" /> Open Source
165-
</Badge>
166-
</div>
167-
</CardContent>
168-
</Card>
63+
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 py-12 mt-10">
64+
<div className="container mx-auto px-4">
65+
<div className="max-w-5xl mx-auto">
66+
<h1 className="text-3xl font-bold text-white text-center mb-8">
67+
Submit a Project Request
68+
</h1>
69+
70+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
71+
{/* Community Guidelines Card */}
72+
<Card className="h-full bg-slate-800/50 border-slate-700 text-white">
73+
<CardHeader>
74+
<CardTitle className="flex items-center gap-2 text-xl">
75+
<Heart className="text-purple-500" />
76+
Community Guidelines
77+
</CardTitle>
78+
<CardDescription className="text-gray-300">
79+
Help us maintain a high-quality collection of projects
80+
</CardDescription>
81+
</CardHeader>
82+
<CardContent className="space-y-6">
83+
<div className="space-y-3">
84+
<div className="flex items-start gap-2">
85+
<Check className="text-green-500 mt-1 shrink-0" />
86+
<p>Share projects that have made a significant impact on your development workflow</p>
87+
</div>
88+
<div className="flex items-start gap-2">
89+
<Check className="text-green-500 mt-1 shrink-0" />
90+
<p>Include detailed descriptions to help others understand the projects value</p>
91+
</div>
92+
<div className="flex items-start gap-2">
93+
<Check className="text-green-500 mt-1 shrink-0" />
94+
<p>Ensure the project is actively maintained and well-documented</p>
95+
</div>
96+
</div>
97+
98+
<div className="pt-2">
99+
<h3 className="text-lg font-semibold mb-3">What makes a good submission?</h3>
100+
<ul className="space-y-3">
101+
<li className="flex items-start gap-2">
102+
<Check className="text-green-500 mt-1 shrink-0" />
103+
<p>Clear description of the projects purpose and benefits</p>
104+
</li>
105+
<li className="flex items-start gap-2">
106+
<Check className="text-green-500 mt-1 shrink-0" />
107+
<p>Regular updates and active maintenance</p>
108+
</li>
109+
<li className="flex items-start gap-2">
110+
<Check className="text-green-500 mt-1 shrink-0" />
111+
<p>Good documentation and examples</p>
112+
</li>
113+
<li className="flex items-start gap-2">
114+
<Check className="text-green-500 mt-1 shrink-0" />
115+
<p>Responsive maintainers and community</p>
116+
</li>
117+
</ul>
118+
</div>
119+
</CardContent>
120+
</Card>
121+
122+
{/* Request Form Card */}
123+
<Card className="h-full bg-slate-800/50 border-slate-700">
124+
<CardHeader>
125+
<CardTitle className="text-white text-xl text-center">Project Details</CardTitle>
126+
<CardDescription className="text-gray-300 text-center">
127+
Share an amazing project with the community
128+
</CardDescription>
129+
</CardHeader>
130+
<CardContent className="space-y-4">
131+
<div className="space-y-4">
132+
<Input
133+
placeholder="Project Title"
134+
value={projectRequest.title}
135+
onChange={(e) => setProjectRequest(prev => ({...prev, title: e.target.value}))}
136+
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
137+
/>
138+
139+
<div className="flex items-center gap-2">
140+
<Github className="text-white shrink-0" />
141+
<Input
142+
placeholder="GitHub Link"
143+
value={projectRequest.githubLink}
144+
onChange={(e) => setProjectRequest(prev => ({...prev, githubLink: e.target.value}))}
145+
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
146+
/>
147+
</div>
148+
149+
<Textarea
150+
placeholder="What is this project about?"
151+
value={projectRequest.description}
152+
onChange={(e) => setProjectRequest(prev => ({...prev, description: e.target.value}))}
153+
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400 min-h-24"
154+
/>
155+
156+
<Textarea
157+
placeholder="Why do you think this is a good project?"
158+
value={projectRequest.reason}
159+
onChange={(e) => setProjectRequest(prev => ({...prev, reason: e.target.value}))}
160+
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400 min-h-24"
161+
/>
162+
</div>
163+
164+
{submissionStatus.status && (
165+
<Alert className={`${
166+
submissionStatus.status === 'success' ? 'bg-green-500/20 border-green-500' :
167+
submissionStatus.status === 'error' ? 'bg-red-500/20 border-red-500' :
168+
'bg-blue-500/20 border-blue-500'
169+
} text-white border`}>
170+
<AlertCircle className="h-4 w-4" />
171+
<AlertTitle>
172+
{submissionStatus.status === 'success' ? 'Success!' :
173+
submissionStatus.status === 'error' ? 'Error' :
174+
'Submitting...'}
175+
</AlertTitle>
176+
<AlertDescription>
177+
{submissionStatus.message}
178+
</AlertDescription>
179+
</Alert>
180+
)}
181+
182+
<Button
183+
onClick={handleProjectRequest}
184+
className="w-full bg-purple-500 hover:bg-purple-600 text-white flex items-center justify-center gap-2 mt-4"
185+
>
186+
<Share2 className="w-4 h-4" />
187+
Submit Project
188+
</Button>
189+
190+
<div className="flex items-center justify-center gap-4 mt-4">
191+
<Badge variant="secondary" className="bg-slate-700 text-gray-300">
192+
<Star className="w-4 h-4 mr-1" /> Community Driven
193+
</Badge>
194+
<Badge variant="secondary" className="bg-slate-700 text-gray-300">
195+
<Heart className="w-4 h-4 mr-1" /> Open Source
196+
</Badge>
197+
</div>
198+
</CardContent>
199+
</Card>
200+
</div>
169201
</div>
170202
</div>
171203
</div>

0 commit comments

Comments
 (0)