crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-16 06:26: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 "./ImageCardContent.module.css"
import screenfull from "screenfull"; import screenfull from "screenfull";
import Image from "next/image";
export default function ImageCardContent(props: { export default function ImageCardContent(props: {
style: any style: any
@ -11,13 +12,15 @@ export default function ImageCardContent(props: {
return ( return (
<> <>
<Box <Box
className={props.style.imageContainer} position={"relative"}
margin={"auto"}
cursor={'pointer'}
w={'full'} w={'full'}
height={"220px"}
> >
<Image <Image
objectFit={"cover"} objectFit={"cover"}
margin={"auto"} layout={"fill"}
cursor={'pointer'}
onClick={() => openFullScreen('resource-image')} onClick={() => openFullScreen('resource-image')}
id='resource-image' id='resource-image'
alt='' 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 { Box, Flex, propNames, Stack, Text } from "@chakra-ui/react"
import { MarkerResourcePayload } from "../RoomTypes/RoomTypes" import { MarkerResourcePayload } from "../RoomTypes/RoomTypes"
import { Image } from "@chakra-ui/react" import Image from "next/image";
import 'react-h5-audio-player/lib/styles.css'; import 'react-h5-audio-player/lib/styles.css';
@ -48,11 +48,21 @@ export default function ResourceCardModal(props: {
overflow={'hidden'} overflow={'hidden'}
className={style.cardBody}> className={style.cardBody}>
<Image <Box
position={"absolute"}
margin={"5px"}
top={"0"}
left={"0"}
height={"50px"}
width={"50px"}
zIndex={'overlay'}>
<Image
className={style.decadeIcon} className={style.decadeIcon}
src={'/assets/polygons/' + props.decade + '.svg'} src={'/assets/polygons/' + props.decade + '.svg'}
alt={`Picture of Decade`} alt={`Picture of Decade`}
/> layout={"fill"}
/>
</Box>
{ {
getResourceContent() getResourceContent()