Replace restaurants with food options and update components styles

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 (
     <ThemeProvider theme={customTheme}>
       <CssBaseline />
       <AppLayout>
-        <RestaurantsOptions />
+        <OptionsList />
       </AppLayout>
     </ThemeProvider>
   )
 }
-
-export default App

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 (
+    <Wrapper>
+      {children}
+    </Wrapper>
+  )
+}
+
+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,
+  },
+}));

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

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<HTMLInputElement>) {
+    if (e.target.checked) {
+      setPickedOptions([...pickedOptions, id]);
+    } else {
+      setPickedOptions(pickedOptions.filter(option => id !== option));
+    }
+  }
+
+  return <>
+    <Input type="checkbox" id={label} onChange={handleChange} className={checked ? 'checked' : ''} />
+    <Label htmlFor={label} >
+      <Icon>{icon}</Icon>
+      {label}
+    </Label>
+  </>;
+}
+
+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',
+}));

src/components/UI/ToggleSwitch.tsx → src/components/UI/toggle-switch.tsx

@@ -18,11 +18,7 @@ export default function ToggleSwitch({
   }
 
   return (
-    <FormGroup
-      style={{
-        marginBottom: '20px',
-      }}
-    >
+    <FormGroup>
       <LabelStyled
         control={
           <Switch checked={checked} onChange={handleSwitch} />
@@ -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,
   },
 }));

src/components/footer/footer.tsx

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material'
+
+export default function Footer() {
+  return <Wrapper role="contentinfo">
+      Made with 🌮 at elao - © 2024
+  </Wrapper>;
+}
+
+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)',
+}));

src/components/header/header.tsx

@@ -0,0 +1,45 @@
+import { styled } from '@mui/material'
+
+export default function Header() {
+  return <Wrapper>
+    <Title>
+      <span>Ça mâche</span>
+      <span>quoi ?</span>
+    </Title>
+  </Wrapper>;
+}
+
+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',
+    },
+  },
+}));

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;