initial commit

components/BackgroundWrapper.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const BackgroundWrapper = ({ children }) => {
+  return (
+    <div
+      className="min-h-screen bg-cover bg-center bg-no-repeat relative"
+      style={{
+        backgroundImage: "url('/images/static/paper-background.png')",
+      }}
+    >
+      <div
+        className="min-h-screen"
+        style={{
+          backgroundColor: "rgba(0, 0, 0, 0)", // Optional overlay - adjust opacity as needed
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default BackgroundWrapper;

components/DestructibleAlert.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+const DestructibleAlert = ({
+  text,
+  extraStyles = "",
+}: {
+  text: string;
+  extraStyles?: string;
+}) => {
+  return (
+    <div
+      className={`border bg-red-200 border-blue-200 rounded-3xl py-6 ${extraStyles}`}
+      style={{
+        borderWidth: 1,
+        backgroundColor: "#fecaca",
+        borderColor: "#c0dafc",
+        paddingTop: 24,
+        paddingBottom: 24,
+      }}
+    >
+      <p
+        className="text-center text-red-800"
+        style={{
+          fontSize: 17,
+          lineHeight: "28px",
+          fontFamily: "Montserrat, sans-serif",
+          fontWeight: "bold",
+          textAlign: "center",
+          color: "#991b1b",
+        }}
+      >
+        {text}
+      </p>
+    </div>
+  );
+};
+
+export default DestructibleAlert;

components/FormField.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+
+const FormField = ({
+  title,
+  placeholder,
+  value,
+  handleChangeText,
+  ...props
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const isPasswordField = title === "Password" || title === "Confirm Password";
+
+  return (
+    <div className="w-full">
+      <label
+        className="block mb-2"
+        style={{
+          color: "#666666",
+          fontFamily: "Montserrat, sans-serif",
+          fontWeight: "500",
+          fontSize: 18,
+          marginBottom: 8,
+          letterSpacing: "-0.5px",
+        }}
+      >
+        {title}
+      </label>
+
+      <div
+        className="h-16 px-4 bg-blue-200 rounded-3xl flex items-center justify-between"
+        style={{
+          height: 64,
+          paddingLeft: 16,
+          paddingRight: 16,
+          backgroundColor: "#D2DFF0",
+          borderRadius: 20,
+        }}
+      >
+        <input
+          type={isPasswordField && !showPassword ? "password" : "text"}
+          value={value}
+          placeholder={placeholder}
+          onChange={(e) => handleChangeText(e.target.value)}
+          className="flex-1 bg-transparent outline-none border-none text-blue-950"
+          style={{
+            color: "#0D47A1",
+            fontSize: 16,
+            fontFamily: "inherit",
+            backgroundColor: "transparent",
+            border: "none",
+            outline: "none",
+          }}
+          {...props}
+        />
+
+        {isPasswordField && (
+          <button
+            type="button"
+            onClick={() => setShowPassword(!showPassword)}
+            className="ml-2 text-gray-600 hover:text-gray-800 focus:outline-none"
+            style={{
+              fontFamily: "Montserrat, sans-serif",
+              fontWeight: "500",
+              fontSize: 16,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 0,
+            }}
+          >
+            {showPassword ? "Hide" : "Show"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default FormField;

components/Header.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { ChevronLeft, Layers } from "lucide-react";
+import { useTimer } from "@/context/TimerContext";
+import styles from "@/css/Header.module.css";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000/api";
+
+// You'll need to implement getToken for Next.js - could use cookies, localStorage, etc.
+const getToken = async () => {
+  // Replace with your token retrieval logic
+  if (typeof window !== "undefined") {
+    return localStorage.getItem("token") || sessionStorage.getItem("token");
+  }
+  return null;
+};
+
+const Header = ({
+  image,
+  displayUser,
+  displaySubject,
+  displayTabTitle,
+  examDuration,
+}) => {
+  const router = useRouter();
+  const [totalSeconds, setTotalSeconds] = useState(
+    examDuration ? parseInt(examDuration) * 60 : 0
+  );
+  const { timeRemaining, stopTimer } = useTimer();
+  const [userData, setUserData] = useState(null);
+
+  useEffect(() => {
+    if (!examDuration) return;
+
+    const timer = setInterval(() => {
+      setTotalSeconds((prev) => {
+        if (prev <= 0) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [examDuration]);
+
+  useEffect(() => {
+    async function fetchUser() {
+      try {
+        const token = await getToken();
+        if (!token) return;
+
+        const response = await fetch(`${API_URL}/me`, {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (response.ok) {
+          const fetchedUserData = await response.json();
+          setUserData(fetchedUserData);
+        }
+      } catch (error) {
+        console.error("Error fetching user data:", error);
+      }
+    }
+
+    if (displayUser) {
+      fetchUser();
+    }
+  }, [displayUser]);
+
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const showExitDialog = () => {
+    const confirmed = window.confirm("Are you sure you want to quit the exam?");
+
+    if (confirmed) {
+      if (stopTimer) {
+        stopTimer();
+      }
+      router.push("/unit");
+    }
+  };
+
+  const handleBackClick = () => {
+    router.back();
+  };
+
+  return (
+    <header className={styles.header}>
+      {displayUser && (
+        <div className={styles.profile}>
+          {image && (
+            <Image
+              src={image}
+              alt="Profile"
+              width={40}
+              height={40}
+              className={styles.profileImg}
+            />
+          )}
+          <span className={styles.text}>
+            Hello {userData?.name ? userData.name.split(" ")[0] : ""}
+          </span>
+        </div>
+      )}
+
+      {displaySubject && (
+        <div className={styles.profile}>
+          <button onClick={handleBackClick} className={styles.iconButton}>
+            <ChevronLeft size={24} color="white" />
+          </button>
+          <span className={styles.text}>{displaySubject}</span>
+        </div>
+      )}
+
+      {displayTabTitle && (
+        <div className={styles.profile}>
+          <span className={styles.text}>{displayTabTitle}</span>
+        </div>
+      )}
+
+      {examDuration && (
+        <div className={styles.examHeader}>
+          <button onClick={showExitDialog} className={styles.iconButton}>
+            <ChevronLeft size={30} color="white" />
+          </button>
+
+          <div className={styles.timer}>
+            <div className={styles.timeUnit}>
+              <span className={styles.timeValue}>
+                {String(hours).padStart(2, "0")}
+              </span>
+              <span className={styles.timeLabel}>Hrs</span>
+            </div>
+            <div className={styles.timeUnit}>
+              <span className={styles.timeValue}>
+                {String(minutes).padStart(2, "0")}
+              </span>
+              <span className={styles.timeLabel}>Mins</span>
+            </div>
+            <div className={styles.timeUnit}>
+              <span className={styles.timeValue}>
+                {String(seconds).padStart(2, "0")}
+              </span>
+              <span className={styles.timeLabel}>Secs</span>
+            </div>
+          </div>
+
+          <button
+            disabled
+            onClick={() => router.push("/exam/modal")}
+            className={`${styles.iconButton} ${styles.disabled}`}
+          >
+            <Layers size={30} color="white" />
+          </button>
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default Header;

components/SlidingGallery.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useRef, useEffect } from "react";
+import Link from "next/link";
+import Image from "next/image";
+import styles from "../css/SlidingGallery.module.css";
+
+const views = [
+  {
+    id: "1",
+    content: (
+      <Link
+        href="https://www.facebook.com/share/g/15jdqESvWV/?mibextid=wwXIfr"
+        className={styles.link}
+      >
+        <div className={styles.facebook}>
+          <div className={styles.textView}>
+            <h3 className={styles.facebookOne}>Meet, Share, and Learn!</h3>
+            <p className={styles.facebookTwo}>Join Facebook Community</p>
+          </div>
+          <div className={styles.logoView}>
+            <Image
+              src="/images/static/facebook-logo.png"
+              alt="Facebook Logo"
+              width={120}
+              height={120}
+            />
+          </div>
+        </div>
+      </Link>
+    ),
+  },
+];
+
+const SlidingGallery = () => {
+  const [activeIdx, setActiveIdx] = useState(0);
+  const scrollRef = useRef(null);
+
+  const handleScroll = (event) => {
+    const scrollLeft = event.target.scrollLeft;
+    const slideWidth = event.target.clientWidth;
+    const index = Math.round(scrollLeft / slideWidth);
+    setActiveIdx(index);
+  };
+
+  return (
+    <div className={styles.gallery}>
+      <div
+        className={styles.scrollContainer}
+        ref={scrollRef}
+        onScroll={handleScroll}
+      >
+        {views.map((item) => (
+          <div key={item.id} className={styles.slide}>
+            {item.content}
+          </div>
+        ))}
+      </div>
+      <div className={styles.pagination}>
+        {views.map((_, index) => (
+          <div
+            key={index}
+            className={`${styles.dot} ${
+              activeIdx === index ? styles.activeDot : styles.inactiveDot
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SlidingGallery;