crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-15 22:16:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change to next image into resource card modal

Browse Source
This commit is contained in:
Daniele Pancottini 2023-07-08 11:01:14 +02:00
parent 3437448ef8
commit 0749022035
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
site/components/common/Room/ResourceCardContent/ImageCardContent.tsx
View File

@ -1,6 +1,7 @@
import { Box, Stack, Image, Text } from "@chakra-ui/react";
import { Box, Stack, Text } from "@chakra-ui/react";
import "./ImageCardContent.module.css"
import screenfull from "screenfull";
import Image from "next/image";
export default function ImageCardContent(props: {
style: any
@ -11,13 +12,15 @@ export default function ImageCardContent(props: {
return (
<>
<Box
className={props.style.imageContainer}
position={"relative"}
margin={"auto"}
cursor={'pointer'}
w={'full'}
height={"220px"}
>
<Image
objectFit={"cover"}
margin={"auto"}
cursor={'pointer'}
layout={"fill"}
onClick={() => openFullScreen('resource-image')}
id='resource-image'
alt=''

16
site/components/common/Room/ResourceCardModal/ResourceCardModal.tsx
View File

@ -1,6 +1,6 @@
import { Box, Flex, propNames, Stack, Text } from "@chakra-ui/react"
import { MarkerResourcePayload } from "../RoomTypes/RoomTypes"
import { Image } from "@chakra-ui/react"
import Image from "next/image";
import 'react-h5-audio-player/lib/styles.css';
@ -48,11 +48,21 @@ export default function ResourceCardModal(props: {
overflow={'hidden'}
className={style.cardBody}>
<Image
<Box
position={"absolute"}
margin={"5px"}
top={"0"}
left={"0"}
height={"50px"}
width={"50px"}
zIndex={'overlay'}>
<Image
className={style.decadeIcon}
src={'/assets/polygons/' + props.decade + '.svg'}
alt={`Picture of Decade`}
/>
layout={"fill"}
/>
</Box>
{
getResourceContent()