started setup page and semester blocks

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

src/App.tsx

@@ -1,33 +1,14 @@
-import { useState } from "react";
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
+import React, { useState } from 'react';
 import "./App.css";
+import SetUpPage from "./components/SetUpPage"
+import SemesterBlock from "./components/SemesterBlock"
 
 function App() {
-  const [count, setCount] = useState(0);
-
+  const [selectedYear, setSelectedYear] = useState<number | null>(null);
   return (
     <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      {/* <SetUpPage></SetUpPage> */}
+      <SemesterBlock selectedYear={2021}></SemesterBlock>
     </>
   );
 }

src/components/SemesterBlock/index.tsx

@@ -0,0 +1,35 @@
+import { Box } from "@radix-ui/themes";
+import React, { useState } from 'react';
+import {  Button } from "@radix-ui/themes";
+import "./semesterblock.css"
+
+interface SemesterYearProps  {
+    selectedYear: number | string;
+  };
+
+function SemesterBlock({ selectedYear }: SemesterYearProps) {
+    const [classList, setClassList] = useState<string[]>([]);
+
+  const handleAddClass = () => {
+    setClassList([...classList, `Class ${classList.length + 1}`]);
+  };
+    return (
+    <div className="container">
+      <h2 className="title">Fall {selectedYear} <p className="counter">{classList.length}</p></h2>
+
+      <div className="class-list">
+        {classList.map((className, index) => (
+          <div key={index} className="class-item">
+            {className}
+          </div>
+        ))}
+      </div>
+
+      <Button onClick={handleAddClass} className="add-button">
+        + Add Class
+      </Button>
+    </div>
+    )
+}
+
+export default SemesterBlock;

src/components/SemesterBlock/semesterblock.css

@@ -0,0 +1,24 @@
+@media (max-width: 600px) {
+    .container {
+        width: 100%; 
+    }
+}
+
+body {
+    background-color: white;
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background-color: #F8F8F8;
+    border-radius: 8px;
+    width: 300px;
+    margin: 20px auto;
+  }
+
+  .counter {
+    background-color: #E7E7E7;
+  }

src/components/SetUpPage/index.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import "@radix-ui/themes/styles.css";
+import "./setup.css"
+import { Flex, Text, Button, Checkbox } from "@radix-ui/themes";
+import YearDropdown from "./year-dropdown";
+
+
+function SetUpPage() {
+
+  return (
+    <Flex className="container" direction="column" gap="0" width="100%" align="center">
+			<Text className="setup">Set Up</Text>
+      <Text className="enteryear">Enter your start year and graduation year</Text>
+
+      <Flex className= "yearContainer" direction="row" gap="16px" align="center">
+        <Flex direction="column">
+          <Text>Start Year</Text>
+          <YearDropdown></YearDropdown>
+        </Flex>
+
+        <Flex direction="column">
+          <Text>Graduation Year</Text>
+          <YearDropdown></YearDropdown>
+        </Flex>
+      </Flex>
+
+
+      <Text as="label" size="2">
+        <Flex gap="2">
+          <Checkbox defaultChecked />
+          Include Summer Semesters?
+        </Flex>
+      </Text>
+			<Button>Next</Button>
+		</Flex>
+  );
+}
+
+export default SetUpPage;

src/components/SetUpPage/setup.css

@@ -0,0 +1,58 @@
+.container {
+    width: 500px;
+    flex-direction: column;
+    gap: var(--L, 32px);
+}
+@media (max-width: 600px) {
+    .container {
+        width: 100%; 
+    }
+}
+
+body {
+    background-color: white;
+}
+
+.setup {
+    color: var(--Primary-Text, #000);
+    /* Web UI/Heading/Heading Medium */
+    font-family: "Inter Variable";
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 120% */
+    letter-spacing: -0.2px;
+}
+
+.enteryear {
+    color: var(--Secondary-Text, #8A8A8A);
+    /* Web UI/Body/Body Medium */
+    font-family: "Inter Variable";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    letter-spacing: -0.1px;
+}
+
+.gradYearbox {
+    background-color: white;
+    border: 1px solid var(--Gray-2, #C7C7C7);
+    color: black;
+}
+
+.yearOptions {
+    color: black;
+    width: 100%;
+}
+
+.gradOptionsBox {
+    background-color: white;
+    width: 206px;
+}
+
+.yearContainer {
+    justify-content: "space-between";
+    width: 100%;
+    align-items: center;
+}

src/components/SetUpPage/year-dropdown.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import "@radix-ui/themes/styles.css";
+import "./setup.css"
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+
+import YearsData from './years.json';
+
+function YearDropdown() {
+  const [gradYear, setGradYear] = useState<string | null>(null);
+	const { years } = YearsData;
+
+	const handleGradSelect = (year: string) => {
+		setGradYear(year);
+	  };
+
+    return (
+        <DropdownMenu.Root>
+		<DropdownMenu.Trigger className='gradYearbox'>
+		{gradYear ? gradYear : 'Select year'}
+        <ChevronDownIcon />
+		</DropdownMenu.Trigger>
+
+		<DropdownMenu.Portal>
+
+		<DropdownMenu.Content className="gradOptionsBox">
+          {years.map((year) => (
+            <DropdownMenu.Item
+              key={year}
+              onSelect={() => handleGradSelect(year)}
+              className="yearOptions"
+            >
+              {year}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+		</DropdownMenu.Portal>
+	  </DropdownMenu.Root>
+    )
+}
+
+export default YearDropdown;

src/components/SetUpPage/years.json

@@ -0,0 +1,14 @@
+{
+    "years": [
+      "2021",
+      "2022",
+      "2023",
+      "2024",
+      "2025",
+      "2026",
+      "2027",
+      "2028",
+      "2029",
+      "2030"
+    ]
+  }