diff --git a/src/App.tsx b/src/App.tsx index 477c186..ea7dfd3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,20 +1,17 @@ import '@assets/app.scss' -import AppLayout from '@app/layouts/AppLayout.tsx'; +import AppLayout from '@app/layouts/app-layout.tsx'; import { ThemeProvider } from '@mui/material/styles'; import { CssBaseline } from '@mui/material'; import { customTheme } from '@app/theme.ts'; -import RestaurantsOptions from '@app/pages/RestaurantsOptions.tsx'; - -function App() { +import OptionsList from '@app/pages/options-list.tsx'; +export default function App() { return ( - + ) } - -export default App diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx deleted file mode 100644 index d8dae48..0000000 --- a/src/components/Footer/Footer.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { styled } from '@mui/material'; - -export default function Footer() { - return - Made with 🌮 at elao - © 2024 - ; -} - -const StyledFooter = styled('footer')(({ theme }) => theme.unstable_sx({ - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - color: theme.palette.common.white, -})); diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx deleted file mode 100644 index df0f343..0000000 --- a/src/components/Header/Header.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { styled } from '@mui/material'; - -export default function Header() { - - return -

- Ça mâche - quoi ? -

- ; -} - -const StyledHeader = styled('header')(({ theme }) => theme.unstable_sx({ - '& h1': { - margin: '60px 0px 130px 130px', - fontSize: '52px', - color: theme.palette.common.white, - fontFamily: 'Poppins', - - '& span': { - position: 'relative', - zIndex: '1', - - '&:last-of-type': { - top: '59px', - right: '65px', - }, - - '&:before': { - content: '""', - position: 'absolute', - top: '30px', - left: '10px', - width: '100%', - height: '33px', - background: theme.palette.secondary.light, - zIndex: '-1', - }, - }, - }, -})); - diff --git a/src/components/UI/Button.tsx b/src/components/UI/Button.tsx new file mode 100644 index 0000000..77e08e7 --- /dev/null +++ b/src/components/UI/Button.tsx @@ -0,0 +1,27 @@ +import { PropsWithChildren } from 'react' +import { styled } from '@mui/material' + +export default function Button({ children }: PropsWithChildren) { + return ( + + {children} + + ) +} + +const Wrapper = styled('button')(({ theme }) => ({ + height: '60px', + padding: `0 ${theme.spacing(2.5)}`, + fontSize: '18px', + color: theme.palette.text.primary, + fontWeight: 'bold', + background: theme.palette.primary.main, + border: 'none', + borderRadius: theme.shape.borderRadius, + cursor: 'pointer', + transition: 'all .2s', + + '&:hover, &:focus': { + background: theme.palette.primary.dark, + }, +})); diff --git a/src/components/UI/Button/ValidateButton.tsx b/src/components/UI/Button/ValidateButton.tsx deleted file mode 100644 index 6dc2eb1..0000000 --- a/src/components/UI/Button/ValidateButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Fab, styled } from '@mui/material' - -const FabStyled = styled(Fab)(({ theme }) => ({ - position: 'fixed', - right: 0, - backgroundColor: theme.palette.primary.main, - '&:hover': { - backgroundColor: theme.palette.primary.light, - }, -})); - -export default function ValidateButton() { - return ( - - Valider - - ) -} diff --git a/src/components/UI/RestaurantCard.tsx b/src/components/UI/RestaurantCard.tsx index e1383ab..51904dc 100644 --- a/src/components/UI/RestaurantCard.tsx +++ b/src/components/UI/RestaurantCard.tsx @@ -1,7 +1,7 @@ -import { Button, Card, CardActions, CardContent, CardMedia, Typography } from '@mui/material'; -import ToggleSwitch from '@app/components/UI/ToggleSwitch.tsx'; - +import { Button, Card, CardActions, CardContent, CardMedia, Typography } from '@mui/material' +import ToggleSwitch from '@app/components/UI/toggle-switch.tsx' +// TODO: Unused component, keep for future version ? interface Props { id: number name: string diff --git a/src/components/UI/food-option.tsx b/src/components/UI/food-option.tsx new file mode 100644 index 0000000..47ba04a --- /dev/null +++ b/src/components/UI/food-option.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import { styled } from '@mui/material' + +type Props = { + id: string + label: string + icon: string + pickedOptions: string[] + setPickedOptions: (options: string[]) => void +} + +export default function FoodOption({ id, label, icon, pickedOptions, setPickedOptions }: Props) { + const checked = pickedOptions.includes(id); + + function handleChange(e: React.ChangeEvent) { + if (e.target.checked) { + setPickedOptions([...pickedOptions, id]); + } else { + setPickedOptions(pickedOptions.filter(option => id !== option)); + } + } + + return <> + + + ; +} + +const Label = styled('label')(({ theme }) => ({ + padding: theme.spacing(1.5), + height: '75px', + display: 'flex', + alignItems: 'center', + gap: '1rem', + fontSize: '1.1rem', + color: theme.palette.text.primary, + background: theme.palette.secondary.main, + border: 'solid 2px', + borderColor: theme.palette.secondary.light, + borderRadius: theme.shape.borderRadius, + cursor: 'pointer', + transition: 'all .2s', + + '&:hover, &:focus': { + borderColor: theme.palette.primary.main, + }, + + 'input:checked, .checked + &': { + background: theme.palette.primary.dark, + borderColor: theme.palette.primary.main, + }, +})); + +const Icon = styled('span')(() => ({ + fontSize: '2rem', +})); + +const Input = styled('input')(() => ({ + display: 'none', +})); diff --git a/src/components/UI/ToggleSwitch.tsx b/src/components/UI/toggle-switch.tsx similarity index 78% rename from src/components/UI/ToggleSwitch.tsx rename to src/components/UI/toggle-switch.tsx index de0d500..326ff51 100644 --- a/src/components/UI/ToggleSwitch.tsx +++ b/src/components/UI/toggle-switch.tsx @@ -18,11 +18,7 @@ export default function ToggleSwitch({ } return ( - + @@ -35,8 +31,9 @@ export default function ToggleSwitch({ const LabelStyled = styled(FormControlLabel)(({ theme }) => ({ - color: theme.palette.secondary.contrastText, + color: theme.palette.text.primary, + '& .MuiSwitch-track': { - backgroundColor: theme.palette.secondary.contrastText, + backgroundColor: theme.palette.text.primary, }, })); diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx new file mode 100644 index 0000000..4b8f37c --- /dev/null +++ b/src/components/footer/footer.tsx @@ -0,0 +1,15 @@ +import { styled } from '@mui/material' + +export default function Footer() { + return + Made with 🌮 at elao - © 2024 + ; +} + +const Wrapper = styled('footer')(({ theme }) => ({ + marginTop: theme.spacing(2), + padding: `${theme.spacing(1)} 0`, + color: theme.palette.text.primary, + textAlign: 'center', + borderTop: 'solid 1px rgba(146, 148, 175, .2)', +})); \ No newline at end of file diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx new file mode 100644 index 0000000..9166d28 --- /dev/null +++ b/src/components/header/header.tsx @@ -0,0 +1,45 @@ +import { styled } from '@mui/material' + +export default function Header() { + return + + <span>Ça mâche</span> + <span>quoi ?</span> + + ; +} + +const Wrapper = styled('header')(() => ({ + padding: '100px 0 80px', + width: '60%', +})); + +const Title = styled('h1')(({ theme }) => ({ + margin: `0 0 0 ${theme.spacing(1)}`, + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + fontSize: '3.25rem', + lineHeight: '1.1', + color: theme.palette.text.primary, + + 'span': { + position: 'relative', + zIndex: '1', + + '&::before': { + height: '2rem', + width: '100%', + position: 'absolute', + bottom: '.2rem', + left: '.5rem', + content: '""', + zIndex: '-1', + background: theme.palette.background.paper, + }, + + '&:last-of-type': { + marginLeft: '13rem', + }, + }, +})); diff --git a/src/data/food-options.ts b/src/data/food-options.ts new file mode 100644 index 0000000..da25011 --- /dev/null +++ b/src/data/food-options.ts @@ -0,0 +1,36 @@ +const data = { + "foodOptions": [ + { + "id": "1", + "label": "Sushi", + "icon": "🍣", + }, + { + "id": "2", + "label": "Salade", + "icon": "🥬", + }, + { + "id": "3", + "label": "Pizza", + "icon": "🍕", + }, + { + "id": "4", + "label": "Burger", + "icon": "🍔", + }, + { + "id": "5", + "label": "Kebab", + "icon": "🥙", + }, + { + "id": "6", + "label": "Formule boulangerie", + "icon": "🥖", + }, + ], +}; + +export default data; diff --git a/src/data/restaurants.ts b/src/data/restaurants.ts deleted file mode 100644 index 6adda7e..0000000 --- a/src/data/restaurants.ts +++ /dev/null @@ -1,24 +0,0 @@ -const data = { - "restaurants": [ - { - "id": 1, - "name": "Restaurant 1", - "website": "https://mui.com/material-ui/react-card/", - "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg", - }, - { - "id": 2, - "name": "Restaurant 2", - "website": "https://mui.com/material-ui/react-card/", - "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg", - }, - { - "id": 3, - "name": "Restaurant 3", - "website": "https://mui.com/material-ui/react-card/", - "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg", - }, - ], -}; - -export default data; diff --git a/src/layouts/AppLayout.tsx b/src/layouts/AppLayout.tsx deleted file mode 100644 index 91f808e..0000000 --- a/src/layouts/AppLayout.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { PropsWithChildren } from 'react'; -import Header from '@app/components/Header/Header.tsx'; -import Footer from '@app/components/Footer/Footer.tsx'; -import { Container, styled } from '@mui/material'; -import background from '@images/background.svg'; - -export default function AppLayout({ children }: PropsWithChildren) { - return -
-
- {children} -
-