csslayout/client/placeholders/BrowserFrame.tsx

/**
 * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
 * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
 */

import React, { useState } from 'react';

import SampleCode from '../components/SampleCode';

interface BrowserFrameProps {
    content: React.ReactNode;
    source?: string;
}

const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
    const [isContentActive, setContentActive] = useState(true);
    const flip = () => setContentActive((isActive) => !isActive);

    return (
        <div
            className='shadow-2xl'
            style={{
                border: '1px solid rgba(0, 0, 0, 0.2)',
                borderRadius: '4px',
            }}
        >
            <div
                style={{
                    alignItems: 'center',
                    backgroundColor: 'rgba( 0, 0, 0, 0.05)',
                    borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
                    display: 'flex',
                    padding: '8px 16px',
                }}
            >
                <div
                    style={{
                        backgroundColor: '#FF4136',
                        borderRadius: '100%',
                        height: '16px',
                        marginRight: '4px',
                        width: '16px',
                    }}
                />
                <div
                    style={{
                        backgroundColor: '#FFB700',
                        borderRadius: '100%',
                        height: '16px',
                        marginRight: '4px',
                        width: '16px',
                    }}
                />
                <div
                    style={{
                        backgroundColor: '#FF4136',
                        borderRadius: '100%',
                        height: '16px',
                        marginRight: '4px',
                        width: '16px',
                    }}
                />
                {source && (
                    <div style={{ marginLeft: 'auto' }}>
                        <button
                            style={{
                                backgroundColor: '#00449E',
                                borderColor: 'transparent',
                                borderRadius: '4px',
                                color: '#FFF',
                                cursor: 'pointer',
                                padding: '4px 8px',
                            }}
                            onClick={flip}
                        >
                            {isContentActive ? 'Source' : 'Demo'}
                        </button>
                    </div>
                )}
            </div>
            <div
                style={{
                    height: '512px',
                    position: 'relative',
                    transform: isContentActive ? '' : 'rotateY(180deg)',
                    transformStyle: 'preserve-3d',
                    transition: 'transform 1s',
                }}
            >
                <div
                    style={{
                        WebkitBackfaceVisibility: 'hidden',
                        backfaceVisibility: 'hidden',
                        height: '100%',
                        left: 0,
                        opacity: isContentActive ? 1 : 0,
                        overflow: 'scroll',
                        position: 'absolute',
                        top: 0,
                        width: '100%',
                    }}
                >
                    {content}
                </div>
                {source && (
                    <div
                        style={{
                            WebkitBackfaceVisibility: 'hidden',
                            backfaceVisibility: 'hidden',
                            height: '100%',
                            left: 0,
                            opacity: isContentActive ? 0 : 1,
                            overflow: 'scroll',
                            position: 'absolute',
                            top: 0,
                            transform: 'rotateY(180deg)',
                            width: '100%',
                        }}
                    >
                        <SampleCode fullHeight={true} lang="html" code={source} />
                    </div>
                )}
            </div>
        </div>
    );
};

export default BrowserFrame;