Skip to content

Commit 4dfbe24

Browse files
SparthsSparths
committed
Better Project Request Section and Better Request Page
1 parent cb45a65 commit 4dfbe24

File tree

5 files changed

+372
-98
lines changed

5 files changed

+372
-98
lines changed

‎app/request/page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
'use client';
12
import Requestpage from './requestpage'
23

34
export default function Home() {

‎app/request/requestpage.tsx‎

Lines changed: 136 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,48 @@
1-
'use client';
2-
31
import React, { useState } from 'react';
42
import { Input } from '@/components/ui/input';
53
import { Button } from '@/components/ui/button';
64
import { Textarea } from '@/components/ui/textarea';
5+
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
6+
import { Badge } from '@/components/ui/badge';
7+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
8+
import { Github, Heart, Share2, Star, Check, AlertCircle } from 'lucide-react';
79

8-
export default function Requestpage() {
10+
const RequestPage = () => {
911
const [projectRequest, setProjectRequest] = useState({
1012
title: '',
1113
githubLink: '',
1214
description: '',
1315
reason: ''
1416
});
1517

18+
const [submissionStatus, setSubmissionStatus] = useState({
19+
status: '',
20+
message: ''
21+
});
22+
1623
const handleProjectRequest = async () => {
17-
if (!projectRequest.title.trim() ||
18-
!projectRequest.githubLink.trim() ||
19-
!projectRequest.description.trim() ||
24+
if (!projectRequest.title.trim() ||
25+
!projectRequest.githubLink.trim() ||
26+
!projectRequest.description.trim() ||
2027
!projectRequest.reason.trim()) {
2128
return;
2229
}
23-
30+
2431
try {
32+
setSubmissionStatus({ status: 'loading', message: 'Submitting your request...' });
33+
2534
const response = await fetch('/api/project-requests', {
2635
method: 'POST',
2736
headers: { 'Content-Type': 'application/json' },
2837
body: JSON.stringify(projectRequest),
2938
});
3039

31-
if (!response.ok) {
32-
throw new Error('Failed to submit request');
33-
}
40+
if (!response.ok) throw new Error('Failed to submit request');
41+
42+
setSubmissionStatus({
43+
status: 'success',
44+
message: 'Thank you for contributing to the community! Your submission will be reviewed shortly.'
45+
});
3446

3547
setProjectRequest({
3648
title: '',
@@ -39,49 +51,125 @@ export default function Requestpage() {
3951
reason: ''
4052
});
4153
} catch (error) {
42-
console.error('Failed to submit project request:', error);
54+
setSubmissionStatus({
55+
status: 'error',
56+
message: 'Failed to submit project request. Please try again.'
57+
});
58+
console.log(error)
4359
}
4460
};
4561

4662
return (
47-
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
48-
<div className="pt-24 p-8">
49-
<div className="max-w-2xl mx-auto">
50-
<h3 className="text-xl font-semibold text-white mb-4 text-center">Request a Project</h3>
51-
<div className="flex flex-col gap-4">
52-
<Input
53-
placeholder="Project Title"
54-
value={projectRequest.title || ''}
55-
onChange={(e) => setProjectRequest(prev => ({...prev, title: e.target.value}))}
56-
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
57-
/>
58-
<Input
59-
placeholder="GitHub Link"
60-
value={projectRequest.githubLink || ''}
61-
onChange={(e) => setProjectRequest(prev => ({...prev, githubLink: e.target.value}))}
62-
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
63-
/>
64-
<Textarea
65-
placeholder="What is this project about?"
66-
value={projectRequest.description || ''}
67-
onChange={(e) => setProjectRequest(prev => ({...prev, description: e.target.value}))}
68-
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
69-
/>
70-
<Textarea
71-
placeholder="Why do you think this is a good project?"
72-
value={projectRequest.reason || ''}
73-
onChange={(e) => setProjectRequest(prev => ({...prev, reason: e.target.value}))}
74-
className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
75-
/>
76-
<Button
77-
onClick={handleProjectRequest}
78-
className="bg-purple-500 hover:bg-purple-600 text-white w-full"
79-
>
80-
Submit
81-
</Button>
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>
82169
</div>
83170
</div>
84-
</div>
85171
</div>
86172
);
87-
}
173+
};
174+
175+
export default RequestPage;

0 commit comments

Comments
 (0)