@websolutespa/bom-mixer-ui 0.4.0 → 0.4.2

package/src/sections/products-proposition/products-proposition-card.tsx

@@ -0,0 +1,38 @@
+import { IMedia } from '@websolutespa/bom-core';
+import { useCurrency } from '@websolutespa/bom-mixer-hooks';
+import Link from 'next/link';
+import { Card, Flex, Media, Text } from '../../components';
+import { UIStyledComponentProps } from '../../components/types';
+
+type Props = {
+  item: ProductsPropositionItem
+};
+
+export type ProductsPropositionItem = {
+  id: number;
+  href: string;
+  title: string;
+  abstract: string;
+  price: number;
+  media: IMedia;
+};
+
+export type ProductsPropositionCardProps = UIStyledComponentProps<Props, 'a'>;
+
+export const ProductsPropositionCard: React.FC<ProductsPropositionCardProps> = ({ item, ...props }: ProductsPropositionCardProps) => {
+  const currency = useCurrency();
+  return (
+    <Link href={item.href} passHref>
+      <Card as="a" {...props} hoverable>
+        <Media aspectRatio={4 / 3} aspectRatioMd={3 / 4} borderRadius="0.4rem" marginBottom="1rem" item={item.media} />
+        <Card.Content>
+          <Flex.Row justifyContent="space-between">
+            <Text variant="paragraph10" fontWeight="700">{item.title}</Text>
+            <Text variant="paragraph10" fontWeight="700">{currency(item.price)}</Text>
+          </Flex.Row>
+          <Text variant="paragraph10">{item.abstract}</Text>
+        </Card.Content>
+      </Card>
+    </Link>
+  );
+};

package/src/sections/products-proposition/products-proposition.tsx

@@ -0,0 +1,27 @@
+import { Container, Grid, Section } from '../../components';
+import { UIComponentProps } from '../../components/types';
+import { ProductsPropositionCard, ProductsPropositionItem } from './products-proposition-card';
+
+type Props = {
+  items: ProductsPropositionItem[],
+};
+
+export type ProductsPropositionProps = UIComponentProps<Props>;
+
+export const ProductsProposition: React.FC<ProductsPropositionProps> = ({ items }: ProductsPropositionProps) => {
+  return (
+    <Section padding="3rem 0">
+      <Container>
+        {items && (
+          <Grid.Row columnGap="1rem" rowGap="2rem">
+            {items.map((item, i) => (
+              <Grid sm={6} md={4} key={i}>
+                <ProductsPropositionCard item={item}></ProductsPropositionCard>
+              </Grid>
+            ))}
+          </Grid.Row>
+        )}
+      </Container>
+    </Section>
+  );
+};

package/src/sections/products-related/products-related-card.tsx

@@ -0,0 +1,56 @@
+import { IMedia } from '@websolutespa/bom-core';
+import { useCart, useCurrency, useDrawer } from '@websolutespa/bom-mixer-hooks';
+import Link from 'next/link';
+import { Button, Card, Flex, Media, MediaImage, Text } from '../../components';
+import { UIStyledComponentProps } from '../../components/types';
+
+type Props = {
+  item: ProductsRelatedItem
+};
+
+export type ProductsRelatedItem = {
+  id: number;
+  schema: string;
+  href: string;
+  title: string;
+  abstract: string;
+  price: number;
+  media: IMedia;
+};
+
+export type ProductsRelatedCardProps = UIStyledComponentProps<Props>;
+
+export const ProductsRelatedCard: React.FC<ProductsRelatedCardProps> = ({ item, ...props }: ProductsRelatedCardProps) => {
+  const currency = useCurrency();
+  const [drawer, openDrawer, closeDrawer] = useDrawer();
+  const { add } = useCart((state) => state.actions);
+  // const find = useCart((state) => state.find);
+  // const cartItem = find(item);
+  // const isAddedToCart = cartItem != null;
+  // const [qty, setQty] = useState(isAddedToCart ? cartItem.qty : 1);
+  function onAddToCart() {
+    add(item, 1);
+    openDrawer('cart');
+  }
+  return (
+    <Card {...props} hoverable>
+      <Link href={item.href} passHref>
+        <Media as="a" aspectRatio={1} borderRadius="0.4rem" marginBottom="1rem" overlay>
+          <MediaImage {...item.media} />
+          <Media.Info padding="1rem" justifyContent="flex-end" alignItems="flex-end">
+            <Text variant="paragraph10">{currency(item.price)}</Text>
+          </Media.Info>
+        </Media>
+      </Link>
+      <Card.Content>
+        <Flex.Row justifyContent="space-between">
+          <Link href={item.href} passHref>
+            <Text variant="paragraph20" fontWeight="700" as="a">{item.title}</Text>
+          </Link>
+        </Flex.Row>
+        <Text variant="paragraph20" marginBottom="2rem">{item.abstract}</Text>
+        <Button variant="secondary" width="100%" justifyContent="center" onClick={onAddToCart}>Add to bag</Button>
+      </Card.Content>
+    </Card>
+  );
+};

