added events api

Author: ArpitKhatri1

constants.tsx

@@ -107,3 +107,6 @@ export const initialEdges = [
   { id: "e11", source: "summer-intern", target: "si-2024" },
   { id: "e12", source: "summer-intern", target: "si-2025" },
 ];
+
+export const defaultImageUrl = "https://images.unsplash.com/photo-1669352311123-085520652a65?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+

src/app/api/postform/route.ts

@@ -0,0 +1,31 @@
+// app/api/events/postform/route.ts
+import { NextRequest, NextResponse } from "next/server";
+import axios from "axios";
+
+export async function POST(req: NextRequest) {
+  console.log("Route /api/events/postform hit");
+
+  const { formData } = await req.json();
+  console.log("Received Form Data:", formData);
+
+  try {
+    const response = await axios.post(
+      "https://discoverwithsac-bitspilani.in/2025/main/api/contact/",
+      formData,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    console.log("API Response:", response.data);
+    return NextResponse.json({ success: true, message: "Form submitted!" });
+  } catch (error) {
+    console.error("Error sending form data:", error);
+    return NextResponse.json(
+      { success: false, message: "Submission failed" },
+      { status: 500 }
+    );
+  }
+}

src/app/blogs/[blogId]/page.tsx

@@ -70,7 +70,7 @@ const SingleResourcePage = ({ params }: PageProps) => {
         </div>
 
       </div>
-      <div className="mt-8 px-10">
+      <div className="mt-8 px-10 pb-40">
         {currentBlogPost.comments_enabled && currentBlogPost.comments && (
           <CommentsSection postId={Number(blogId)} />
         )}

src/app/events/[eventId]/page.tsx

@@ -22,7 +22,7 @@ const SingleEventPage = ({ params }: PageProps) => {
                 const response = await axios.get("/api/getsingleevent", {
                     params: { eventId }
                 });
-                console.log("here is the reponse", response.data)
+
                 setCurrentEvent(response.data as EventType);
             } catch (e) {
                 console.log("There was some error", e);
@@ -41,7 +41,6 @@ const SingleEventPage = ({ params }: PageProps) => {
             </div>
         );
     }
-    console.log(currentEvent)
 
     return (
         <div className="w-full justify-center min-h-full">

src/app/events/page.tsx

@@ -29,9 +29,12 @@ const EventsPage = () => {
 
     useEffect(() => {
         const getEvents = async () => {
-            const data = await axios.get("/api/events")
-            const res: EventType[] = await data.data
-            setEvents(res)
+            const { data } = await axios.get("/api/events")
+            const sortedEvents: EventType[] = data.sort((a: EventType, b: EventType) => {
+                return new Date(a.created_at).getTime() - new Date(b.created_at).getTime()
+            })
+            setEvents(sortedEvents)
+
         }
         getEvents()
         // setEvents(undefined)

src/app/home/page.tsx

@@ -3,26 +3,18 @@ import Image from "next/image";
 import { Separator } from "@/components/ui/separator";
 import ImageCarousel from "@/components/home/crousel";
 import BlogCrousel from "@/components/home/blog-crousel";
+import EventsCrousel from "@/components/home/events-crousel";
 
 const Home = () => {
   const ResourceImage = [
-    { src: "/production/resources/r1.jpg" },
-    { src: "/production/resources/r2.png" },
-    { src: "/production/resources/r3.png" }
+    { src: "/production/resources/r1.jpg", link: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/resources/101` },
+    { src: "/production/resources/r2.png", link: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/resources/102` },
+    { src: "/production/resources/r3.png", link: `${process.env.NEXT_PUBLIC_FRONTEND_URL}/resources/103` }
   ]
-  const EventsImage = [
-    { src: "/production/events/e1.jpg" },
-    { src: "/production/events/e2.jpg" },
-    { src: "/production/events/enew.jpg" }
-  ]
-
-  // const finalImages = [
-  //   // `https://www.instagram.com/p/DEtr6QjJD0B/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==`
-  // ]
 
   return (
 
-    <div className="flex flex-col justify-center items-center mb-10">
+    <div className="flex flex-col justify-center items-center mb-40">
       <div className="h-screen w-full bg-slate-200 -mt-24 relative">
         {" "}
         {/* negative margin to negate the effect of shifted navbar, value should be same as height of navbar */}
@@ -47,10 +39,7 @@ const Home = () => {
         </div>
         <div className="space-y-20">
           <ImageCarousel images={ResourceImage} autoPlayInterval={5000} />
-          <div className="text-4xl font-bold text-center py-5 underline">
-            Events
-          </div>
-          <ImageCarousel images={EventsImage} autoPlayInterval={5000} />
+          <EventsCrousel />
           <BlogCrousel />
         </div>
       </div>

src/components/blogs/singular-blog.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import Image from "next/image";
+import { defaultImageUrl } from "../../../constants";
 
 interface SingularBlogPostProps {
   imageUrl: string;
@@ -28,7 +29,7 @@ const SingularBlogPost: React.FC<SingularBlogPostProps> = ({
   console.log(isValidUrl(imageUrl))
   console.log(imageUrl)
   // Default image URL to use when image is invalid or fails to load
-  const defaultImageUrl = "https://images.unsplash.com/photo-1669352311123-085520652a65?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+
 
   // Determine which image URL to use
   const safeImageUrl = imgError || !isValidUrl(imageUrl) ? defaultImageUrl : imageUrl;

src/components/contact-page/contact-us-form.tsx

@@ -17,20 +17,32 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import axios from "axios";
 
 const ContactUsForm = () => {
   const form = useForm<formSchemaType>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      username: "",
+      name: "",
       email: "",
-      queries: "",
+      message: "",
     },
   });
 
-  const onSubmitForm = () => {
+  const onSubmitForm = async (values: formSchemaType) => {
+    try {
+      const response = await axios.post("/api/postform", {
+        formData: values,
+      });
 
+      console.log("Success:", response.data);
+
+    } catch (error) {
+      console.error("Submission failed:", error);
+
+    }
   };
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmitForm)} className="space-y-8">
@@ -39,66 +51,60 @@ const ContactUsForm = () => {
             <CardTitle className="text-2xl text-center pb-4">
               Reach us out at :
             </CardTitle>
-            <p className="text-center ">
-              Feel free to leave your thoughts down below and we will respond
-              and get in touch with you!!
+            <p className="text-center">
+              Feel free to leave your thoughts down below and we will respond and get in touch with you!!
             </p>
           </CardHeader>
           <CardContent className="flex flex-col gap-5">
             <FormField
               control={form.control}
-              name="username"
+              name="name"
               render={({ field }) => (
                 <FormItem className="text-left space-y-0">
-                  <FormLabel className="w-fit mr p-0 text-lg">
-                    Name (Required){" "}
-                  </FormLabel>
+                  <FormLabel className="text-lg">Name (Required)</FormLabel>
                   <FormControl>
                     <Input
                       className="bg-white text-black py-3"
                       placeholder="Enter Your name here"
                       {...field}
                     />
                   </FormControl>
-
                   <FormMessage />
                 </FormItem>
               )}
             />
+
             <FormField
               control={form.control}
               name="email"
               render={({ field }) => (
                 <FormItem className="text-left space-y-0">
-                  <FormLabel className="text-left text-lg">
-                    Email (Required){" "}
-                  </FormLabel>
+                  <FormLabel className="text-lg">Email (Required)</FormLabel>
                   <FormControl>
                     <Input
                       className="bg-white text-black py-3"
                       placeholder="Enter Your Email here"
                       {...field}
                     />
                   </FormControl>
-
                   <FormMessage />
                 </FormItem>
               )}
             />
+
             <FormField
               control={form.control}
-              name="queries"
+              name="message"
               render={({ field }) => (
                 <FormItem className="text-left space-y-0">
-                  <FormLabel className="text-left text-lg">Queries </FormLabel>
+                  <FormLabel className="text-lg">Queries</FormLabel>
                   <FormControl>
                     <Textarea
                       className="bg-white text-black h-16"
                       placeholder="Enter Your Queries here"
                       {...field}
                     />
                   </FormControl>
-
                   <FormMessage />
                 </FormItem>
               )}
@@ -108,7 +114,7 @@ const ContactUsForm = () => {
               type="submit"
               className="w-fit mx-auto bg-[#ffedb8] text-black font-semibold"
             >
-              Save
+              Submit
             </Button>
           </CardContent>
         </Card>

src/components/events-page/ImageCrouselHorizontal.tsx

@@ -2,14 +2,11 @@
 import { useState, useEffect } from 'react'
 import Image from 'next/image'
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi } from "@/components/ui/carousel"
-const imageList = [
-    "/eventsTestImage.webp",
-    "/eventsTestImage.webp",
-    "/eventsTestImage.webp",
-]
+
 import { MoveUpRight } from 'lucide-react';
-import { EventType } from '@/types'
+import { EventType, Resources } from '@/types'
 import Link from 'next/link'
+import { convertGoogleDriveUrl, getResourceArray, getSafeImageUrl } from '@/lib/utils'
 export default function ImageCarouselHorizontal({ event }: { event: EventType }) {
     const [current, setCurrent] = useState(0)
     const [count, setCount] = useState(0)
@@ -26,21 +23,27 @@ export default function ImageCarouselHorizontal({ event }: { event: EventType })
     }, [api])
     const title = event.title
     const description = event.description
-    const resources = ["resource1", "resource2",]
+    const resources: Resources[] = getResourceArray(event)
+    const rawImages = event.image?.split(",").map(img => img.trim()).filter(Boolean) || [];
+    const imageList = rawImages.map(ele => getSafeImageUrl(convertGoogleDriveUrl(ele)));
     return (
         <div className='flex gap-4 h-[220px] w-full relative '>
-            <div className='bg-[#f2f2f2] p-4 h-[240px] rounded-xl relative border-2 w-[60%]'>
+            <div className='bg-[#f2f2f2] p-4 h-[240px] rounded-xl relative border-2 w-[45%] flex-shrink-0'>
                 <Carousel className='space-y-4  ' setApi={setApi}>
                     {/* <div className='text-center text-xl border-b-2 border-black pb-5 w-fit mx-auto px-10'>
                             Gallery
                         </div> */}
                     <CarouselContent>
                         {imageList.map((src, index) => (
                             <CarouselItem key={index} className='mx-auto'>
-                                <Image src={src} alt={`Gallery image ${index + 1}`}
-                                    width={1000}
-                                    height={0}
-                                    className="h-[170px] w-auto mx-auto" />
+                                <div className="w-[290px] h-[170px] mx-auto relative rounded-lg overflow-hidden bg-white">
+                                    <Image
+                                        src={src}
+                                        alt={`Gallery image ${index + 1}`}
+                                        fill
+                                        className="object-contain"
+                                    />
+                                </div>
                             </CarouselItem>
                         ))}
                     </CarouselContent>
@@ -72,9 +75,11 @@ export default function ImageCarouselHorizontal({ event }: { event: EventType })
                 <div className='flex justify-between px-3 mt-auto'>
                     {resources.map((ele, index) => {
                         return (
-                            <div key={index} className='bg-[#d9d9d9] rounded-3xl py-2 px-10'>
-                                {ele}
-                            </div>
+                            <Link href={ele.link} key={index}>
+                                <div key={index} className='bg-[#d9d9d9] rounded-3xl py-2 px-10'>
+                                    {ele.name}
+                                </div>
+                            </Link>
                         )
                     })}
                 </div>

src/components/events-page/ImageCrouselMain.tsx

@@ -4,13 +4,10 @@ import { useState, useEffect } from 'react'
 import Image from 'next/image'
 import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi } from "@/components/ui/carousel"
 import { MoveUpRight } from 'lucide-react';
-const imageList = [
-    "/eventsTestImage.webp",
-    "/eventsTestImage.webp",
-    "/eventsTestImage.webp"
-]
-import { EventType } from '@/types';
+
+import { EventType, Resources } from '@/types';
 import Link from 'next/link';
+import { convertGoogleDriveUrl, getResourceArray, getSafeImageUrl } from '@/lib/utils';
 
 export default function ImageCarouselMain({ event }: { event: EventType }) {
     const [current, setCurrent] = useState(0)
@@ -32,7 +29,9 @@ export default function ImageCarouselMain({ event }: { event: EventType }) {
 
     const title = event.title
     const description = event.description
-    const resources = ["resource1", "resource2", "resource3"]
+    const resources: Resources[] = getResourceArray(event)
+    const rawImages = event.image?.split(",").map(img => img.trim()).filter(Boolean) || [];
+    const imageList = rawImages.map(ele => getSafeImageUrl(convertGoogleDriveUrl(ele)));
     return (
         <div>
             <div className='relative bg-[#f2f2f2] p-10 pb-16 h-auto rounded-xl border-2'>
@@ -44,7 +43,14 @@ export default function ImageCarouselMain({ event }: { event: EventType }) {
                     <CarouselContent>
                         {imageList.map((src, index) => (
                             <CarouselItem key={index} className='mx-auto'>
-                                <Image src={src} alt={`Gallery image ${index + 1}`} width={300} height={6} className='mx-auto' />
+                                <div className="w-[350px] h-[350px] mx-auto relative rounded-lg overflow-hidden bg-white">
+                                    <Image
+                                        src={src}
+                                        alt={`Gallery image ${index + 1}`}
+                                        fill
+                                        className="object-contain"
+                                    />
+                                </div>
                             </CarouselItem>
                         ))}
                     </CarouselContent>
@@ -73,9 +79,11 @@ export default function ImageCarouselMain({ event }: { event: EventType }) {
                 <div className='flex justify-between px-3 '>
                     {resources.map((ele, index) => {
                         return (
-                            <div key={index} className='bg-[#d9d9d9] rounded-3xl py-2 px-10'>
-                                {ele}
-                            </div>
+                            <Link href={ele.link} key={index}>
+                                <div key={index} className='bg-[#d9d9d9] rounded-3xl py-2 px-10'>
+                                    {ele.name}
+                                </div>
+                            </Link>
                         )
                     })}
                 </div>