Add basic button component and generic dropdown component

frontend/.eslintrc.json

@@ -10,5 +10,8 @@
 		"sourceType": "module"
 	},
 	"plugins": ["react"],
-	"rules": {}
+	"rules": {
+		"react/prop-types": "off"
+	},
+	"ignorePatterns": ["build/", "node_modules/"]
 }

frontend/package.json

@@ -3,26 +3,27 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
-		"@emotion/react": "^11.11.1",
+		"@emotion/react": "^11.11.3",
 		"@emotion/styled": "^11.11.0",
-		"@mui/icons-material": "^5.14.19",
-		"@mui/material": "^5.14.20",
+		"@mui/icons-material": "^5.15.2",
+		"@mui/material": "^5.15.2",
 		"@reduxjs/toolkit": "^1.9.7",
 		"@tailwindcss/line-clamp": "^0.4.4",
 		"@testing-library/jest-dom": "^5.17.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^13.5.0",
-		"axios": "^1.6.2",
+		"axios": "^1.6.3",
 		"jwt-decode": "^4.0.0",
 		"lodash": "^4.17.21",
 		"postcss-cli": "^10.1.0",
+		"prop-types": "^15.8.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-helmet": "^6.1.0",
 		"react-icons": "^4.12.0",
 		"react-redux": "^8.1.3",
 		"react-router": "^6.19.0",
-		"react-router-dom": "^6.19.0",
+		"react-router-dom": "^6.21.1",
 		"react-scripts": "5.0.1",
 		"redux": "^4.2.1",
 		"redux-thunk": "^2.4.2",
@@ -57,16 +58,16 @@
 	},
 	"devDependencies": {
 		"autoprefixer": "^10.4.16",
-		"eslint": "^8.54.0",
+		"eslint": "^8.56.0",
 		"eslint-config-airbnb": "^19.0.4",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-import": "^2.29.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-import": "^2.29.1",
 		"eslint-plugin-jsx-a11y": "^6.8.0",
 		"eslint-plugin-react": "^7.33.2",
 		"eslint-plugin-react-hooks": "^4.6.0",
-		"postcss": "^8.4.31",
+		"postcss": "^8.4.32",
 		"prettier": "3.1.0",
-		"prettier-plugin-tailwindcss": "^0.5.7",
-		"tailwindcss": "^3.3.5"
+		"prettier-plugin-tailwindcss": "^0.5.10",
+		"tailwindcss": "^3.4.0"
 	}
 }

frontend/src/App.jsx

@@ -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;

frontend/src/components/AddToListButton.jsx

@@ -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>
+	);
+}

frontend/src/components/Dropdown.jsx

@@ -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>
+	);
+}

frontend/src/components/RemoveFromListButton.jsx

@@ -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>
+	);
+}

frontend/src/pages/HomePage.jsx

@@ -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>
+	);
+}

frontend/src/routers/Routers.jsx

@@ -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>
+	);
+}

frontend/tailwind.config.js

@@ -16,6 +16,9 @@ module.exports = {
 			fontFamily: {
 				sans: ['Poppins', 'sans-serif'],
 			},
+			boxShadow: {
+				buttonShadow: '0px 4px 16px 0px rgba(22, 22, 22, 0.10)',
+			},
 		},
 	},
 	plugins: [],