package/src/sections/products-related/products-related.tsx

@@ -0,0 +1,30 @@
+import { Container, Flex, Grid, Section, Text } from '../../components';
+import { UIComponentProps } from '../../components/types';
+import { ProductsRelatedCard, ProductsRelatedItem } from './products-related-card';
+
+type Props = {
+  items: ProductsRelatedItem[],
+};
+
+export type ProductsRelatedProps = UIComponentProps<Props>;
+
+export const ProductsRelated: React.FC<ProductsRelatedProps> = ({ items }: ProductsRelatedProps) => {
+  return (
+    <Section padding="3rem 0">
+      <Container>
+        <Flex.Row justifyContent="space-between" marginBottom="1rem">
+          <Text variant="heading40" fontWeight="700">Customers also bought</Text>
+        </Flex.Row>
+        {items && (
+          <Grid.Row columnGap="1rem" rowGap="1rem">
+            {items.map((item, i) => (
+              <Grid sm={6} md={3} key={i}>
+                <ProductsRelatedCard item={item}></ProductsRelatedCard>
+              </Grid>
+            ))}
+          </Grid.Row>
+        )}
+      </Container>
+    </Section>
+  );
+};

package/src/sections/products-search/products-search-card.tsx

@@ -0,0 +1,60 @@
+import { IEquatable, IMedia } from '@websolutespa/bom-core';
+import Link from 'next/link';
+import styled from 'styled-components';
+import { Button, Card, Flex, Media, Text } from '../../components';
+import { UIStyledComponentProps } from '../../components/types';
+
+type Props = {
+  item: ProductSearchItem
+};
+
+export type ProductSearchItem = {
+  href: string;
+  title: string;
+  medias: IMedia[];
+  designer?: IEquatable;
+  colors: IEquatable[];
+};
+
+export type ProductsSearchCardProps = UIStyledComponentProps<Props>;
+
+const StyledCard = styled(Card)`
+  .media{
+    .image {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      object-fit: cover;
+
+      &:not(:first-child) {
+        opacity: 0!important;
+      }
+    }
+  }
+  &:hover {
+    .media {
+      .image:nth-child(2) {
+          opacity: 1!important;
+      }
+    }
+  }
+`;
+
+export const ProductsSearchCard: React.FC<ProductsSearchCardProps> = ({ item, ...props }: ProductsSearchCardProps) => {
+  return (
+    <StyledCard {...props} hoverable>
+      <Link href={item.href} passHref>
+        <Media as="a" aspectRatio={1} borderRadius="0.4rem" marginBottom="0.5rem" item={item.medias} />
+      </Link>
+      <Card.Content>
+        <Flex.Row justifyContent="space-between">
+          <Button variant="nav">
+            <Text variant="paragraph10" dangerouslySetInnerHTML={{ __html: item.title || 'untitled' }}></Text>
+          </Button>
+        </Flex.Row>
+      </Card.Content>
+    </StyledCard>
+  );
+};

package/src/sections/products-search/products-search-filters-modal.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { Drawer, Text } from '../../components';
+import { ProductsSearchFilters } from './products-search-filters';
+
+export type ProductsSearchFiltersModalProps = {
+  children?: ReactNode;
+  visible: boolean;
+  onClose: () => void;
+};
+
+export const ProductsSearchFiltersModal: React.FC<ProductsSearchFiltersModalProps> = ({ visible, onClose }: ProductsSearchFiltersModalProps) => {
+  return (
+    <Drawer visible={visible} onClose={onClose} placement="right">
+      <Drawer.Title>
+        <Text variant="paragraph10" fontWeight="700">Filters</Text>
+      </Drawer.Title>
+      <Drawer.Content width="100vw" maxWidth="400px">
+        <ProductsSearchFilters />
+      </Drawer.Content>
+    </Drawer>
+  );
+};

package/src/sections/products-search/products-search-filters.tsx

