Merge pull request #24 from Ayush272002/homepage-revamp

Update homepage and link input to search

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": ["next/core-web-vitals", "next/typescript"],
   "rules": {
-    "@next/next/no-img-element": "off"
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }

app/events/page.tsx

@@ -1,8 +1,9 @@
 'use client';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, Suspense } from 'react';
 import { useRouter } from 'next/navigation'; // Import useRouter for routing
 import Header from '../../components/custom/header';
 import Footer from '../../components/custom/footer';
+import { useSearchParams } from 'next/navigation';
 
 interface Event {
   EventID: number;
@@ -62,7 +63,7 @@ const fetchEvents = (): Event[] => {
 const EventsPage: React.FC = () => {
   const [events, setEvents] = useState<Event[]>([]);
   const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
-  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>("");
   const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
   const [sortOption, setSortOption] = useState<string>('');
   const [filterOptions, setFilterOptions] = useState<string[]>([]);
@@ -80,6 +81,17 @@ const EventsPage: React.FC = () => {
     setFilteredEvents(eventsData);
   }, []);
 
+  const SearchBox = () => {
+    setSearchQuery(useSearchParams().get("q") || "");
+    return <input
+      type="text"
+      placeholder="Search events..."
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+      className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
+    />
+  };
+
   useEffect(() => {
     let filtered = events.filter((event) =>
       ['name', 'date', 'location', 'description', 'host'].some((key) =>
@@ -166,13 +178,18 @@ const EventsPage: React.FC = () => {
 
       <div className="relative z-20 container mx-auto p-4 pt-16">
         <div className="mb-6">
-          <input
+          <Suspense fallback={
-            type="text"
+            <input
-            placeholder="Search events..."
+              type="text"
-            value={searchQuery}
+              placeholder="Search events..."
-            onChange={(e) => setSearchQuery(e.target.value)}
+              disabled={true}
-            className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
+              value="loading..."
-          />
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md"
+            />
+          }>
+            <SearchBox />
+          </Suspense>
           <div className="flex mt-4 space-x-4">
             {/* Sort Button and Dropdown */}
             <div className="relative" ref={sortRef}>

app/page.tsx

@@ -1,16 +1,26 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
 import Header from '../components/custom/header';
 import Footer from '../components/custom/footer';
 import { Input } from '@/components/ui/input';
+import FeaturedEvent from '@/components/custom/FeaturedEvent';
+import { Button } from '@/components/ui/button';
 
 export default function Home() {
+  const router = useRouter();
   const [isClient, setIsClient] = useState(false);
+  const inputRef: any = useRef(null);
 
   useEffect(() => {
     setIsClient(true);
   }, []);
 
+  function searchForEvents() {
+    if (inputRef.current.value == "") return;
+    router.replace("/events?q=" + encodeURIComponent(inputRef.current.value));
+  }
+
   return (
     <>
       <Header />
@@ -32,34 +42,49 @@ export default function Home() {
         <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
 
         {/* Page Content Over the Video */}
-        <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-16">
+        <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-20">
           <div className="container mx-auto p-4">
-            <div className="flex items-center justify-center">
+            <h1 className="text-4xl font-bold text-white text-shadow-lg">
+              Book your next adventure <div className="inline bg-white p-2 rounded-lg shadow-lg text-black">on the <span className="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-pink-600">Flare</span> blockchain</div>
+            </h1>
+            <div className="flex items-center justify-center mt-6 flex-col gap-4">
               <Input
                 type="text"
-                placeholder="Search events ..."
+                placeholder="Search for your next experience..."
-                className="search-bar mt-4 p-2 border bg-white bg-opacity-25 border-gray-300 rounded-xl w-full max-w-5xl text-white"
+                className="flex w-full rounded-md border border-input bg-white bg-opacity-50 placeholder:text-black px-4 py-6 text-lg shadow-sm"
+                ref={inputRef}
               />
+              <Button
+                className="bg-pink-600 bg-opacity-50 text-white px-4 py-6 text-lg w-full hover:bg-pink-500"
+                onClick={searchForEvents}
+              >Search for events</Button>
             </div>
             <main>
-              <br></br>
+              <section className="mb-8 mt-4 mx-auto grid grid-cols-4 gap-4">
-              <section className="mb-8">
+                <FeaturedEvent
-                <h2 className="text-2xl font-semibold text-white mb-4">
+                  name="FAB XO Halloween"
-                  Featured Events
+                  description="Halloween is upon us and is one of the biggest nights of the FAB XO calendar.  Fancy dress is encouraged! So have your fancy dress ready and we look forward to seeing who have the best fancy dress on the night!  As a special treat we will be serving our very own witches brew!!!"
-                </h2>
+                  location="Birmingham, UK"
-                <p className="text-gray-300">
+                  eventStartDate={1729980000}
-                  No events available at the moment.
+                  eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
-                </p>
+                  imageURL={"https://www.guildofstudents.com/asset/Event/7572/Halloween-Fab-XO-Web-Event.jpg"}
-              </section>
+                />
-              <section>
+                <FeaturedEvent
-                <h2 className="text-2xl font-semibold text-white mb-4">
+                  name="Halls Halloween Spooktacular"
-                  Upcoming Events
+                  description="Put on your spookiest costume and head on down to Pritchatts Park and join your Event Activators for our ResLife SPOOKTACULAR on Wednesday 30th October 5-8pm."
-                </h2>
+                  location="Birmingham, UK"
-                <ul className="list-disc list-inside text-gray-300">
+                  eventStartDate={1730307600}
-                  <li>Event 1 - Date</li>
+                  eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
-                  <li>Event 2 - Date</li>
+                  imageURL={"https://www.guildofstudents.com/asset/Event/41187/Spooktacular-Web-Event-2024.png"}
-                  <li>Event 3 - Date</li>
+                />
-                </ul>
+                <FeaturedEvent
+                  name="Housing Fair"
+                  description="We’re hosting a Housing Fair, so make sure you save the date! Whether you’re living in student accommodation or the local community, this will be a great place to start as you begin thinking about where you’ll be living next year."
+                  location="Birmingham, UK"
+                  eventStartDate={1730804400}
+                  eventHost="0x225C73C8c536C4F5335a2C1abECa95b0f221eeF6"
+                  imageURL={"https://www.guildofstudents.com/asset/Event/41111/Housing-Fair-Web-Event.png"}
+                />
               </section>
             </main>
             <Footer />
@@ -68,4 +93,4 @@ export default function Home() {
       </div>
     </>
   );
-}
+}

components/custom/FeaturedEvent.tsx

@@ -0,0 +1,44 @@
+'use client';
+import React from 'react';
+import {
+    Card,
+    CardHeader,
+    CardFooter,
+    CardTitle,
+    CardDescription,
+    CardContent,
+} from '@/components/ui/card';
+
+interface props {
+    name: string;
+    description: string;
+    location: string;
+    eventStartDate: number;
+    eventHost: string;
+    imageURL: string | null;
+}
+
+const FeaturedEvent = ({
+    name, description, location, eventStartDate, eventHost, imageURL
+}: props) => {
+    return <Card>
+        <CardHeader>
+            {imageURL && <img src={imageURL} alt={name}></img>}
+            <CardTitle>
+            {name}
+            </CardTitle>
+            <CardDescription>
+            {location}<br />
+            {new Date(eventStartDate*1000).toLocaleString()}
+            </CardDescription>
+        </CardHeader>
+        <CardContent>
+            {description}
+        </CardContent>
+        <CardFooter>
+            <i>Host: {eventHost.substring(0, 8)}...{eventHost.substring(eventHost.length-3)}</i>
+        </CardFooter>
+    </Card>
+}
+
+export default FeaturedEvent;