// ** React Imports import { useState, useEffect } from 'react' // ** MUI Imports import Box from '@mui/material/Box' import Card from '@mui/material/Card' import Tooltip from '@mui/material/Tooltip' import Divider from '@mui/material/Divider' import { Theme } from '@mui/material/styles' import Collapse from '@mui/material/Collapse' import IconButton from '@mui/material/IconButton' import CardHeader from '@mui/material/CardHeader' import CardContent from '@mui/material/CardContent' import ToggleButton from '@mui/material/ToggleButton' import useMediaQuery from '@mui/material/useMediaQuery' import ToggleButtonGroup from '@mui/material/ToggleButtonGroup' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Third Party Components import Prism from 'prismjs' import toast from 'react-hot-toast' // ** Types import { CardSnippetProps } from './types' // ** Hooks import useClipboard from 'src/@core/hooks/useClipboard' const CardSnippet = (props: CardSnippetProps) => { // ** Props const { id, sx, code, title, children, className } = props // ** States const [showCode, setShowCode] = useState(false) const [tabValue, setTabValue] = useState<'tsx' | 'jsx'>(code.tsx !== null ? 'tsx' : 'jsx') // ** Hooks const clipboard = useClipboard() const hidden = useMediaQuery((theme: Theme) => theme.breakpoints.down('md')) // ** Highlight code on mount useEffect(() => { Prism.highlightAll() }, [showCode, tabValue]) const codeToCopy = () => { if (code.tsx !== null && tabValue === 'tsx') { return code.tsx.props.children.props.children } else if (code.jsx !== null && tabValue === 'jsx') { return code.jsx.props.children.props.children } else { return '' } } const handleClick = () => { clipboard.copy(codeToCopy()) toast.success('The source code has been copied to your clipboard.', { duration: 2000 }) } const renderCode = () => { if (code[tabValue] !== null) { return code[tabValue] } else { return null } } return ( setShowCode(!showCode)}> ) })} /> {children} {hidden ? null : ( (newValue !== null ? setTabValue(newValue) : null)} > {code.tsx !== null ? ( ) : null} {code.jsx !== null ? ( ) : null}
{renderCode()}
)}
) } export default CardSnippet