Add restaurant card and toggle

Author: LedruRomane

src/App.tsx

@@ -3,15 +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 MealOptions from '@app/pages/MealOptions.tsx';
+import RestaurantsOptions from '@app/pages/RestaurantsOptions.tsx';
 
 function App() {
 
   return (
     <ThemeProvider theme={customTheme}>
       <CssBaseline />
       <AppLayout>
-        <MealOptions />
+        <RestaurantsOptions />
       </AppLayout>
     </ThemeProvider>
   )

src/components/UI/RestaurantButton.tsx

@@ -0,0 +1,65 @@
+import { Button, Card, CardActions, CardContent, CardMedia, Typography } from '@mui/material';
+import ToggleSwitch from '@app/components/UI/ToggleSwitch.tsx';
+
+
+interface Props {
+  id: number
+  name: string
+  description: string
+  website: string
+  image: string
+  pickedRestaurantIds: number[]
+  setPickedRestaurantIds: (id: number[]) => void
+}
+
+export function RestaurantCard({
+  id,
+  name,
+  description,
+  website,
+  image,
+  pickedRestaurantIds,
+  setPickedRestaurantIds,
+}: Props) {
+
+  function addRestaurantToPool (id: number) {
+    setPickedRestaurantIds([...pickedRestaurantIds, id]);
+  }
+
+  function removeRestaurantFromPool (id: number) {
+    setPickedRestaurantIds(pickedRestaurantIds.filter(restaurantId => id !== restaurantId));
+  }
+
+  const selected = pickedRestaurantIds.includes(id);
+
+  function toggleRestaurant (value: boolean) {
+    if (value) {
+      addRestaurantToPool(id);
+    } else {
+      removeRestaurantFromPool(id);
+    }
+  }
+
+  return <>
+    <Card sx={{ maxWidth: 345 }}>
+      <CardMedia
+        sx={{ height: 140 }}
+        component="img"
+        image={image}
+        alt={name}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          {name}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {description}
+        </Typography>
+      </CardContent>
+      <CardActions>
+        <ToggleSwitch label="Ajouter au pool de selection" checked={selected} setChecked={toggleRestaurant}></ToggleSwitch>
+        <Button size="small" href={website} target='_blank'>Website</Button>
+      </CardActions>
+    </Card>
+  </>
+}

src/components/UI/RestaurantCard.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { FormGroup, FormControlLabel, Switch, styled } from '@mui/material'
+
+interface Props {
+  label: string
+  checked: boolean
+  setChecked: (value: boolean) => void
+}
+
+export default function ToggleSwitch({
+  label,
+  checked,
+  setChecked,
+}: Props) {
+
+  const handleSwitch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  }
+
+  return (
+    <FormGroup>
+      <LabelStyled
+        control={
+          <Switch className={checked ? 'on' : 'off'} checked={checked} onChange={handleSwitch} />
+        }
+        label={label}
+      />
+    </FormGroup>
+  );
+}
+
+
+const LabelStyled = styled(FormControlLabel)(({ theme }) => ({
+  '.MuiSwitch-root': {
+    height: '55px',
+    borderWidth: '2px',
+    borderColor: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
+    opacity: '1',
+    '&:before, &:after': {
+      content: '""',
+      color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
+      textTransform: 'uppercase',
+      fontSize: '.9rem',
+      fontWeight: '600',
+      position: 'absolute',
+      top: 18,
+    },
+  },
+  '&:has(.on) .MuiSwitch-track:before': {
+    content: '"Off"',
+    left: 20,
+  },
+  '&:has(.off) .MuiSwitch-track:after': {
+    content: '"On"',
+    right: 20,
+  },
+  '.MuiButtonBase-root.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+    opacity: '1',
+    height: '19px',
+    width: '19px',
+  },
+}));

src/components/UI/ToggleSwitch.tsx

@@ -0,0 +1,27 @@
+const data = {
+  "restaurants": [
+    {
+      "id": 1,
+      "name": "Restaurant 1",
+      "description": "Restaurant 1 description",
+      "website": "https://mui.com/material-ui/react-card/",
+      "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg"
+    },
+    {
+      "id": 2,
+      "name": "Restaurant 2",
+      "description": "Restaurant 2 description",
+      "website": "https://mui.com/material-ui/react-card/",
+      "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg"
+    },
+    {
+      "id": 3,
+      "name": "Restaurant 3",
+      "description": "Restaurant 3 description",
+      "website": "https://mui.com/material-ui/react-card/",
+      "image": "https://mui.com/static/images/cards/contemplative-reptile.jpg"
+    }
+  ]
+};
+
+export default data;

src/data/restaurants.ts

@@ -0,0 +1,42 @@
+import { Box, styled } from '@mui/material';
+import { RestaurantCard } from '@app/components/UI/RestaurantCard.tsx';
+import { useState } from 'react';
+import data from  '@app/data/restaurants.ts';
+
+export interface Restaurant {
+  id: number
+  name: string
+  description: string
+  website: string
+  image: string
+}
+
+export default function RestaurantsOptions() {
+  const [pickedRestaurantIds, setPickedRestaurantIds] = useState<number[]>([]);
+
+  const dataRestaurants = data.restaurants;
+
+  console.log(pickedRestaurantIds);
+
+  return <StyledContainer>
+    {dataRestaurants && dataRestaurants.map((restaurant: Restaurant) => {
+        return <RestaurantCard
+          key={restaurant.id}
+          id={restaurant.id}
+          name={restaurant.name}
+          description={restaurant.description}
+          website={restaurant.website}
+          image={restaurant.image}
+          pickedRestaurantIds={pickedRestaurantIds}
+          setPickedRestaurantIds={setPickedRestaurantIds}
+        />
+    })}
+
+  </StyledContainer>
+}
+
+const StyledContainer = styled(Box)(({ theme }) => theme.unstable_sx({
+
+
+}));
+