Start migration

site/components/product/ProductCardRoom/ProductCardRoom.tsx

@@ -0,0 +1,100 @@
+import {
+  Flex,
+  Box,
+  Image,
+  Heading,
+  Divider,
+  Text,
+  Stack,
+  Link,
+} from '@chakra-ui/react';
+import NextLink from "next/link"
+import { Product } from '@commerce/types';
+
+import style from './ProductCardRoomStyle.module.css';
+
+export default function ProductCardRoom(props: {
+  product: Product.Product,
+  decade: string
+}) {
+
+  let historicDescription = props.product.metafields
+    .filter(meta => meta.key == 'descrizione_storica')
+    .map(meta => meta.value);
+  let technicalDescription = props.product.metafields
+    .filter(meta => meta.key == 'descrizione_tecnica')
+    .map(meta => meta.value);
+  let nationOrigin = props.product.metafields
+    .filter(meta => meta.key == 'nazionalit_')
+    .map(meta => meta.value);
+
+  return (
+    <Flex w="full" alignItems="center" justifyContent="center" direction={'row'}>
+      <Box
+        maxW={'445px'}
+        w={'full'}
+        boxShadow={'2xl'}
+        rounded={'md'}
+        overflow={'hidden'}
+        className={style.cardBody}>
+        
+        <Image
+            className={style.flagIcon}
+            src={'http://purecatamphetamine.github.io/country-flag-icons/3x2/' + nationOrigin + '.svg'}
+            alt={`Picture of Flag`}
+            rounded={'lg'}
+        />
+
+        <Image
+            className={style.decadeIcon}
+            src={'/assets/polygons/colorized/' + props.decade + '.svg'}
+            alt={`Picture of Decade`}
+        />
+
+        <Box
+          className={style.imageContainer}
+          w={'full'}
+          height={'220px'}
+          >
+            <NextLink href={'/product/' + props.product.slug} passHref>
+              <Link style={{textDecoration: 'none', height: 'inherit'}}>
+                <Image
+                  src={
+                      props.product.images[0].url
+                  }
+                  objectFit={'cover'}
+                  margin={'auto'}
+                  height={'inherit'}
+                />
+              </Link>
+            </NextLink>
+        </Box>
+        
+        <Box 
+          p={5}
+          className={style.captionContainer}>
+          
+          <Stack align={'center'}>
+              <Heading fontSize={'2xl'} textAlign={'center'} fontFamily={'body'} fontWeight={500}>
+                {props.product.name}
+              </Heading>
+          </Stack>
+
+          <Stack mt={6} align={'center'}>
+            <Divider borderColor={'blackAlpha.600'} />
+            {historicDescription.pop()?.split('\n').map((line, index) => (
+              <Text key={index} padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
+                {line}
+              </Text>
+            ))}
+            <Divider borderColor={'blackAlpha.600'} />
+            <Text color={'gray.500'} fontSize={'sm'} align={'center'}>
+              {technicalDescription}
+            </Text>
+          </Stack>
+        </Box>
+
+      </Box>
+    </Flex>
+  );
+}

site/components/product/ProductCardRoom/ProductCardRoomStyle.module.css

@@ -0,0 +1,25 @@
+.flagIcon {
+  margin: 5px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+}
+
+.decadeIcon {
+  margin: 5px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 50px;
+  height: 50px;
+}
+
+.cardBody {
+  background-color: rgba(255, 255, 255, 0.70);
+}
+
+.imageContainer {
+  background-color: rgba(0, 0, 0, 0.7);
+}

site/components/product/ProductModel/ProductModel.tsx

@@ -0,0 +1,72 @@
+import Script from 'next/script';
+import { useEffect, useState } from 'react';
+
+export default function ProductModel(props: {
+    modelPath: string
+}) {
+
+    const [windowSize, setWindowSize] = useState({
+        width: 600,
+        height: 600,
+      });
+    
+    useEffect(() => {
+        // only execute all the code below in client side
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+            width: window.innerWidth,
+            height: window.innerHeight,
+            });
+        }
+        
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+            
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+    
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+
+    const modelViewerTag = `
+
+        <style>
+            model-viewer {
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                display: block;
+                min-width: 100%;
+                min-height: 100%;
+                max-width: 100%;
+                max-height: 100%;
+                padding: 0;
+                margin: auto;
+                height: 0;
+                width: 0;
+                position: absolute;
+                box-sizing: border-box
+            }
+
+            #productModelViewer {
+                height: ${windowSize.width < 600 ? windowSize.width : 600}px;
+                width: ${windowSize.width < 600 ? windowSize.width : 600}px;
+            }
+        </style>
+
+        <model-viewer src="${props.modelPath}" ar ar-modes="webxr scene-viewer quick-look" seamless-poster shadow-intensity="1" camera-controls enable-pan shadow-intensity="0" enviroment-image="neutral"></model-viewer>
+    
+    `;
+
+    return (
+        <>
+            <Script type='module' src='https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js'></Script>
+            <div id="productModelViewer" dangerouslySetInnerHTML={{__html: modelViewerTag}} />
+        </>
+    );
+}
+