search functionality added

src/app/blogs/Blogs.jsx

@@ -1,4 +1,4 @@
-import { Stack, Typography } from "@mui/material";
+import { Stack, Typography,Box } from "@mui/material";
 import blogStyles from "./blogs.module.css";
 import AnimatePage from "../../ui/AnimatePage";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -73,7 +73,7 @@ export default function Blogs() {
 				position="relative"
 				paddingBottom="10rem"
 			>
-				<Typography variant="h2" className={blogStyles.blogs} paddingY="20px">
+				<Typography variant="h2" className={blogStyles.blogs} paddingY="20px" sx={{fontSize:{xs:"30px",md:"45px",lg:"60px"},}}>
 					Blogs
 				</Typography>
 				<Stack
@@ -90,17 +90,19 @@ export default function Blogs() {
 							className={blogStyles.main}
 							key={index}
 							minHeight="300px"
-							minWidth="400px"
+							minWidth="250px"
 							borderRadius="20px"
 							position="relative"
 						>
-							<img
+							<Box
+							component="img"
+							src={blog.img}
 								className={blogStyles.blogimage}
 								height="300px"
-								width="400px"
-								src={blog.img}
+								// width="400px"
+								// src={blog.img}
 								alt={blog.title}
-								style={{ objectFit: "cover", borderRadius: "20px" }}
+								sx={{ objectFit: "cover", borderRadius: "20px",width:{xs:"250px !important",md:"400px"} }}
 							/>
 							<Stack
 								className={blogStyles.title}

src/app/events/Events.jsx

@@ -12,16 +12,18 @@ export default function Events() {
         alignItems={"center"}
         position="relative"
         paddingBottom={"2rem"}
+
     >
-        <Typography variant="h2" paddingY="20px">
+        <Typography variant="h2" paddingY="20px" sx={{fontSize:{xs:"30px",md:"45px",lg:"60px"},}}>
+
             Events
         </Typography>
-    <Stack paddingY={3} direction={'row'} gap={20}>
+    <Stack paddingY={3}    sx={{flexDirection:{xs:"column-reverse",md:"row"} ,width:"90vw",paddingX:{lg:"40px",md:"10px"} }}>
 
-        <Stack className={eventStyles.eventsList}>
+        <Stack className={eventStyles.eventsList}  sx={{width:{md:"100vw"},marginTop:{md:"30px",sm:"30px",xs:"30px"}}}>
         <EventList />
         </Stack>
-        <Stack className={eventStyles.calender}>
+        <Stack className={eventStyles.calender}   sx={{width:{md:"100vw",lg:"auto"},justifyContent:"center",alignItems:"center",position:{lg:"sticky",md:"unset"},top:"120px"}}>
         <Calender />
         </Stack>
 

src/app/events/components/Calender.jsx

@@ -12,8 +12,8 @@ export default function Calendar() {
   const [value, setValue] = useState(dayjs());
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer components={['DateCalendar', 'DateCalendar']}>
+    <LocalizationProvider dateAdapter={AdapterDayjs} >
+      <DemoContainer components={['DateCalendar', 'DateCalendar']} >
       <DemoItem >
       <DateCalendar  
        value={value}

src/app/events/components/EventCard.jsx

@@ -3,7 +3,7 @@ import eventStyles from "../events.module.css";
 
 export default function EventCard({ key,date, title, info }) {
 	return (
-		<Stack className={eventStyles.eventcard} width={"650px"} key={key} padding={4} borderRadius={2}>
+		<Stack className={eventStyles.eventcard} sx={{width:{xs:"100%",md:"650px"}}} key={key} padding={4} borderRadius={2}>
 			<Stack className={eventStyles.upper} paddingY={2} gap={1}>
 				<Typography variant="h6">{date}</Typography>
                 <Stack>
@@ -17,7 +17,7 @@ export default function EventCard({ key,date, title, info }) {
 			</Stack>    
 
 			<Stack gap={2}>
-				<Typography variant="h4" sx={{ color: "#35FF1F" }}>
+				<Typography variant="h4" sx={{ color: "#35FF1F" ,fontSize:{xs:"14px",md:"25px",lg:"40px"},}}>
 					{title}
 				</Typography>
 

src/app/events/components/EventList.jsx

@@ -1,88 +1,88 @@
-import { Stack , TextField,Button , Typography} from "@mui/material";
+import { Stack , TextField, Button , Typography} from "@mui/material";
 import EventCard from "./EventCard";
 import useDatePicker from '../../../shared/store/useDatePicker';
-import { useEffect,useState } from "react";
+import { useEffect, useState } from "react";
 
-const datalist1 = [
+const datalist10 = [
   {
       date: "Monday, October 09",
       title: "ICPC Info Session      ",
-      info: "The ICPC info session was conducted to appraise everyone about the international programming contest where they can participate in groups of three. The team which qualified for the regional round of last year's ICPC was invited as the guest." 
+      info: "The ICPC info session was conducted to appraise everyone about the international programming contest where they can participate in groups of three. The team which qualified for the regional round of last year's ICPC was invited as the guest." 
   }
 ]
 
 
-const datalist2 = [
+const datalist9 = [
   {
       date: "Sunday, January 14",
       title: "AWS Cloud Workshop",
-      info: "- The AWS cloud workshop was conducted to  elevate the students' knowledge on AI and AWS cloud. The workshop was conducted by the founder of Linux World - Vimal Daga." 
+      info: "- The AWS cloud workshop was conducted to  elevate the students' knowledge on AI and AWS cloud. The workshop was conducted by the founder of Linux World - Vimal Daga." 
   }
 ]
-const datalist3 = [
+const datalist8 = [
     {
         date: "Wednesday, February 21",
         title: "Explorigma- the freshmen orientation program",
-        info: " The initial stride towards knowing a community is the adventurous pursuit of exploration. The program provided the freshers a chance to delve into the offerings of Enigma." 
+        info: " The initial stride towards knowing a community is the adventurous pursuit of exploration. The program provided the freshers a chance to delve into the offerings of Enigma." 
     }
 ]
-const datalist4 = [
+const datalist7 = [
   {
       date: "Monday, March 11",
       title: "Lift Off C++",
-      info: " - The Lift off C++ was a one-month program conducted for the university students. It provided fundamental C++ concepts through structured lessons, hands-on tasks, and group mentorship, fostering collaboration and proficiency in programming." 
+      info: " - The Lift off C++ was a one-month program conducted for the university students. It provided fundamental C++ concepts through structured lessons, hands-on tasks, and group mentorship, fostering collaboration and proficiency in programming." 
   }
 ]
-const datalist5 = [
+const datalist6 = [
   {
       date: "Saturday, March 23",
       title: "VSIEGE",
-      info: " During  Samavesh X Vassaunt 2024, the VSiege gaming tournament concluded, featuring the VSSUT Map in TDM mode. Participants displayed intense battles and skillful strategies, captivating every game enthusiast with the game developed by ENIGMA members." 
+      info: " During  Samavesh X Vassaunt 2024, the VSiege gaming tournament concluded, featuring the VSSUT Map in TDM mode. Participants displayed intense battles and skillful strategies, captivating every game enthusiast with the game developed by ENIGMA members." 
   },
   {
     date: "Saturday, March 23",
     title: "SERVER ATTACK",
-    info: " The Server Attack virtual event was conducted in the SAMAVESHXVASSAUNT 2024.  It blended strategic prowess with tech skills in simulated cyber battles. Participants clashed servers to outsmart, infiltrate, and secure data. In this thrilling game of wits and code, minds were sharpened, skills honed, and the digital frontier conquered" 
+    info: " The Server Attack virtual event was conducted in the SAMAVESHXVASSAUNT 2024.  It blended strategic prowess with tech skills in simulated cyber battles. Participants clashed servers to outsmart, infiltrate, and secure data. In this thrilling game of wits and code, minds were sharpened, skills honed, and the digital frontier conquered" 
 }
 
 ]
-const datalist6 = [
+const datalist5 = [
   {
       date: "Sunday, March 24",
       title: "BLIND CODE",
-      info: " On March 24th, from 2pm to 4pm, Blind Code, a pioneering programming competition, unfolded. Participants wrote code without visual feedback, showcasing their conceptualization and execution skills. Developed by ENIGMA Club members, it emphasized the significance of vision in coding." 
+      info: " On March 24th, from 2pm to 4pm, Blind Code, a pioneering programming competition, unfolded. Participants wrote code without visual feedback, showcasing their conceptualization and execution skills. Developed by ENIGMA Club members, it emphasized the significance of vision in coding." 
   }
 ]
 
 
-const datalist7 = [
+const datalist4 = [
     {
         date: "Thursday, March 14",
         title: "Enigma Induction",
-        info: " Enigma conducted its Induction program, welcoming freshers into the club's fold. This event was crucial as it not only introduces newcomers to the club's activities but also fosters a sense of community and collaboration among members." 
+        info: " Enigma conducted its Induction program, welcoming freshers into the club's fold. This event was crucial as it not only introduces newcomers to the club's activities but also fosters a sense of community and collaboration among members." 
     }
 ]
-const datalist8 = [
+const datalist3 = [
   {
       date: "To be announced",
       title: "Web Dev Workshop",
-      info: "Web Dev Workshop Join our summer program for university students, focusing on web development. Structured lessons, hands-on tasks, and group mentorship deepen understanding. Unlock the world of web development with us!" 
+      info: "Web Dev Workshop Join our summer program for university students, focusing on web development. Structured lessons, hands-on tasks, and group mentorship deepen understanding. Unlock the world of web development with us!" 
   }
 ]
 
-const datalist9 = [
+const datalist2 = [
   {
       date: "To be announced",
       title: "Level Up DSA",
-      info: " Level Up DSA is going to offer a one-month summer program for all university students, focusing on Data Structures and Algorithms. Structured lessons, hands-on tasks, and group mentorship deepen understanding. Join to unlock DSA mysteries and excel in computer science." 
+      info: " Level Up DSA is going to offer a one-month summer program for all university students, focusing on Data Structures and Algorithms. Structured lessons, hands-on tasks, and group mentorship deepen understanding. Join to unlock DSA mysteries and excel in computer science." 
   }
 ]
 
-const datalist10 = [
+const datalist1 = [
   {
       date: "Upcoming",
       title: "Hackathon",
-      info: "Gear up for ENIGMA's upcoming hackathon! Dive into coding challenges with your team. Prepare for multiple rounds of intense competition and exciting tech challenges. Don't miss out!" 
+      info: "Gear up for ENIGMA's upcoming hackathon! Dive into coding challenges with your team. Prepare for multiple rounds of intense competition and exciting tech challenges. Don't miss out!" 
   }
 ]
 
@@ -92,72 +92,59 @@ const datalist10 = [
 const totalData = [...datalist1, ...datalist2, ...datalist3, ...datalist4, ...datalist5, ...datalist6, ...datalist7 , ...datalist8 , ...datalist9, ...datalist10];
 
 export default function EventList() {
+  const [result, setResult] = useState([]);
+  const [pickedDate] = useDatePicker((state) => [state.pickedDate]);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    setResult([totalData]);
+
+    if (searchQuery !== '') {
+      const filteredData = totalData.filter(data =>
+        data.title.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+      setResult(filteredData);
+    } else if (pickedDate !== '') {
+      const filteredByDate = totalData.filter(data => data.date === pickedDate);
+      setResult(filteredByDate);
+    }
+    else{
+      setResult(totalData)
+    }
+  }, [pickedDate, searchQuery]);
 
-    const [result, setResult] = useState([]);
-    const [pickedDate] = useDatePicker((state) => [state.pickedDate]);
-    // console.log('Picked Date:', pickedDate);
-
-    useEffect(() => {
-        console.log('useEffect')
-        totalData.map((data) => {
-            if(data.date == pickedDate){
-                setResult(
-                    [...result, data]
-                );
-            }
-        })
-
-    }, [pickedDate]);
-
+  const handleSearchChange = (event) => {
+    setSearchQuery(event.target.value);
+  };
 
   return (
-    <Stack gap={3} justifyContent={'start'} alignItems={'start'} width={"650px"}>
-
+    <Stack gap={3} justifyContent={'start'} alignItems={'start'} sx={{width:{xs:"100%",md:"650px"}}}>
       <Stack className="search-box" width={'70%'} position={'relative'} left={30} direction={'row'} gap={3}>
-      <TextField fullWidth id="outlined-basic"  variant="outlined" />
-      <Button variant="contained">
-        Filter
-      </Button>
+        <TextField
+          fullWidth
+          id="outlined-basic"
+          variant="outlined"
+          value={searchQuery}
+          onChange={handleSearchChange}
+        />
+        <Button variant="contained">
+          Filter
+        </Button>
       </Stack>
 
-        {
-            pickedDate == '' && (
-                <Stack>
-                {totalData.map((data,idx) => (
-                  <EventCard 
-                  key={idx}
-                  date={data.date}
-                   title={data.title}
-                    info={data.info} />
-                ))}
-              </Stack>)
-        }
-
-        {!(pickedDate != '' && result.length > 0) ? (
-            <Stack paddingY={8} width={'100%'}
-            justifyContent={'center'}
-              alignItems={'center'}
-            >
-              <Typography variant="h6">
-          No events on this day
-              </Typography>
-        </Stack>)
-        :
-        (
-            <Stack>
-            {result.map((data,idx) => (
-              <EventCard 
-              key={idx}
-              date={data.date}
-               title={data.title}
-                info={data.info} />
-            ))
-            }
-          </Stack>
-        )
-        }
-
-
+      {result.length === 0 ? (
+        <Stack paddingY={8} width={'100%'} justifyContent={'center'} alignItems={'center'}>
+          <Typography variant="h6">
+            {pickedDate ? 'No events on this day' : 'No matching events found'}
+          </Typography>
+        </Stack>
+      ) : (
+        <Stack>
+          {result.map((data, idx) => (
+            <EventCard key={idx} date={data.date} title={data.title} info={data.info} />
+          ))}
+        </Stack>
+      )}
     </Stack>
-  )
+  );
 }

src/app/projects/Projects.jsx

@@ -3,12 +3,14 @@ import { Stack, Typography } from "@mui/material";
 import AnimatePage from "../../ui/AnimatePage";
 
 import ProjectCard from "./components/ProjectCard";
-import img1 from "/assets/image1.jpg?url"
+
 import img2 from "/assets/image2.jpg?url"
-import img3 from "/assets/image3.jpg?url"
+import img1 from "/assets/image1.png?url"
 import img4 from "/assets/image4.jpg?url"
 import img5 from "/assets/image5.png?url"
 import img6 from "/assets/image6.jpg?url"
+import img7 from "/assets/image7.png?url"
+import img8 from "/assets/image8.jpg?url"
 export default function Projects() {
 	// const [value, setValue] = useState("one");
 
@@ -18,14 +20,14 @@ export default function Projects() {
 
 	// console.log(value);
 	return (
-		<AnimatePage>
+		// <AnimatePage>
 			<Stack
 				justifyContent="flex-start"
 				alignItems={"center"}
 				position="relative"
 				paddingBottom={"2rem"}
 			>
-				<Typography variant="h2" paddingY="20px">
+				<Typography variant="h2" paddingY="20px" sx={{fontSize:{xs:"30px",md:"45px",lg:"60px"},}}>
 					Projects
 				</Typography>
 
@@ -85,7 +87,7 @@ export default function Projects() {
 					alignItems={"center"}
 					flexWrap={"wrap"}
 					gap={6}
-					padding={6}
+					sx={{padding:{xs:"20px",md:"48px"}}}
 				>
 					{/* {value === "one" && (
 						<>
@@ -107,14 +109,16 @@ export default function Projects() {
 							<ProjectCard />
 						</>
 					)} */}
-					<ProjectCard  title="SMS" status="ongoing" content="VSSUT's Student Management System app enhances connectivity, streamlining student information." imgUrl={img1} />
-					<ProjectCard  title="Ritrovo" status="ongoing" content="Ritrovo unifies clubs, updates students, revolutionizes attendance for enjoyable university life." imgUrl={img2} />
-					<ProjectCard  title="WMS" status="ongoing" content="Innovative waste system with real-time dustbin tracker website promotes efficient disposal for a cleaner university environment." imgUrl={img3} />
-					<ProjectCard  title="Schedule" status="upcoming" content="Efficiently manage tasks with our user-friendly schedule app for streamlined organization, productivity, and stress-free planning." imgUrl={img4} />
+					<ProjectCard  title="WMS" status="ongoing" content="Innovative waste system with real-time dustbin tracker website promotes efficient disposal for a cleaner university environment." imgUrl={img7} />
+					<ProjectCard  title="Ritrovo" status="ongoing" content="Ritrovo unifies clubs, updates students, revolutionizes attendance for enjoyable university life." imgUrl={img1} />
 					<ProjectCard  title="VSIEGE" status="ongoing" content="Multiplayer game where we need to choose loadout, spawn with team, hunt enemies, use cover, win match, check stats." imgUrl={img5} />
-					<ProjectCard  title="Enigma-Ui-Kit" status="ongoing" content="CSS framework like MUI it offers a streamlined approach to creating user interfaces. Utilizing Material UI, it provides a familiar yet nimble toolkit for developers, making UI development more accessible and efficient" imgUrl={img6} />
+					<ProjectCard  title="Enigma-Ui-Kit" status="ongoing" content="CSS framework like MUI it offers a streamlined approach to creating user interfaces. It provides a familiar yet nimble toolkit for developers." imgUrl={img6} />
+					<ProjectCard  title="SMS" status="ongoing" content="VSSUT's Student Management System app enhances connectivity, streamlining student information." imgUrl={img8} />
+
+					<ProjectCard  title="Schedule" status="upcoming" content="Efficiently manage tasks with our user-friendly schedule app for streamlined organization, productivity, and stress-free planning." imgUrl={img4} />
+
 				</Stack>
 			</Stack>
-		</AnimatePage>
+		// </AnimatePage>
 	);
 }