@@ -0,0 +1,92 @@
+import { Box, Flex, Text } from '../../components';
+import { UIStyledComponentProps } from '../../components/types';
+import { CustomSelect } from '../../forms';
+
+type Props = {
+};
+
+export type ProductsSearchFiltersProps = UIStyledComponentProps<Props>;
+
+export const ProductsSearchFilters: React.FC<ProductsSearchFiltersProps> = ({ ...props }: ProductsSearchFiltersProps) => {
+  return (
+    <Box {...props}>
+      <Flex.Row gap="1rem">
+        <Text variant="paragraph40" fontWeight="700" textTransform="uppercase">Filter By</Text>
+        <CustomSelect name="color" id="color" placeholder="Color" minWidth="200px">
+          <CustomSelect.Label>Color</CustomSelect.Label>
+          <CustomSelect.Option value="white">Bianco</CustomSelect.Option>
+          <CustomSelect.Option value="gray">Grigio</CustomSelect.Option>
+          <CustomSelect.Option value="brown">Marrone</CustomSelect.Option>
+          <CustomSelect.Option value="green">Verde</CustomSelect.Option>
+          <CustomSelect.Option value="red">Rosso</CustomSelect.Option>
+          <CustomSelect.Option value="blue">Blu</CustomSelect.Option>
+          <CustomSelect.Option value="black">Nero</CustomSelect.Option>
+          <CustomSelect.Option value="earth">Terre</CustomSelect.Option>
+          <CustomSelect.Option value="yellow">Giallo</CustomSelect.Option>
+          <CustomSelect.Option value="violet">Viola</CustomSelect.Option>
+          <CustomSelect.Option value="azure">Azzurro</CustomSelect.Option>
+          <CustomSelect.Option value="pink">rosa</CustomSelect.Option>
+        </CustomSelect>
+        <CustomSelect name="designer" id="designer" placeholder="Designer" minWidth="200px">
+          <CustomSelect.Label>Designer</CustomSelect.Label>
+          <CustomSelect.Option value="1">Patricia Urquiola</CustomSelect.Option>
+          <CustomSelect.Option value="2">Hella Jongerius</CustomSelect.Option>
+          <CustomSelect.Option value="3">Edward Barber &amp; Jay Osgerby</CustomSelect.Option>
+          <CustomSelect.Option value="4">Inga Sempé</CustomSelect.Option>
+          <CustomSelect.Option value="5">Konstantin Grcic</CustomSelect.Option>
+          <CustomSelect.Option value="6">Tokujin Yoshioka</CustomSelect.Option>
+          <CustomSelect.Option value="7">Ronan &amp; Erwan Bouroullec</CustomSelect.Option>
+          <CustomSelect.Option value="8">Raw Edges</CustomSelect.Option>
+          <CustomSelect.Option value="9">Nathalie Du Pasquier</CustomSelect.Option>
+          <CustomSelect.Option value="10">Laboratorio Avallone</CustomSelect.Option>
+          <CustomSelect.Option value="11">OEO Studio</CustomSelect.Option>
+          <CustomSelect.Option value="12">Vincent Van Duysen</CustomSelect.Option>
+        </CustomSelect>
+      </Flex.Row>
+
+
+      {/*
+      <Box {...props}>
+        <Nav.Col marginBottom="2rem" fontSize="0.9rem">
+          <Button variant="nav" as="a">Totes</Button>
+          <Button variant="nav" as="a">Backpacks</Button>
+          <Button variant="nav" as="a">Travel Bags</Button>
+          <Button variant="nav" as="a">Hip Bags</Button>
+          <Button variant="nav" as="a">Laptop Sleeves</Button>
+        </Nav.Col>
+        <Accordion.Group>
+          <Accordion title="Color">
+            <Box padding="0 0.15rem">
+              <Label><Checkbox value='white' /> White</Label>
+              <Label><Checkbox value='beige' /> Beige</Label>
+              <Label><Checkbox value='blue' /> Blue</Label>
+              <Label><Checkbox value='brown' /> Brown</Label>
+              <Label><Checkbox value='green' /> Green</Label>
+              <Label><Checkbox value='purple' /> Purple</Label>
+            </Box>
+          </Accordion>
+          <Accordion title="Category">
+            <Box padding="0 0.15rem">
+              <Label><Checkbox value='white' /> New Arrivals</Label>
+              <Label><Checkbox value='white' /> Sale</Label>
+              <Label><Checkbox value='white' /> Travel</Label>
+              <Label><Checkbox value='white' /> Organization</Label>
+              <Label><Checkbox value='white' /> Accessories</Label>
+            </Box>
+          </Accordion>
+          <Accordion title="Size">
+            <Box padding="0 0.15rem">
+              <Label><Checkbox value='white' /> 2L</Label>
+              <Label><Checkbox value='white' /> 6L</Label>
+              <Label><Checkbox value='white' /> 12L</Label>
+              <Label><Checkbox value='white' /> 18L</Label>
+              <Label><Checkbox value='white' /> 20L</Label>
+              <Label><Checkbox value='white' /> 40L</Label>
+            </Box>
+          </Accordion>
+        </Accordion.Group>
+      </Box>
+       */}
+    </Box>
+  );
+};

