Merge pull request #307 from inkerton/two

Add Events Page

data.json

@@ -639,8 +639,7 @@
       "youtubeLink": "https://www.youtube.com/watch?v=3N1Cg7nM3Bg"
     }
   ],
-  "events": {
-    "finished": [
+  "events": [
       {
         "id": "1",
         "title": "Tech for Good Hackathon",
@@ -676,9 +675,7 @@
         "status": "finished",
         "organizers": ["GDSC RCCIIT"],
         "participants": 50
-      }
-    ],
-    "ongoing": [
+      },
       {
         "id": "3",
         "title": "AI & ML Workshop",
@@ -691,9 +688,7 @@
         "status": "ongoing",
         "organizers": ["GDSC RCCIIT"],
         "participants": 80
-      }
-    ],
-    "upcoming": [
+      },
       {
         "id": "4",
         "title": "Cloud Computing Seminar",
@@ -723,5 +718,4 @@
         "participants": 0
       }
     ]
-  }
 }

src/app/(pages)/AddEvent/page.jsx

@@ -0,0 +1,136 @@
+'use client'
+import AddEventForm from "@/components/Global/AddEventForm";
+import { Card } from "@/components/ui/card";
+import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
+
+const AddEventSkeleton = () => (
+  <div className="relative h-[600px] bg-gray-100 overflow-hidden border border-gray-300 animate-pulse">
+    <div className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px] bg-gray-200" />
+
+    {/* Skeleton floating circles */}
+    <div className="absolute top-[-35px] left-[300px] h-36 w-36 bg-gray-300 rounded-full animate-pulse" />
+    <div className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-gray-300 rounded-full animate-pulse" />
+    <div className="absolute bottom-10 right-[500px] h-28 w-28 bg-gray-300 rounded-full animate-pulse" />
+    <div className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-gray-300 rounded-full animate-pulse" />
+
+    {/* Skeleton for text content */}
+    <div className="relative z-10 flex flex-col items-start justify-center h-full pl-12 text-left space-y-4">
+      <div className="h-10 w-3/4 bg-gray-300 rounded-md" />
+      <div className="h-10 w-2/3 bg-gray-300 rounded-md mt-2" />
+      <div className="h-5 w-1/2 bg-gray-300 rounded-md mt-4" />
+      <div className="h-5 w-1/2 bg-gray-300 rounded-md mt-2" />
+
+      {/* Skeleton for buttons */}
+      <div className="flex space-x-4 mt-8">
+        <div className="h-10 w-24 bg-gray-300 rounded-md" />
+        <div className="h-10 w-24 bg-gray-300 rounded-md" />
+      </div>
+    </div>
+  </div>
+);
+
+const AddEvent = () => {
+  const [loading, setLoading] = useState(true);
+
+  // Simulate loading delay
+  useEffect(() => {
+    const timer = setTimeout(() => setLoading(false), 2000); // Adjust duration as needed
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (loading) {
+    return <AddEventSkeleton />;
+  }
+
+  return (
+    <div className="relative h-[1700px] bg-white flex justify-center items-center overflow-hidden border border-gray-300">
+      <motion.div
+        className="absolute inset-0 grid grid-cols-12 gap-4 bg-[length:60px_60px]"
+        style={{
+          backgroundImage: `
+            linear-gradient(270deg, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 25.1%),
+            linear-gradient(to right, #e2e8f0 0.5px, transparent 3.1px),
+            linear-gradient(to bottom, #e2e8f0 1px, transparent 1px),
+            linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%)`
+        }}
+      >
+        {/* Floating Circles with subtle scaling and hovering animation */}
+        <motion.div
+          className="absolute top-[-35px] left-[300px] h-36 w-36 bg-yellow-500 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity }}
+        />
+        <motion.div
+          className="absolute top-[50px] right-[50px] h-[400px] w-[400px] bg-blue-700 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
+        />
+        <motion.div
+          className="absolute top-[750px] right-[50px] h-[400px] w-[400px] bg-blue-700 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.3 }}
+        />
+        <motion.div
+          className="absolute top-[950px] left-[50px] h-28 w-28 bg-red-500 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
+        />
+        <motion.div
+          className="absolute top-[1100px] left-[75px] h-[400px] w-[400px] bg-red-500 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
+        />
+        <motion.div
+          className="absolute top-[1900px] left-[75px] h-[200px] w-[200px] bg-green-500 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
+        />
+        <motion.div
+          className="absolute top-[2100px] right-[50px] h-[100px] w-[100px] bg-yellow-500 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
+        />
+        <motion.div
+          className="absolute bottom-10 right-[500px] h-28 w-28 bg-red-500 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
+        />
+        <motion.div
+          className="absolute bottom-[-60px] left-8 h-[200px] w-[200px] bg-green-500 rounded-full"
+          animate={{ scale: [1, 1.1, 1] }}
+          transition={{ duration: 2, repeat: Infinity, delay: 0.7 }}
+        />
+      </motion.div>
+
+      {/* Centered White Box */}
+      <div className="relative z-10 bg-white -mt-60 -mb-24 rounded-lg shadow-lg p-12 w-[1200px] h-[1300px] flex ">
+        <form className="w-full">
+        <div className="text-center">
+          <motion.h1
+            className="text-5xl font-extrabold bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text"
+            initial={{ opacity: 0, y: -50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Events Form
+          </motion.h1>
+
+          <motion.p
+            className="text-gray-600 text-xl mt-4 max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 50 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            Add a new event so our community can become bigger and better!
+          </motion.p>
+        </div>
+          <AddEventForm/>
+          {/* Your form content goes here */}
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default AddEvent;

src/components/Global/AddEventForm.jsx

@@ -0,0 +1,162 @@
+'use client'
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import { useForm, useFieldArray } from 'react-hook-form';
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
+
+export default function AddEventForm() {
+  const { register, handleSubmit, control } = useForm();
+  const [nextId, setNextId] = useState(null);
+
+  useEffect(() => {
+    // Fetch current count of hackathons for unique ID assignment
+    axios
+      .get("http://localhost:5000/events")
+      .then((response) => {
+        setNextId(response.data.length + 1);
+        console.log("id that was fetched ", response.data.length);
+      })
+      .catch((error) =>
+        console.error("Error fetching hackathons count:", error)
+      );
+  }, []);
+
+
+  const onSubmit = (data) => {
+    console.log("Submitted Data:", data);
+    const eventsData = {
+        id: nextId.toString(),
+        title: data.title,
+          description: data.description,
+          date: {
+            start: data.startDate,
+            end: data.endDate,
+          },
+          location: data.location,
+          status: data.status,
+          registrationLink: data.registrationLink,
+          organizers: data.organizers.split(", "),
+          participants: data.participants,
+      };
+      console.log("eventsData",eventsData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+      <div className="grid w-full max-w-full items-center gap-1.5">
+        <Label htmlFor="title" className="font-bold text-lg mt-4">
+          Project Title
+        </Label>
+        <Input
+          id="title"
+          {...register("title")}
+          placeholder="Hackathon Title"
+          className="p-6 text-md"
+        />
+
+        <Label htmlFor="description" className="font-bold text-lg mt-4">
+          Description
+        </Label>
+        <Textarea
+          id="description"
+          {...register("description")}
+          placeholder="Describe the hackathon"
+          className="p-6 text-md"
+        />
+
+        <div className="flex space-x-4 mt-4">
+          <div className="flex-1">
+            <Label htmlFor="startDate" className="font-bold text-lg mb-1">
+              Start Date
+            </Label>
+            <div className="flex items-center">
+              <Input
+                id="startDate"
+                type="datetime-local"
+                {...register("startDate")}
+                className="p-6 text-md"
+              />
+            </div>
+          </div>
+
+          <div className="flex-1">
+            <Label htmlFor="endDate" className="font-bold text-lg mb-1">
+              End Date
+            </Label>
+            <div className="flex items-center">
+              <Input
+                id="endDate"
+                type="datetime-local"
+                {...register("endDate")}
+                className="p-6 text-md"
+              />
+            </div>
+          </div>
+        </div>
+
+        <Label htmlFor="location" className="font-bold text-lg mt-4">
+          Location
+        </Label>
+        <Input
+          id="location"
+          {...register("location")}
+          placeholder="e.g., 48 hours"
+          className="p-6 text-md"
+        />
+
+        <Label htmlFor="status" className="font-bold text-lg mt-4">
+          Status
+        </Label>
+        <Input
+          id="status"
+          {...register("status")}
+          placeholder="e.g., Online or Physical Address"
+          className="p-6 text-md"
+        />
+
+        <Label htmlFor="registrationLink" className="font-bold text-lg mt-4">
+          Registration Link
+        </Label>
+        <Input
+          id="registrationLink"
+          {...register("registrationLink")}
+          placeholder="Registration Link"
+          className="p-6 text-md"
+        />
+
+        <Label htmlFor="organizers" className="font-bold text-lg mt-4">
+          Organizers
+        </Label>
+        <Textarea
+          id="organizers"
+          {...register("organizers")}
+          placeholder="Comma-separated categories"
+          className="p-6 text-md"
+        />
+
+        <Label htmlFor="participants" className="font-bold text-lg mt-4">
+          Participants
+        </Label>
+        <Textarea
+          id="participants"
+          {...register("participants")}
+          placeholder="Participants"
+          className="p-6 text-md"
+        />
+        </div>
+        <Button type="submit" className="w-full mt-6">
+        Submit Event
+      </Button>
+    </form>
+  );
+}