mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-21 13:21:59 +02:00
Code Issues Releases Wiki Activity

Fix tslint

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-25 01:00:48 +07:00
parent efc9046824
commit 5fd9ff5ddf
58 changed files with 353 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/placeholders/BrowserFrame.tsx
View File

@@ -1,18 +1,17 @@
import React, { useState, ReactNode } from 'react';
import React, { useState } from 'react';
import SampleCode from '../components/SampleCode';
interface BrowserFrameProps {
content: ReactNode;
content: React.ReactNode;
source: string;
}
const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
const [isContentActive, setContentActive] = useState(true);
const flip = () => setContentActive(isActive => !isActive);
const flip = () => setContentActive((isActive) => !isActive);
return (
<div className="br2 ba b--black-20" style={{ boxShadow: '0 16px 40px -8px rgba(0, 0, 0, .5)' }}>
<div className="flex ph3 pv2 bb b--black-20 items-center bg-black-05">
<div className="br-100 mr1 w1 h1 bg-red" />
@@ -28,25 +27,26 @@ const BrowserFrame: React.FC<BrowserFrameProps> = ({ content, source }) => {
className="relative"
style={{
height: '512px',
transition: 'transform 1s',
transformStyle: 'preserve-3d',
transform: isContentActive ? '' : 'rotateY(180deg)',
transformStyle: 'preserve-3d',
transition: 'transform 1s',
}}
>
<div
className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
style={{
backfaceVisibility: 'hidden',
WebkitBackfaceVisibility: 'hidden',
}}>
backfaceVisibility: 'hidden',
}}
>
{content}
</div>
<div
className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
style={{
WebkitBackfaceVisibility: 'hidden',
backfaceVisibility: 'hidden',
transform: 'rotateY(180deg)',
WebkitBackfaceVisibility: 'hidden',
}}
>
<SampleCode lang="html" code={source} />