import { Button, useDisclosure, VStack, WrapItem, Text } from '@chakra-ui/react' import { WordpressLogo, ShopifyLogo, WixLogo, GtmLogo, JavascriptLogo, ReactLogo, NotionLogo, WebflowLogo, IframeLogo, OtherLogo, } from 'assets/logos' import React from 'react' import { WordpressModal, ShopifyModal, WebflowModal, GtmModal, JavascriptModal, ReactModal, NotionModal, IframeModal, WixModal, } from './modals' export type ModalProps = { publicId: string isPublished: boolean isOpen: boolean onClose: () => void } type EmbedButtonProps = Pick & { logo: JSX.Element label: string Modal: (props: ModalProps) => JSX.Element } export const EmbedButton = ({ logo, label, Modal, ...modalProps }: EmbedButtonProps) => { const { isOpen, onOpen, onClose } = useDisclosure() return ( {logo} {label} ) } export const integrationsList = [ (props: Pick) => ( } label="Wordpress" Modal={WordpressModal} {...props} /> ), (props: Pick) => ( } label="Shopify" Modal={ShopifyModal} {...props} /> ), (props: Pick) => ( } label="Wix" Modal={WixModal} {...props} /> ), (props: Pick) => ( } label="Google Tag Manager" Modal={GtmModal} {...props} /> ), (props: Pick) => ( } label="HTML & Javascript" Modal={JavascriptModal} {...props} /> ), (props: Pick) => ( } label="React" Modal={ReactModal} {...props} /> ), (props: Pick) => ( } label="Notion" Modal={NotionModal} {...props} /> ), (props: Pick) => ( } label="Webflow" Modal={WebflowModal} {...props} /> ), (props: Pick) => ( } label="Iframe" Modal={IframeModal} {...props} /> ), (props: Pick) => ( } label="Other" Modal={JavascriptModal} {...props} /> ), ]