Start migration

site/components/common/Room/ResourceCardModal/ResourceCardModal.tsx

@@ -0,0 +1,64 @@
+import { Box, Flex, propNames, Stack, Text } from "@chakra-ui/react"
+import { MarkerResourcePayload } from "../RoomTypes/RoomTypes"
+import { Image } from "@chakra-ui/react"
+
+import 'react-h5-audio-player/lib/styles.css';
+
+import style from './ResourceCardStyle.module.css';
+import ImageCardContent from "../ResourceCardContent/ImageCardContent";
+import AudioCardContent from "../ResourceCardContent/AudioCardContent";
+import VideoCardContent from "../ResourceCardContent/VideoCardContent";
+
+export default function ResourceCardModal(props: {
+    decade: string,
+    resourcePayload: MarkerResourcePayload,
+    onModalClose?: () => void,
+    onAudioPlay?: (player: HTMLAudioElement) => void,
+    onAudioPause?: () => void
+  }) {
+    
+    const RES_PATH = '/regions/abruzzo/' + props.decade + '/resources/' + props.resourcePayload.resourceSource;
+
+    const getResourceContent = () => {
+      switch(props.resourcePayload.resourceType) {
+        case 'image':
+          return (
+            <ImageCardContent resourceCaption={props.resourcePayload.resourceCaption} resourcePath={RES_PATH} style={style} />
+          )
+        case 'audio':
+          return (
+            <AudioCardContent resourceCaption={props.resourcePayload.resourceCaption} style={style} resourcePath={RES_PATH} onPlay={props.onAudioPlay!} onPause={props.onAudioPause!} onClose={props.onModalClose!} />
+          )
+        case 'video':
+          return (
+            <VideoCardContent resourceCaption={props.resourcePayload.resourceCaption} style={style} resourcePath={RES_PATH} />
+          )
+        default:
+          return (<></>) 
+      }
+    }
+
+    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.decadeIcon}
+                src={'/assets/polygons/' + props.decade + '.svg'}
+                alt={`Picture of Decade`}
+            />
+
+            {
+              getResourceContent()
+            }
+
+          </Box>
+      </Flex>
+    )
+};

site/components/common/Room/ResourceCardModal/ResourceCardStyle.module.css

@@ -0,0 +1,17 @@
+
+.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);
+}