Start migration

site/components/common/Room/ResourceCardContent/AudioCardContent.tsx

@@ -0,0 +1,44 @@
+import { Box, Stack, Button, Text } from "@chakra-ui/react";
+import { createRef } from "react";
+import H5AudioPlayer from "react-h5-audio-player";
+
+export default function AudioCardContent(props: {
+    style: any
+    resourcePath: string,
+    resourceCaption: string,
+    onPlay: (player: HTMLAudioElement) => void,
+    onPause: () => void,
+    onClose: () => void
+  }) { 
+
+    const player = createRef<H5AudioPlayer>()
+
+    return (
+        <>
+            <Box
+                className={props.style.imageContainer}
+                w={'full'}
+                >
+                <H5AudioPlayer
+                    src={props.resourcePath}
+                    ref={player}
+                    onCanPlay={e => props.onPlay(player.current?.audio.current!)}
+                />
+            </Box>
+            
+            <Box 
+                p={5}
+                className={props.style.captionContainer}>
+                
+                <Stack align={'center'}>
+                    <Text padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
+                        {props.resourceCaption}
+                    </Text>
+                    <Button mt={5} onClick={(e) => {props.onClose();props.onPause();}} colorScheme='teal' variant='solid'>
+                        BACKGROUND AUDIO
+                    </Button>
+                </Stack>
+            </Box>
+        </>
+    )
+};