package/src/sections/products-search/products-search-recap.tsx

@@ -0,0 +1,55 @@
+
+import { IEquatable } from '@websolutespa/bom-core';
+import { Filter, IFilterOption } from '@websolutespa/bom-mixer-hooks';
+import { IconXCircle } from '@websolutespa/bom-mixer-icons';
+import { Box, Button, Container, Flex, Text } from '../../components';
+import { ProductSearchItem } from './products-search-card';
+
+export function ProductsSearchRecap({ filters, onChange }: { filters: Filter<ProductSearchItem>[], onChange: (filter: Filter<ProductSearchItem>, values: IEquatable[]) => void }) {
+
+  const selectedFilters = filters.filter(x => x.hasAny());
+
+  if (!selectedFilters.length) {
+    return null;
+  }
+
+  const onRemove = (filter: Filter<ProductSearchItem>, option: IFilterOption) => {
+    const values = [...filter.values];
+    const index = values.indexOf(option.id);
+    if (index !== -1) {
+      values.splice(index, 1);
+      // console.log('onRemove', filter.id, option.id, values);
+      onChange(filter, values);
+    }
+  };
+
+  return (
+    <Box padding="1rem 0" borderBottom="2px solid var(--color-neutral-200)">
+      <Container>
+        <Flex.Row gap="1rem" flexWrap="wrap">
+          {selectedFilters.map((filter, i) => (
+            <Flex.Row key={filter.id} gap="1rem">
+              <Text variant="paragraph40" fontWeight="700" textTransform="uppercase" paddingRight="10px">{filter.title}</Text>
+              <Flex.Row gap="0.5rem">
+                {filter.options && filter.options.filter(x => filter.has(x)).map((option) => (
+                  <Button key={option.id} variant="secondary" size="sm" onClick={() => onRemove(filter, option)}>
+                    <IconXCircle />
+                    <span>{option.title}</span>
+                  </Button>
+                ))}
+              </Flex.Row>
+
+              {false && filter.options && filter.options.filter(x => filter.has(x)).map((option) => (
+                <Button key={option.id} onClick={() => onRemove(filter, option)}>
+                  <IconXCircle />
+                  <span>{option.title}</span>
+                </Button>
+              ))}
+
+            </Flex.Row>
+          ))}
+        </Flex.Row>
+      </Container>
+    </Box>
+  );
+}

package/src/sections/products-search/products-search.tsx

