Skip to content

Commit

Permalink
Resolving merge conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
khankamolk committed Nov 4, 2024
2 parents 552c8c0 + 0d450a7 commit b107e05
Show file tree
Hide file tree
Showing 9 changed files with 228 additions and 3 deletions.
9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@emotion/styled": "^11.13.0",
"@mui/material": "^6.1.4",
"@mui/styled-engine-sc": "^6.1.4",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/themes": "^3.1.4",
"iconoir-react": "^7.9.0",
"react": "^18.3.1",
Expand Down
9 changes: 6 additions & 3 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import React, { useState } from 'react';
import "./App.css";
import Kanban from "./app/Kanban/Kanban"
import SetUpPage from "./components/SetUpPage"
import SemesterBlock from "./components/SemesterBlock"

function App() {

const [selectedYear, setSelectedYear] = useState<number | null>(null);
return (
<>
<Kanban/>
{/* <SetUpPage></SetUpPage> */}
<SemesterBlock selectedYear={2021}></SemesterBlock>
</>
);
}
Expand Down
35 changes: 35 additions & 0 deletions src/components/SemesterBlock/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
24 changes: 24 additions & 0 deletions src/components/SemesterBlock/semesterblock.css
Original file line number Diff line number Diff line change
@@ -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;
}
39 changes: 39 additions & 0 deletions src/components/SetUpPage/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
58 changes: 58 additions & 0 deletions src/components/SetUpPage/setup.css
Original file line number Diff line number Diff line change
@@ -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;
}
42 changes: 42 additions & 0 deletions src/components/SetUpPage/year-dropdown.tsx
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 14 additions & 0 deletions src/components/SetUpPage/years.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"years": [
"2021",
"2022",
"2023",
"2024",
"2025",
"2026",
"2027",
"2028",
"2029",
"2030"
]
}

0 comments on commit b107e05

Please sign in to comment.