1
0
mirror of https://github.com/vercel/commerce.git synced 2025-07-28 20:51:23 +00:00
Files
.github
.vscode
packages
site
assets
components
auth
cart
checkout
common
About
Avatar
Category
FeatureBar
Footer
Head
HomeAllProductsGrid
HomePage
I18nWidget
Layout
Navbar
News
Room
MarkerCardModal
MarkerCardModal.tsx
ResourceCardContent
ResourceCardModal
RoomTypes
SEO
Searchbar
SidebarLayout
UserNav
index.ts
icons
product
ui
wishlist
search.tsx
config
lib
pages
public
static_data
workers
.env.template
.eslintrc
.gitignore
.npmrc
.prettierignore
.prettierrc
commerce-config.js
commerce.config.json
global.d.ts
next-env.d.ts
next.config.js
package.json
postcss.config.js
tailwind.config.js
tsconfig.json
.editorconfig
.gitignore
.prettierignore
.prettierrc
LICENSE-CC-BY-NC-ND-4.0.md
README.md
license.md
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
turbo.json
yarn.lock
commerce/site/components/common/Room/MarkerCardModal/MarkerCardModal.tsx
2023-03-01 12:13:21 +01:00

53 lines
1.9 KiB
TypeScript

import {
Modal,
ModalOverlay,
ModalContent,
ModalBody,
} from "@chakra-ui/react"
import { Product } from "@commerce/types"
import ProductCardRoom from "../../../product/ProductCardRoom/ProductCardRoom"
import decadesManifest from '../../../../static_data/decadesManifest.json';
import ResourceCardModal from "@components/common/Room/ResourceCardModal/ResourceCardModal";
import { MarkerData, MarkerResourcePayload } from "../RoomTypes/RoomTypes";
export default function MarkerCardModal(props: {
isOpen: boolean,
onModalClose: () => void,
marker: MarkerData,
decade: string,
onAudioPlayerPlay?: (player: HTMLAudioElement) => void,
onAudioPlayerPause?: () => void
}) {
const decadeColor = decadesManifest[props.decade as keyof typeof decadesManifest].color;
const getCardToRender = (markerType: string) => {
switch(markerType) {
case "product":
return <ProductCardRoom decade={props.decade} product={props.marker.markerPayload as Product.Product} />
case "image":
case "video":
return <ResourceCardModal decade={props.decade} resourcePayload={props.marker.markerPayload as MarkerResourcePayload} />
case "audio":
return <ResourceCardModal decade={props.decade} resourcePayload={props.marker.markerPayload as MarkerResourcePayload}
onAudioPlay={props.onAudioPlayerPlay!} onAudioPause={props.onAudioPlayerPause!} onModalClose={props.onModalClose} />
}
}
return (
<>
<Modal onClose={props.onModalClose} isOpen={props.isOpen}>
<ModalOverlay />
<ModalContent rounded={"lg"}>
<ModalBody rounded={"lg"} style={{background: 'linear-gradient(120deg, ' + decadeColor + ' 0%, #000000 130%)'}} p={5}>
{
getCardToRender(props.marker.markerType)
}
</ModalBody>
</ModalContent>
</Modal>
</>
)
}