semesters based on start and grad year populate

package.json

@@ -13,7 +13,8 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.4",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.css

@@ -1,16 +1,16 @@
 #root {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
-  padding: 2rem;
+  /* padding: 2rem; */
   text-align: center;
 }
 
-.logo {
+/* .logo {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
   transition: filter 300ms;
-}
+} */
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
 }
@@ -40,3 +40,21 @@
 .read-the-docs {
   color: #888;
 }
+
+.semester-layout {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
+.semester-title {
+  color: var(--Primary-Text, #000);
+/* Web UI/Heading/Heading Large */
+font-family: "Inter Variable";
+font-size: 28px;
+font-style: normal;
+font-weight: 580;
+line-height: 36px; /* 128.571% */
+letter-spacing: -0.28px;
+text-align: left;
+margin-left: 32px;
+}

src/App.tsx

@@ -1,15 +1,19 @@
 import React, { useState } from 'react';
 import "./App.css";
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import SetUpPage from "./components/SetUpPage"
-import SemesterBlock from "./components/SemesterBlock"
+import SemesterHome from './SemesterHome';
+// import SemesterBlock from "./components/SemesterBlock"
 
 function App() {
   const [selectedYear, setSelectedYear] = useState<number | null>(null);
   return (
-    <>
-      {/* <SetUpPage></SetUpPage> */}
-      <SemesterBlock selectedYear={2021}></SemesterBlock>
-    </>
+    <Router>
+      <Routes>
+        <Route path="/" element={<SetUpPage />} />
+        <Route path="/next" element={<SemesterHome />} />
+      </Routes>
+    </Router>
   );
 }
 

src/SemesterHome.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import SemesterBlock from "./components/SemesterBlock"
+import { Flex } from '@radix-ui/themes';
+import "./App.css"
+
+
+function SemesterHome() {
+  const location = useLocation();
+  const { startYear, gradYear, summerCheck } = location.state || {};
+
+  const numStartYear = parseInt(startYear, 10);
+  const numGradYear = parseInt(gradYear, 10);
+  const yearCount = numGradYear - numStartYear + 1;
+  const years = Array.from(
+    { length: yearCount }, 
+    (_, i) => numStartYear + i
+  );
+
+  return (
+    <Flex direction="column" gap="32px">
+      <h3 className='semester-title'>Semesters</h3>
+      <Flex direction="row" gap="12px" className='semester-layout'>
+        {/* <SemesterBlock selectedYear={startYear}></SemesterBlock>
+        <SemesterBlock selectedYear={gradYear}></SemesterBlock> */}
+        <SemesterBlock selectedSemester={"Miscellaneous"} selectedYear={""}></SemesterBlock>
+        {years.map((year) => (
+            <Flex key={year} className="year-element" direction="row" gap="12px">
+              {/* Replace with the element you want to render */}
+              <SemesterBlock selectedSemester={"Fall"} selectedYear={year}></SemesterBlock>
+              <SemesterBlock selectedSemester={"Spring"} selectedYear={year}></SemesterBlock>
+              {summerCheck &&
+                <SemesterBlock selectedSemester={"Summer"} selectedYear={year}></SemesterBlock>
+              }
+            </Flex>
+          ))}
+      </Flex>
+    </Flex>
+  );
+}
+
+export default SemesterHome;

src/components/AddClass/AddClass.tsx

@@ -0,0 +1,94 @@
+import "./addclass.css"
+import { Text, Button } from "@radix-ui/themes";
+import React, { useState } from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { DotsHorizontalIcon } from '@radix-ui/react-icons';
+import * as Dialog from '@radix-ui/react-dialog';
+import classesData from './../classes.json';
+import SearchBar from "./SearchBar";
+
+
+interface AddClassProps  {
+    // name: string;
+    // onEdit: () => void;
+    // onDelete: (name: string) => void;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    addClass: (cls: ClassType) => void;
+};
+
+type ClassType = {
+    id: number;
+    name: string;
+    units: number;
+  };
+
+
+function AddClass({ isOpen, setIsOpen, addClass }: AddClassProps) {
+    const [showMenu, setShowMenu] = useState(false);
+
+    const [searchTerm, setSearchTerm] = useState('');
+    const [filteredClasses, setFilteredClasses] = useState<ClassType[]>([]);
+    const [units, setUnits] = useState<number | null>(null);
+
+    const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const term = event.target.value;
+        setSearchTerm(term);
+        const filtered = classesData.filter((cls) =>
+          cls.name.toLowerCase().includes(term.toLowerCase())
+        );
+        setFilteredClasses(filtered);
+      };
+
+      const handleSelectClass = (cls: ClassType) => {
+        addClass(cls); // Update parent state
+        setFilteredClasses([]); // Hide suggestions
+        setSearchTerm(''); // Clear search field
+        setIsOpen(false); // Close dialog after selection
+      };
+
+    return (
+        <div  
+        // onMouseEnter={() => setShowMenu(true)} 
+        // onMouseLeave={() => setShowMenu(false)}
+        >
+            {showMenu && 
+                <DropdownMenu.Root>
+                    <DropdownMenu.Trigger asChild>
+                    <Button className="dropDownBtn">
+                        <DotsHorizontalIcon className="" />
+                    </Button>
+                    </DropdownMenu.Trigger>
+
+                    {/* Dropdown Menu Content */}
+                    <DropdownMenu.Content
+                    className="bg-white shadow-lg rounded-md p-1 border border-gray-200"
+                    sideOffset={5}
+                    align="end"
+                    >
+                    <DropdownMenu.Item
+                        className="px-4 py-2 cursor-pointer hover:bg-gray-100 rounded"
+                        // onClick={onEdit}
+                    >
+                        Edit Course Details
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item
+                        className="px-4 py-2 cursor-pointer hover:bg-gray-100 rounded"
+                        // onClick={() => onDelete(name)}
+                    >
+                        Delete Class
+                    </DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                </DropdownMenu.Root>
+            }
+
+            <SearchBar isOpen={isOpen} setIsOpen={setIsOpen} searchTerm={searchTerm} 
+            handleSearch={handleSearch} filteredClasses={filteredClasses}
+            handleSelectClass={handleSelectClass}></SearchBar>
+
+
+        </div>
+    )
+}
+
+export default AddClass;

src/components/AddClass/SearchBar.tsx

@@ -0,0 +1,51 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import "./addclass.css"
+
+interface SearchBarProps  {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    searchTerm: string;
+    handleSearch: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    filteredClasses: ClassType[];
+    handleSelectClass: (cls: ClassType) => void;
+
+};
+
+type ClassType = {
+    id: number;
+    name: string;
+    units: number;
+  };
+
+function SearchBar({isOpen, setIsOpen, searchTerm, handleSearch, filteredClasses, handleSelectClass}: SearchBarProps) {
+    return (
+        <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+                        <Dialog.Content className="searchContent">
+                            <input
+                                type="text"
+                                value={searchTerm}
+                                onChange={handleSearch}
+                                placeholder="Type a class ID / name..."
+                                className="searchBar"
+                            />
+
+                            {/* Dropdown for suggestions */}
+                            {filteredClasses.length > 0 && (
+                                <ul className="suggestion-list">
+                                {filteredClasses.map((cls) => (
+                                    <li
+                                    key={cls.id}
+                                    onClick={() => handleSelectClass(cls)}
+                                    className="suggestion-item"
+                                    >
+                                    {cls.name} - {cls.units} units
+                                    </li>
+                                ))}
+                                </ul>
+                            )}
+                        </Dialog.Content>
+            </Dialog.Root>
+    )
+}
+
+export default SearchBar;