@@ -0,0 +1,162 @@
+import { getClassNames, IEquatable } from '@websolutespa/bom-core';
+import { Filter, filtersToParams, useDrawer, useFilters, useInfiniteLoader, useSearchParamsEncoded } from '@websolutespa/bom-mixer-hooks';
+import { IconChevronDown, IconFilter, IconGrid, IconSquare } from '@websolutespa/bom-mixer-icons';
+import { IFeatureType } from '@websolutespa/bom-mixer-models';
+import { useCallback, useState } from 'react';
+import { Box, Button, Container, Flex, Grid, InfiniteLoader, Nav, Popover, Section, Text } from '../../components';
+import { UIStyledComponentProps } from '../../components/types';
+import { CustomSelect } from '../../forms';
+import { ProductSearchItem, ProductsSearchCard } from './products-search-card';
+import { ProductsSearchFilters } from './products-search-filters';
+import { ProductsSearchFiltersModal } from './products-search-filters-modal';
+import { ProductsSearchRecap } from './products-search-recap';
+
+const SortMenu = () => (
+  <Nav.Col minWidth="150px">
+    <Button variant="nav" as="a">Most Popular</Button>
+    <Button variant="nav" as="a">Best Rating</Button>
+    <Button variant="nav" as="a">Newest</Button>
+    <Button variant="nav" as="a">Price: Low to High</Button>
+    <Button variant="nav" as="a">Price: High to Low</Button>
+  </Nav.Col>
+);
+
+// this is the actual filtering function of the products
+function filterProductItem(key: string, item: ProductSearchItem, value: IEquatable) {
+  switch (key) {
+    case 'color':
+      return item.colors.includes(value);
+    case 'designer':
+      return item.designer === value;
+    case 'title':
+      return item.title.toLowerCase().includes(value.toString().toLowerCase());
+    default:
+      return false;
+  }
+}
+
+type Props = {
+  items: ProductSearchItem[];
+  featureTypes: IFeatureType[];
+};
+
+export type ProductsSearchProps = UIStyledComponentProps<Props>;
+
+export const ProductsSearch: React.FC<ProductsSearchProps> = ({ items, featureTypes, ...props }: ProductsSearchProps) => {
+
+  // deserialize queryString encoded params
+  const { params, replaceParamsSilently } = useSearchParamsEncoded();
+
+  // using item filter callback from service
+  const filterItem = useCallback(filterProductItem, []);
+
+  // initialize filters with items, featureTypes and queryString params
+  const { filteredItems, filters, setFilter } = useFilters<ProductSearchItem>(items, featureTypes, filterItem, params?.filter);
+
+  // fires when user make a change on filters
+  const onFilterChange = (filter: Filter<ProductSearchItem>, values?: IEquatable[]) => {
+    // console.log('ProductSearchCSR.onFilterChange', filter, values);
+    setFilter(filter, values);
+    // pagination.goToPage(1);
+    // serializing querystring filter
+    const filterParams = filtersToParams(filters);
+    replaceParamsSilently({ filter: filterParams, pagination: { page: 1 } });
+  };
+
+  const onCustomSelectChange = (value: string | string[], filter: Filter<ProductSearchItem>) => {
+    const ids = Array.isArray(value) ? value : [value];
+    const option = filter.options?.find(x => {
+      return x.id === parseInt(ids[0]);
+    });
+    if (option) {
+      filter.toggle(option);
+      onFilterChange(filter, filter.values);
+    }
+    console.log('onCustomSelectChange', filter, option, value);
+  };
+
+  // visible results paged by the infinite scroll or button loader
+  const [visibleItems, onMore, hasMore] = useInfiniteLoader(filteredItems);
+
+  const [drawer, openDrawer, closeDrawer] = useDrawer();
+  const [large, setLarge] = useState<boolean>(false);
+
+  return (
+    <>
+      <Box padding="1rem 0" borderBottom="2px solid var(--color-neutral-200)">
+        <Container>
+          <Flex.Row gap="2rem" justifyContent="space-between" alignItems="center">
+
+            {false &&
+              <ProductsSearchFilters display="none" displaySm="flex" />
+            }
+
+            <Flex.Row display="none" displaySm="flex" gap="1rem" flex="1">
+              <Text variant="paragraph40" fontWeight="700" textTransform="uppercase">Filter By</Text>
+              {filters.map((filter, f) => (
+                <CustomSelect key={f} name={filter.id} id={filter.id} value={''} placeholder={filter.title} onChange={(event) => onCustomSelectChange(event, filter)}
+                  flex="1" minWidth="200px">
+                  <CustomSelect.Label>{filter.title}</CustomSelect.Label>
+                  {filter.options.map((option, o) => (
+                    <CustomSelect.Option key={o} value={option.id.toString()}>{option.title}</CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              ))}
+            </Flex.Row>
+
+            <Flex.Row gap="2rem">
+
+              {false &&
+                <Popover content={SortMenu}>
+                  <Button variant="nav">
+                    <Text variant="paragraph40" fontWeight="700" textTransform="uppercase">Sort</Text>
+                    <IconChevronDown />
+                  </Button>
+                </Popover>
+              }
+
+              <Flex.Row gap="1rem">
+                <Text variant="paragraph40" fontWeight="700" textTransform="uppercase">View</Text>
+                <Button variant="toggle" className={getClassNames({ active: !large })} onClick={() => setLarge(false)}><IconGrid /></Button>
+                <Button variant="toggle" className={getClassNames({ active: large })} onClick={() => setLarge(true)}><IconSquare /></Button>
+              </Flex.Row>
+
+            </Flex.Row>
+            <Button variant="nav" display="block" displaySm="none" onClick={() => openDrawer('filters')}><IconFilter /></Button>
+
+            <ProductsSearchFiltersModal visible={drawer == 'filters'} onClose={closeDrawer} />
+
+          </Flex.Row>
+        </Container>
+      </Box>
+      <ProductsSearchRecap filters={filters} onChange={onFilterChange} />
+      <Section padding="3rem 0" id="serp">
+        <Container>
+          <Grid.Row columnGap="1rem" rowGap="2.5rem">
+            {visibleItems.map((item, i) => (
+              <Grid key={i} sm={large ? 12 : 6} md={large ? 6 : 4} lg={large ? 4 : 3}>
+                <ProductsSearchCard item={item}></ProductsSearchCard>
+              </Grid>
+            ))}
+            {true && hasMore &&
+              <Grid alignItems="center">
+                <Button variant="outline" onClick={onMore}>View More</Button>
+              </Grid>
+            }
+            {false && hasMore &&
+              <Grid>
+                <InfiniteLoader onMore={onMore}>more</InfiniteLoader>
+              </Grid>
+            }
+          </Grid.Row>
+          {/*
+          <Pagination count={5} margin="2rem 0">
+            <Pagination.Previous><ChevronLeft /></Pagination.Previous>
+            <Pagination.Next><ChevronRight /></Pagination.Next>
+          </Pagination>
+           */}
+        </Container>
+      </Section>
+    </>
+  );
+};

package/src/sections/proposition/proposition.tsx

@@ -0,0 +1,32 @@
+import { useDrawer, useModal } from '@websolutespa/bom-mixer-hooks';
+import Link from 'next/link';
+import { Button, Container, Flex, Section, Text } from '../../components';
+import { UIComponentProps } from '../../components/types';
+
+type Props = {
+};
+
+export type PropositionProps = UIComponentProps<Props>;
+
+export const Proposition: React.FC<PropositionProps> = (props: PropositionProps) => {
+  const [modal, openModal, closeModal] = useModal();
+  const [drawer, openDrawer, closeDrawer] = useDrawer();
+  return (
+    <>
+      <Section padding="7rem 0" background="var(--color-primary-100)" color="var(--color-primary-900)">
+        <Container>
+          <Flex.Col justifyContent="center" alignItems="center">
+            <Text variant="display40" fontWeight="700" marginBottom="2rem">Prow scuttle parrel provost Sail.</Text>
+            <Link href="https://design-system-ruddy.vercel.app" passHref>
+              <Button as="a" variant="primary" marginBottom="1rem" target="_blank">Read documentation</Button>
+            </Link>
+            <Link href="https://github.com/actarian/design-system" passHref>
+              <Button as="a" variant="link" target="_blank">view on GitHub</Button>
+            </Link>
+            <Button as="a" variant="link" onClick={() => openModal('foreign-market')}>open modal</Button>
+          </Flex.Col>
+        </Container>
+      </Section>
+    </>
+  );
+};

package/src/sections/reserved_area/reserved_area.tsx

@@ -0,0 +1,51 @@
+import { ILayout, IPage } from '@websolutespa/bom-core';
+import { Breadcrumb, Container, Grid, Section } from '../../components';
+import { UIComponentProps } from '../../components/types';
+import { ReservedAreaMenu } from '../reserved_area_menu/reserved_area_menu';
+
+type Props = {
+  children?: React.ReactNode;
+  layout: ILayout;
+  page: IPage,
+};
+
+export type ReservedAreaProps = UIComponentProps<Props>;
+
+export const ReservedArea: React.FC<ReservedAreaProps> = ({ children, layout, page }: ReservedAreaProps) => {
+
+  const menu = layout.topLevelRoutes.reserved_area?.items;
+
+  return (
+    <>
+      <Section className="print-none">
+        <Container>
+          <Breadcrumb.Group items={page.breadcrumb} />
+        </Container>
+      </Section>
+      <Section padding="0 0 3rem 0">
+        <Container minHeight="50vh">
+          <Grid.Row>
+            {/* Left menu sticky column */}
+            <Grid className="print-none" display="none" displaySm="block" sm={4} md={3}>
+              {menu && <ReservedAreaMenu items={menu} />}
+            </Grid>
+            {/* Right main content */}
+            <Grid sm={8} md={9}>
+              {children}
+            </Grid>
+          </Grid.Row>
+          {/* (
+            <Flex.Responsive gap="1rem" alignItemsSm="stretch">
+              <Box flexBasis="260px">
+                {menu && <ReservedAreaMenu items={menu} />}
+              </Box>
+              <Box flexGrow="1">
+                {children}
+              </Box>
+            </Flex.Responsive>
+          )*/}
+        </Container>
+      </Section>
+    </>
+  );
+};