Fix: Change off tailwindcss & Fix projects carousel

package.json

@@ -11,10 +11,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.5.5",
-    "@astrojs/node": "^8.2.0",
-    "@astrojs/react": "^3.6.0",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/node": "^8.3.4",
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/tailwind": "^5.1.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@headlessui/react": "^2.1.8",
@@ -26,15 +26,14 @@
     "@supabase/supabase-js": "^2.45.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.15.7",
+    "astro": "^4.16.2",
     "axios": "^1.7.7",
     "dotenv": "^16.4.5",
     "notion-client": "^6.16.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-notion-x": "^6.16.0",
     "sharp": "^0.33.5",
-    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vitest": "^1.4.0",
     "yarn": "^1.22.22"

src/components/AdminPage/RefreshSection.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+import '../../styles/refresh.css';
 
 interface RefreshSectionProps {
   newPassword: string;
@@ -112,10 +113,10 @@ const RefreshSection: React.FC<RefreshSectionProps> = ({
   };
 
   return (
-    <div className="flex flex-col items-center">
-      <p className="text-xl font-bold mb-2">Logged in</p>
-      <form id="change-password-form" onSubmit={handlePasswordChange} className="flex items-center mb-2">
-        <label htmlFor="new-password" className="mr-2 font-semibold">New Password: (Optional)</label>
+    <div className="refresh-section">
+      <p className="logged-in-message">Logged in</p>
+      <form id="change-password-form" onSubmit={handlePasswordChange} className="change-password-form">
+        <label htmlFor="new-password" className="password-label">New Password: (Optional)</label>
         <input
           type="password"
           id="new-password"
@@ -124,28 +125,28 @@ const RefreshSection: React.FC<RefreshSectionProps> = ({
           onChange={(e) => setNewPassword(e.target.value)}
           onKeyDown={(e) => handleKeyDown(e, 'change-password-form')}
           required
-          className="border rounded-lg mx-2 p-2 flex-grow"
+          className="password-input"
         />
-        <button type="submit" className="bg-[#294E03] px-3 py-1 rounded-full text-white font-semibold">
+        <button type="submit" className="change-password-button">
           Change Password
         </button>
         {passwordChanged && (
-          <span className="text-green-600 mx-2 font-bold">Password changed!</span>
+          <span className="password-changed-message">Password changed!</span>
         )}
       </form>
       <button
         onClick={handleRefresh}
-        className="bg-[#294E03] px-3 py-1 rounded-full text-white font-semibold"
+        className="refresh-button"
         disabled={isRefreshing}
       >
         {isRefreshing ? 'Refreshing...' : 'Refresh'}
       </button>
       {logs.length > 0 && (
-        <div className="mt-4 w-full max-w-md">
-          <h3 className="text-lg font-semibold mb-2">Refresh Logs:</h3>
-          <ul className="list-disc pl-5 space-y-1 max-h-40 overflow-y-auto bg-gray-100 p-2 rounded">
+        <div className="logs-container">
+          <h3 className="logs-title">Refresh Logs:</h3>
+          <ul className="logs-list">
             {logs.map((log, index) => (
-              <li key={index} className="text-sm">
+              <li key={index} className="log-message">
                 {new Date(log.timestamp).toLocaleTimeString()}: {log.message}
               </li>
             ))}
@@ -156,4 +157,4 @@ const RefreshSection: React.FC<RefreshSectionProps> = ({
   );
 };
 
-export default RefreshSection;
+export default RefreshSection;

src/components/AdminPage/loginForm.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import './loginForm.css';
+import '../../styles/refresh.css';
 import RefreshSection from './RefreshSection';
 
 const LoginForm = () => {
@@ -41,24 +41,24 @@ const LoginForm = () => {
   };
 
   return (
-    <div className="w-dvw h-dvh flex justify-center items-center bg-[#C8E4AE]">
-      <div className="flex flex-col">
+    <div className="login-container">
+      <div className="login-form-wrapper">
         {!loggedIn ? (
-          <form id="login-form" onSubmit={handleLogin} className="mb-2">
-            <label htmlFor="password" className='mr-2 font-semibold'>Enter Password:</label>
+          <form id="login-form" onSubmit={handleLogin} className="login-form">
+            <label htmlFor="password" className='password-label'>Enter Password:</label>
             <input
               type="password"
               id="password"
               name="password"
               required
               onChange={(e) => setPassword(e.target.value)}
               onKeyDown={(e) => handleKeyDown(e, 'login-form')}
-              className="border rounded-lg mx-2 p-2"
+              className="password-input"
             />
-            <button type="submit" className="bg-[#294E03] px-3 py-1 rounded-full text-white font-semibold">
+            <button type="submit" className="login-button">
               Login
             </button>
-            {errorMessage && <p>{errorMessage}</p>}
+            {errorMessage && <p className="error-message">{errorMessage}</p>}
           </form>
         ) : (
           <RefreshSection

src/components/ImageCarousel.tsx

@@ -21,7 +21,6 @@ type CarouselProps = {
 };
 
 export default function ImageCarousel({ carousels }: CarouselProps) {
-    console.log(carousels)
     const events: Events[] = carousels?.map((carousel) => ({
         src: carousel.images[0], 
         alt: carousel.subheadings[0],

src/components/projects page/PastProjectsList.tsx → src/components/projectspage/PastProjectsList.tsx

@@ -7,7 +7,7 @@ type PastProjectsListProps = {
 };
 
 export default function PastProjectsList({ projects }: PastProjectsListProps) {
-  console.log(projects)
+
   return (
     <div>
       {projects.map((project, index) => {

src/components/projectspage/ProjectsImageCarousel.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import "../../styles/index.css";
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+
+interface Project {
+    id: string;
+    title: string;
+    date: string;
+    description: string;
+    cover: string;
+    team: string;
+    createdAt: string;
+    updatedAt: string;
+    carouselNumber: number;
+}
+
+type CarouselProps = {
+    projects: Project[];
+};
+
+export default function ProjectsImageCarousel({ projects }: CarouselProps) {
+    const events = projects.map((project) => ({
+        src: project.cover,   
+        alt: project.title,  
+        time: new Date(project.date).toLocaleDateString(),  
+        title: project.title, 
+        description: project.description,
+    }));
+
+    const [imgIndex, setImgIndex] = useState<number>(0);
+
+    const handleBack = () => {
+        setImgIndex((prevIndex) => (prevIndex === 0 ? events.length - 1 : prevIndex - 1));
+    };
+
+    const handleForward = () => {
+        setImgIndex((prevIndex) => (prevIndex === events.length - 1 ? 0 : prevIndex + 1));
+    };
+
+    return (
+        <>  
+            <div style={{ width: "100%", height: "100%", position: "relative", padding: "10px"}}>
+                <div className="index-event-img" style={{ width: "100%", height: "100%", display: "flex", overflow: "hidden" }}>
+                    {events.map((event, index) => (
+                        <img key={index} src={event.src} alt={event.alt} className="index-event-image-container" style={{ translate: `${-100 * imgIndex}%`, opacity: 0.7, aspectRatio: "14/6" }}/>
+                    ))}
+                </div>
+                <div className="index-event-text">
+                    <h2 className="index-heading text-green-dark" style={{ paddingRight: 15, paddingLeft: 15, margin: "auto", fontSize: "2.4vw" }}>Upcoming events</h2>
+                </div>
+                {/* Do not remove the 2 divs below */}
+                <div className="index-event-right-corner-element">corn</div>
+                <div className="index-event-left-corner-element">corn</div>
+                <button onClick={handleBack} className="index-carousel-button index-carousel-button-left" style={{ left: 10 }}>
+                    <ArrowBackIosIcon style={{ width: 50, height: 50 }} />
+                </button>
+                <button onClick={handleForward} className="index-carousel-button index-carousel-button-right" style={{ right: 10 }}>
+                    <ArrowForwardIosIcon style={{ width: 50, height: 50 }} />
+                </button>
+                <div className="index-event-details">
+                    <div>
+                        <div>
+                            <h5>{events[imgIndex].time}</h5>
+                        </div>
+                        <div className="index-event-title">
+                            <h2><b>{events[imgIndex].title}</b></h2>
+                        </div>
+                    </div>
+                    <div className="index-event-description">
+                        <h5>{events[imgIndex].description}</h5>
+                    </div>
+                </div>
+                <div style={{ position: "absolute", bottom: "1.3rem", left: "50%", translate: "-50%" }}>
+                    <span className="image-carousel-indicators">
+                        {events.map((_, index) => (
+                            <button key={index} onClick={() => setImgIndex(index)} className={imgIndex === index ? "image-carousel-indicator" : "image-carousel-indicator image-carousel-indicator-inactive"}></button>
+                        ))}
+                    </span>
+                </div>
+            </div>
+        </>
+    );
+}

src/pages/projects.astro

@@ -3,12 +3,14 @@ import "../styles/global.css";
 import "../styles/index.css";
 import "../styles/projects.css";
 import Layout from "../layouts/layout.astro";
-import PastProjectsList from "../components/projects page/PastProjectsList";
-import ImageCarousel from "../components/ImageCarousel";
+import PastProjectsList from "../components/projectspage/PastProjectsList";
+import ImageCarousel from "../components/projectspage/ProjectsImageCarousel";
 import IndexHeading from "../components/index page/IndexHeading";
 import BlobBackground from "../components/BlobBackground/BlobBackground";
 import { serveProjects } from "../scripts/serveProjects";
 const { projects, carouselList } = await serveProjects();
+console.log(carouselList)
+
 ---
 
 <html lang="en">
@@ -21,7 +23,7 @@ const { projects, carouselList } = await serveProjects();
   </head>
   <Layout>
     <main class="projects-page">
-      <ImageCarousel client:only="react" carousels={carouselList}/>
+      <ImageCarousel client:only="react" projects={carouselList}/>
       <BlobBackground />
       <div class="past-projects-banner">
         <IndexHeading>Our Past Projects</IndexHeading>

src/pages/projects/team2.astro

@@ -5,9 +5,9 @@ import "../../styles/index.css";
 import TeamDisplay from "../../components/TeamDisplayLeft.astro";
 import Layout from "../../layouts/layout.astro";
 import ProjectCard from "../../components/ProjectCard.astro";
-import TeamCard from "../../components/projects page/projects_team_card.astro";
+import TeamCard from "../../components/projectspage/projects_team_card.astro";
 import Carousel from "../../components/carousel.astro";
-import Container from "../../components/projects page/projects_team_container.astro";
+import Container from "../../components/projectspage/projects_team_container.astro";
 ---
 
 <html lang="en">

src/pages/projects/team3.astro

@@ -5,9 +5,9 @@ import "../../styles/index.css";
 import TeamDisplay from "../../components/TeamDisplayLeft.astro";
 import Layout from "../../layouts/layout.astro";
 import ProjectCard from "../../components/ProjectCard.astro";
-import TeamCard from "../../components/projects page/projects_team_card.astro";
+import TeamCard from "../../components/projectspage/projects_team_card.astro";
 import Carousel from "../../components/carousel.astro";
-import Container from "../../components/projects page/projects_team_container.astro";
+import Container from "../../components/projectspage/projects_team_container.astro";
 ---
 
 <html lang="en">

src/pages/projects/team4.astro

@@ -5,9 +5,9 @@ import "../../styles/index.css";
 import TeamDisplay from "../../components/TeamDisplayLeft.astro";
 import Layout from "../../layouts/layout.astro";
 import ProjectCard from "../../components/ProjectCard.astro";
-import TeamCard from "../../components/projects page/projects_team_card.astro";
+import TeamCard from "../../components/projectspage/projects_team_card.astro";
 import Carousel from "../../components/carousel.astro";
-import Container from "../../components/projects page/projects_team_container.astro";
+import Container from "../../components/projectspage/projects_team_container.astro";
 ---
 
 <html lang="en">

src/scripts/serveHomepageDescriptions.ts

@@ -11,6 +11,6 @@ export async function fetchHomepageDescriptions(): Promise<any[]> {
         return descriptions;
     } catch (error) {
         console.error("Error fetching homepage descriptions:", error);
-        return []; // Return an empty array on error
+        return [];
     } 
 }

src/scripts/serveProjects.ts

@@ -1,50 +1,45 @@
-import { prisma } from "../lib/prisma"
-// Define the CarouselItem type
-type CarouselItem = {
-  heading: string;
-  subheadings: string[];
-  paragraphs: string[];
-  images: string[];
-};
-
-export async function serveProjects(): Promise<{ projects: any[], carouselList: CarouselItem[] }> {
+import { prisma } from "../lib/prisma";
+
+
+
+export async function serveProjects(): Promise<{ projects: any[], carouselList: any[] }> {
   try {
-    // Fetch the projects from the Prisma database
     const projects = await prisma.project.findMany({
       include: {
-        tags: true, // Include tags related to the project
+        tags: true, 
       },
     });
 
-    // Initialize the carousel list with the defined type
-    const carouselList: CarouselItem[] = [];
+    const carouselProjects: any[] = [];
 
-    // Filter projects that contain "carousel content" in the title
     const nonCarouselProjects = projects.filter((project: typeof projects[0]) => {
-      if (project.title.toLowerCase().includes("carousel content")) {
-        // Extract carousel-related content
-        const { description, cover } = project;
-
-        const subheadings = description ? [description] : [];
-        const paragraphs = [description]; // For simplicity, using description as a placeholder
-        const images = cover ? [cover] : []; // Assuming cover is used as an image
-
-        carouselList.push({
-          heading: project.title,
-          subheadings,
-          paragraphs,
-          images,
+      const title = project.title.toLowerCase();
+
+      if (title.includes("carousel content")) { 
+        const numberMatch = title.match(/carousel content #(\d+)/);
+        const carouselNumber = numberMatch ? parseInt(numberMatch[1], 10) : 0;
+        const heading = project.title.replace(/\(carousel content\)/i, '').trim();
+        carouselProjects.push({
+          ...project,
+          title: heading, 
+          carouselNumber  
         });
 
-        return false; 
+        return false;
       }
 
       return true; 
     });
 
-    return { projects: nonCarouselProjects, carouselList };
+
+    const sortedCarouselProjects = carouselProjects.sort((a, b) => a.carouselNumber - b.carouselNumber);
+
+    return { 
+      projects: nonCarouselProjects, 
+      carouselList: sortedCarouselProjects
+    };
   } catch (error) {
     console.error("Error fetching projects and carousel list:", error);
     throw error;
-  } 
+  }
 }