reworks the menu

app/components/templates/menu-page/menu-page.component.tsx

@@ -1,7 +1,12 @@
-import {FC} from 'react';
+import React, {FC, Fragment, ReactElement, useState} from 'react';
 
+import menuPageOne from './img/menu-page-1.svg';
+import menuPageTwo from './img/menu-page-2.svg';
 import {
+  CollapsibleTrigger,
   CollectionSection,
+  CollapsibleContent,
+  Img,
   List,
   ListItem,
   MenuPageContainer,
@@ -38,29 +43,76 @@ interface ProductProps {
   priceRange: MenuProductPriceRange;
 }
 
+interface CollapsibleProps {
+  trigger: (isContentOpen: boolean) => ReactElement;
+  children: ReactElement;
+}
+
 export const MenuPage: FC<Props> = ({collections}) => (
   <MenuPageContainer>
-    {collections.map((collection) => (
-      <CollectionSection key={collection.id}>
-        <Subtitle>{collection.title}</Subtitle>
-        <List>
-          {collection.products
-            .sort((a, b) => a.title.localeCompare(b.title))
-            .map((product) => (
-              <ProductItem
-                key={product.id}
-                title={product.title}
-                src={product.src}
-                priceRange={product.priceRange}
-              />
-            ))}
-        </List>
-      </CollectionSection>
-    ))}
+    <Subtitle>El menú</Subtitle>
+
+    <Paragraph>
+      Las bebidas de temporada no se incluyen, ¡pregunta por ellas en barra!.
+      Convierte cualquier bebida en fría por $10 pesos más.
+    </Paragraph>
+
+    <Img src={menuPageOne} alt="Imagen del menu, pagina 1" />
+
+    <Divider />
+
+    <Img src={menuPageTwo} alt="Imagen del menu, pagina 2" />
+
     <Divider />
+
+    <Collapsible
+      trigger={(isContentOpen) => (
+        <Paragraph noMargin>
+          {isContentOpen ? 'Ocultar' : 'Ver'} menú completo
+        </Paragraph>
+      )}
+    >
+      <Fragment>
+        {collections.map((collection) => (
+          <CollectionSection key={collection.id}>
+            <Subtitle>{collection.title}</Subtitle>
+            <List>
+              {collection.products
+                .sort((a, b) => a.title.localeCompare(b.title))
+                .map((product) => (
+                  <ProductItem
+                    key={product.id}
+                    title={product.title}
+                    src={product.src}
+                    priceRange={product.priceRange}
+                  />
+                ))}
+            </List>
+          </CollectionSection>
+        ))}
+        <Divider />
+      </Fragment>
+    </Collapsible>
   </MenuPageContainer>
 );
 
+const Collapsible: FC<CollapsibleProps> = ({children, trigger}) => {
+  const [isContentOpen, setIsContentOpen] = useState(false);
+
+  return (
+    <Fragment>
+      <CollapsibleTrigger
+        type="button"
+        onClick={() => setIsContentOpen(!isContentOpen)}
+      >
+        {trigger(isContentOpen)}
+      </CollapsibleTrigger>
+
+      <CollapsibleContent isOpen={isContentOpen}>{children}</CollapsibleContent>
+    </Fragment>
+  );
+};
+
 const ProductItem: FC<ProductProps> = ({title, priceRange}) => {
   const {
     minVariantPrice: {amount: minPrice},

app/components/templates/menu-page/menu-page.styles.tsx

@@ -1,5 +1,7 @@
 import styled from '@emotion/styled';
 
+import theme from '~/theme';
+
 export const MenuPageContainer = styled.main`
   display: flex;
   flex-direction: column;
@@ -25,3 +27,29 @@ export const ListItem = styled.li`
   margin: 0.75em 0;
   gap: 1rem;
 `;
+
+export const Img = styled.img`
+  width: 100%;
+`;
+
+export const CollapsibleTrigger = styled.button`
+  border: 2px solid ${theme.colors.black};
+  cursor: pointer;
+  padding: 1em;
+  width: fit-content;
+  text-align: left;
+  background: transparent;
+`;
+
+export const CollapsibleContent = styled.div<{isOpen: boolean}>`
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+
+  ${({isOpen}) =>
+    isOpen &&
+    `
+    position: static;
+    height: fit-content;
+  `};
+`;