-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
3,020 additions
and
3,007 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,8 @@ | ||
| import React from 'react'; | ||
| import { Routes, Route } from 'react-router-dom'; | ||
| import logo from './assets/logo.svg'; | ||
| import './globals.css'; | ||
| import Routers from './routers/Routers'; | ||
|
|
||
| function App() { | ||
| return ( | ||
| <Routes> | ||
| <Route path="/" element={<HomePage />} /> | ||
| <Route path="/test" element={<div>Test</div>} /> | ||
| </Routes> | ||
| ); | ||
| } | ||
|
|
||
| function HomePage() { | ||
| return ( | ||
| <div className="App"> | ||
| <header className="App-header"> | ||
| <img src={logo} className="App-logo" alt="logo" /> | ||
| <p> | ||
| Edit <code>src/App.js</code> and save to reload. | ||
| </p> | ||
| <a | ||
| className="App-link" | ||
| href="https://reactjs.org" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Learn React | ||
| </a> | ||
| </header> | ||
| </div> | ||
| ); | ||
| return <Routers />; | ||
| } | ||
|
|
||
| export default App; |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import AddIcon from '@mui/icons-material/Add'; | ||
|
|
||
| export default function AddToListButton({ size, onClick }) { | ||
| const sizeButtonClass = { | ||
| small: 'w-[173px] h-[46px]', | ||
| large: 'w-[285px] h-[66px]', | ||
| }; | ||
|
|
||
| const sizeTextClass = { | ||
| small: 'text-[14px]', | ||
| large: 'text-[18px]', | ||
| }; | ||
|
|
||
| const sizeIconClass = { | ||
| small: 'w-[20px] h-[20px]', | ||
| large: 'w-[24px] h-[24px]', | ||
| }; | ||
|
|
||
| return ( | ||
| <button | ||
| type="button" | ||
| className={`${sizeButtonClass[size]} bg-mv-white px-[24px] py-[10px] flex gap-[5px] items-center justify-center rounded-[5px] border border-solid border-mv-green shadow-buttonShadow `} | ||
| onClick={onClick} | ||
| > | ||
| <AddIcon className={`${sizeIconClass[size]} text-mv-black`} /> | ||
| <div | ||
| className={`${sizeTextClass[size]} leading-5 font-medium text-mv-black`} | ||
| > | ||
| Add to list | ||
| </div> | ||
| </button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import React, { useState } from 'react'; | ||
| import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; | ||
|
|
||
| export default function Dropdown({ | ||
| title, | ||
| items, | ||
| onValueChange, | ||
| width, | ||
| height, | ||
| }) { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [selectedValue, setSelectedValue] = useState(title); | ||
|
|
||
| const handleValueChange = (newValue) => { | ||
| setSelectedValue(newValue); | ||
| setIsOpen(false); | ||
| onValueChange(newValue); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-[6px]"> | ||
| <button | ||
| type="button" | ||
| className={`whitespace-nowrap w-[${width}] h-[${height}] py-3 px-5 rounded-[10px] bg-light-grey flex justify-between items-center text-left ${ | ||
| isOpen ? 'shadow-xl' : '' | ||
| }`} | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| > | ||
| <div className="text-mv-black text-[20px] leading-normal font-normal"> | ||
| {selectedValue} | ||
| </div> | ||
| <KeyboardArrowDownIcon className="text-mv-black w-[30px] h-[24px]" /> | ||
| </button> | ||
|
|
||
| {isOpen && ( | ||
| <div | ||
| className={`w-[${width}] h-auto px-[20px] pt-[1px] pb-[21px] bg-mv-white border-light-grey border border-solid rounded-[10px] flex flex-col shadow-xl`} | ||
| > | ||
| {items.map((value) => ( | ||
| <button | ||
| type="button" | ||
| key={value} | ||
| className="whitespace-nowrap text-mv-black text-[20px] leading-normal font-normal text-left mt-[20px]" | ||
| role="menuitem" | ||
| onClick={() => handleValueChange(value)} | ||
| > | ||
| {value} | ||
| </button> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; | ||
|
|
||
| export default function RemoveFromListButton({ size, onClick }) { | ||
| const sizeButtonClass = { | ||
| small: 'w-[173px] h-[46px]', | ||
| large: 'w-[285px] h-[66px]', | ||
| }; | ||
|
|
||
| const sizeTextClass = { | ||
| small: 'text-[14px]', | ||
| large: 'text-[18px]', | ||
| }; | ||
|
|
||
| const sizeIconClass = { | ||
| small: 'w-[20px] h-[20px]', | ||
| large: 'w-[24px] h-[24px]', | ||
| }; | ||
|
|
||
| return ( | ||
| <button | ||
| type="button" | ||
| className={`${sizeButtonClass[size]} whitespace-nowrap bg-mv-white px-[24px] py-[10px] flex gap-[5px] items-center justify-center rounded-[5px] border border-solid border-mv-green shadow-buttonShadow `} | ||
| onClick={onClick} | ||
| > | ||
| <DeleteOutlinedIcon className={`${sizeIconClass[size]} text-mv-black`} /> | ||
| <div | ||
| className={`${sizeTextClass[size]} leading-5 font-medium text-mv-black`} | ||
| > | ||
| Remove from list | ||
| </div> | ||
| </button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
| import logo from '../assets/logo.svg'; | ||
|
|
||
| export default function HomePage() { | ||
| return ( | ||
| <div className="App"> | ||
| <header className="App-header"> | ||
| <img src={logo} className="App-logo" alt="logo" /> | ||
| <p> | ||
| Edit <code>src/App.js</code> and save to reload. | ||
| </p> | ||
| <a | ||
| className="App-link" | ||
| href="https://reactjs.org" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Learn React | ||
| </a> | ||
| </header> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import React from 'react'; | ||
| import { Routes, Route } from 'react-router-dom'; | ||
| import Home from '../pages/HomePage'; | ||
|
|
||
| export default function Routers() { | ||
| return ( | ||
| <div> | ||
| <Routes> | ||
| <Route path="/" element={<Home />} /> | ||
| </Routes> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters