Home page Request

Author: Sparths

components/GithubProjectsPage.tsx

@@ -8,6 +8,29 @@ import { Textarea } from '@/components/ui/textarea';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Badge } from '@/components/ui/badge';
 import { Star, GitFork, Search, Tag, ChevronLeft, ChevronRight, Heart, Github, Share2, Check, AlertCircle } from 'lucide-react';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+const DiscordIcon = ({ className = "" }) => (
+  <svg 
+    role="img" 
+    viewBox="0 0 24 24" 
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    width="24"
+    height="24"
+    fill="currentColor"
+  >
+    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/>
+  </svg>
+);
 
 interface Project {
   name: string;
@@ -19,6 +42,11 @@ interface Project {
   color: string;
 }
 
+interface SubmissionStatus {
+  status: string;
+  message: string;
+}
+
 function getRandomGradient() {
   const colors = [
     'from-purple-500 to-pink-500',
@@ -40,6 +68,12 @@ export default function GithubProjectsPage() {
     }
     return [];
   });
+  const [showDiscordDialog, setShowDiscordDialog] = useState(false);
+const [submissionStatus, setSubmissionStatus] = useState<SubmissionStatus>({
+  status: '',
+  message: ''
+});
+
   const [currentPage, setCurrentPage] = useState(1);
   const [projectRequest, setProjectRequest] = useState({
     title: '',
@@ -85,36 +119,56 @@ export default function GithubProjectsPage() {
         !projectRequest.githubLink.trim() || 
         !projectRequest.description.trim() || 
         !projectRequest.reason.trim()) {
-        setSubmitButton("Please Fill every Text-Area");
+      setSubmissionStatus({
+        status: 'error',
+        message: 'Please fill in all fields before submitting'
+      });
       return;
     }
 
+    setShowDiscordDialog(true);
+  };
+
+  const handleFinalSubmit = async () => {
     try {
+      setSubmissionStatus({
+        status: 'loading',
+        message: 'Submitting your request...'
+      });
+      
       const response = await fetch('/api/project-requests', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(projectRequest),
       });
-
-      if (!response.ok) {
-        setSubmitButton("Failed to submit request");
-        throw new Error('Failed to submit request');
-      }
-
-      setSubmitButton("Successfully Sent");
-
+  
+      if (!response.ok) throw new Error('Failed to submit request');
+  
+      setSubmissionStatus({
+        status: 'success',
+        message: 'Thank you for contributing to the community! Your submission will be reviewed shortly.'
+      });
+  
       setProjectRequest({
         title: '',
         githubLink: '',
         description: '',
         reason: ''
       });
     } catch (error) {
-      setSubmitButton("Failed to submit request");
+      setSubmissionStatus({
+        status: 'error',
+        message: 'Failed to submit project request. Please try again.'
+      });
       console.error('Failed to submit project request:', error);
     }
   };
 
+  const handleDiscordJoin = () => {
+    window.open('https://discord.gg/QtnFGDQj5S', '_blank');
+    handleFinalSubmit();
+  };
+
   const addProject = (projectName: string) => {
     setSavedProjects((prev) => [...prev, projectName]);
   };
@@ -279,24 +333,23 @@ export default function GithubProjectsPage() {
                   className="bg-slate-800/50 border-slate-700 text-white placeholder:text-gray-400"
                 />
 
-                {SubmitButton !== "Submit" && (
-                  <Alert className={`${
-                    SubmitButton.includes("Success") ? 'bg-green-500/20 border-green-500' :
-                    SubmitButton.includes("Failed") ? 'bg-red-500/20 border-red-500' :
-                    'bg-blue-500/20 border-blue-500'
-                  } text-white border`}>
-                    <AlertCircle className="h-4 w-4" />
-                    <AlertTitle>
-                      {SubmitButton.includes("Success") ? 'Success!' :
-                       SubmitButton.includes("Failed") ? 'Error' :
-                       'Note'}
-                    </AlertTitle>
-                    <AlertDescription>
-                      {SubmitButton}
-                    </AlertDescription>
-                  </Alert>
-                )}
-
+{submissionStatus.status && (
+  <Alert className={`${
+    submissionStatus.status === 'success' ? 'bg-green-500/20 border-green-500' :
+    submissionStatus.status === 'error' ? 'bg-red-500/20 border-red-500' :
+    'bg-blue-500/20 border-blue-500'
+  } text-white border`}>
+    <AlertCircle className="h-4 w-4" />
+    <AlertTitle>
+      {submissionStatus.status === 'success' ? 'Success!' :
+       submissionStatus.status === 'error' ? 'Error' :
+       'Submitting...'}
+    </AlertTitle>
+    <AlertDescription>
+      {submissionStatus.message}
+    </AlertDescription>
+  </Alert>
+)}
                 <Button
                   onClick={handleProjectRequest}
                   className="bg-purple-500 hover:bg-purple-600 text-white w-full flex items-center justify-center gap-2"
@@ -367,6 +420,50 @@ export default function GithubProjectsPage() {
           </div>
         </div>
       </div>
+      <AlertDialog open={showDiscordDialog} onOpenChange={setShowDiscordDialog}>
+  <AlertDialogContent className="bg-slate-800 text-white border-slate-700">
+    <AlertDialogHeader>
+      <AlertDialogTitle className="text-2xl flex items-center gap-2">
+        <DiscordIcon className="text-purple-500 w-6 h-6" />
+        Join Our Discord Community!
+      </AlertDialogTitle>
+      <AlertDialogDescription className="text-gray-300 space-y-4">
+        <p>
+          Dont miss updates about your submission! Join our vibrant Discord community to:
+        </p>
+        <ul className="space-y-2">
+          <li className="flex items-start gap-2">
+            <Check className="text-green-500 mt-1 shrink-0" />
+            Get notified when your project is reviewed
+          </li>
+          <li className="flex items-start gap-2">
+            <Check className="text-green-500 mt-1 shrink-0" />
+            Connect with like-minded developers
+          </li>
+          <li className="flex items-start gap-2">
+            <Check className="text-green-500 mt-1 shrink-0" />
+            Discover more amazing projects daily
+          </li>
+          <li className="flex items-start gap-2">
+            <Check className="text-green-500 mt-1 shrink-0" />
+            Share your knowledge and learn from others
+          </li>
+        </ul>
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel onClick={handleFinalSubmit} className="bg-slate-700 text-white hover:bg-slate-600 border-slate-600">
+        Submit Without Joining
+      </AlertDialogCancel>
+      <AlertDialogAction 
+        onClick={handleDiscordJoin}
+        className="bg-purple-500 hover:bg-purple-600 text-white"
+      >
+        Join Discord and Submit
+      </AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
     </div>
   );
 }