Change restaurants for food options and replace MUI components

src/App.tsx

@@ -3,18 +3,15 @@ import AppLayout from '@app/layouts/AppLayout.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/Footer/footer.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled'
+
+export default function Footer() {
+  return <Wrapper role="contentinfo">
+      Made with 🌮 at elao - © 2024
+  </Wrapper>;
+}
+
+const Wrapper = styled.footer`
+  padding: 20px 0;
+  color: #fff;
+  text-align: center; 
+  border-top: solid 1px rgba(146, 148, 175, .2);
+`

src/components/Header/header.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled'
+
+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`
+  margin: 0 0 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  font-size: 3.25rem;
+  line-height: 1.1; 
+  color: #fff;  
+    
+  span {
+    position: relative;
+    z-index: 1;
+      
+    &::before {
+      height: 2rem;
+      width: 100%;
+      position: absolute;
+      bottom: .2rem;
+      left: .5rem;
+      content: '';
+      z-index: -1;
+      background: #0460FC;
+    }
+    
+    &:last-of-type {
+      margin-left: 210px;
+    },
+  }
+`

src/components/UI/Button.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react'
+import styled from '@emotion/styled'
+
+export default function Button({ children }: PropsWithChildren) {
+  return (
+    <Wrapper>
+      {children}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.button`
+  height: 60px;
+  padding: 0 55px;
+  font-size: 18px;
+  color: #fff;
+  font-weight: bold;
+  background: #0460FC;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all .2s;
+    
+  &:hover,
+  &:focus {
+    background: #0052dd;
+  }
+`

src/components/UI/food-option.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import styled from '@emotion/styled'
+
+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`
+  padding: 30px;
+  height: 75px;
+  display: flex;
+  align-items: center;
+  gap: 1rem; 
+  font-size: 1.1rem;
+  color: #fff;
+  background: #12122d;
+  border: solid 2px #20203f;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all .2s;
+    
+  &:hover,
+  &:focus {
+    border-color: #0460fc; 
+  } 
+    
+  input:checked, .checked + & {
+    background: #143374;
+    border-color: #0460fc;
+  }
+`
+
+const Icon = styled.span`
+  font-size: 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} />

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;

src/layouts/AppLayout.tsx

@@ -1,31 +1,29 @@
 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';
+import styled from '@emotion/styled';
 
 export default function AppLayout({ children }: PropsWithChildren) {
-  return <StyledContainer>
+  return <Container>
     <Header />
-    <main>
+    <Main>
       {children}
-    </main>
+    </Main>
     <Footer />
-  </StyledContainer>;
+  </Container>;
 }
 
+const Container = styled.div`
+  padding: 0 85px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  max-height: 100vh;
+  min-width: 100vw; 
+  background: #161a3d url(${background}) no-repeat right bottom;
+`
 
-const StyledContainer = styled(Container)(({ theme }) => theme.unstable_sx({
-  display: 'flex',
-  flexDirection: 'column',
-  minHeight: '100vh',
-  minWidth: '100vw',
-  main: {
-    flex: 1,
-  },
-  backgroundImage: `url(${background})`,
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'right bottom',
-  backgroundSize: 'auto 100%',
-  backgroundColor: theme.palette.secondary.main,
-}))
+const Main = styled.main`
+  flex: 1;
+`

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from '@app/App.tsx'
-import '@assets/app.scss';
+import '@assets/app.scss'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>