From 0d450a72992789e88fc623a642e1e9651c5943e7 Mon Sep 17 00:00:00 2001 From: mahathiryali Date: Sun, 27 Oct 2024 16:29:56 -0700 Subject: [PATCH] started setup page and semester blocks --- package-lock.json | 9 +++ package.json | 1 + src/App.tsx | 31 ++-------- src/components/SemesterBlock/index.tsx | 35 +++++++++++ .../SemesterBlock/semesterblock.css | 24 ++++++++ src/components/SetUpPage/index.tsx | 39 +++++++++++++ src/components/SetUpPage/setup.css | 58 +++++++++++++++++++ src/components/SetUpPage/year-dropdown.tsx | 42 ++++++++++++++ src/components/SetUpPage/years.json | 14 +++++ src/components/set-up-page/set-up.tsx | 0 10 files changed, 228 insertions(+), 25 deletions(-) create mode 100644 src/components/SemesterBlock/index.tsx create mode 100644 src/components/SemesterBlock/semesterblock.css create mode 100644 src/components/SetUpPage/index.tsx create mode 100644 src/components/SetUpPage/setup.css create mode 100644 src/components/SetUpPage/year-dropdown.tsx create mode 100644 src/components/SetUpPage/years.json delete mode 100644 src/components/set-up-page/set-up.tsx diff --git a/package-lock.json b/package-lock.json index 7158117..5df4593 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "gradtrak-fall-2024", "version": "0.0.0", "dependencies": { + "@radix-ui/react-icons": "^1.3.0", "@radix-ui/themes": "^3.1.4", "react": "^18.3.1", "react-dom": "^18.3.1" @@ -1406,6 +1407,14 @@ } } }, + "node_modules/@radix-ui/react-icons": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz", + "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==", + "peerDependencies": { + "react": "^16.x || ^17.x || ^18.x" + } + }, "node_modules/@radix-ui/react-id": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz", diff --git a/package.json b/package.json index b6dc5cc..e144658 100644 --- a/package.json +++ b/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" diff --git a/src/App.tsx b/src/App.tsx index 52ea980..259169d 100644 --- a/src/App.tsx +++ b/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(null); return ( <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

+ {/* */} + ); } diff --git a/src/components/SemesterBlock/index.tsx b/src/components/SemesterBlock/index.tsx new file mode 100644 index 0000000..5cc495a --- /dev/null +++ b/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([]); + + const handleAddClass = () => { + setClassList([...classList, `Class ${classList.length + 1}`]); + }; + return ( +
+

Fall {selectedYear}

{classList.length}

+ +
+ {classList.map((className, index) => ( +
+ {className} +
+ ))} +
+ + +
+ ) +} + +export default SemesterBlock; \ No newline at end of file diff --git a/src/components/SemesterBlock/semesterblock.css b/src/components/SemesterBlock/semesterblock.css new file mode 100644 index 0000000..81b1ac0 --- /dev/null +++ b/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; + } diff --git a/src/components/SetUpPage/index.tsx b/src/components/SetUpPage/index.tsx new file mode 100644 index 0000000..5692cca --- /dev/null +++ b/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 ( + + Set Up + Enter your start year and graduation year + + + + Start Year + + + + + Graduation Year + + + + + + + + + Include Summer Semesters? + + + + + ); +} + +export default SetUpPage; diff --git a/src/components/SetUpPage/setup.css b/src/components/SetUpPage/setup.css new file mode 100644 index 0000000..58524e0 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/SetUpPage/year-dropdown.tsx b/src/components/SetUpPage/year-dropdown.tsx new file mode 100644 index 0000000..055cf5c --- /dev/null +++ b/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(null); + const { years } = YearsData; + + const handleGradSelect = (year: string) => { + setGradYear(year); + }; + + return ( + + + {gradYear ? gradYear : 'Select year'} + + + + + + + {years.map((year) => ( + handleGradSelect(year)} + className="yearOptions" + > + {year} + + ))} + + + + ) +} + +export default YearDropdown; \ No newline at end of file diff --git a/src/components/SetUpPage/years.json b/src/components/SetUpPage/years.json new file mode 100644 index 0000000..f61b26e --- /dev/null +++ b/src/components/SetUpPage/years.json @@ -0,0 +1,14 @@ +{ + "years": [ + "2021", + "2022", + "2023", + "2024", + "2025", + "2026", + "2027", + "2028", + "2029", + "2030" + ] + } \ No newline at end of file diff --git a/src/components/set-up-page/set-up.tsx b/src/components/set-up-page/set-up.tsx deleted file mode 100644 index e69de29..0000000