7697be57a8
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1517 Accidentally using a combination of prettier default vs with `--no-bracket-spacing` Reviewed By: yungsters Differential Revision: D52162274 fbshipit-source-id: a0e629717060c17b63fa6144d775a590258580ac
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
import clsx from 'clsx';
|
|
import Link from '@docusaurus/Link';
|
|
import Layout from '@theme/Layout';
|
|
|
|
import styles from './index.module.css';
|
|
|
|
import YogaLogo from '../../static/img/logo.svg';
|
|
import Playground from '../components/Playground';
|
|
|
|
function HeroSection() {
|
|
return (
|
|
<header className={clsx('hero', styles.heroBanner)}>
|
|
<div className={clsx('row', 'container', styles.heroRow)}>
|
|
<div className="col col--6">
|
|
<h1 className="hero__title">Yoga</h1>
|
|
<p className="hero__subtitle">
|
|
A portable layout engine targeting web standards
|
|
</p>
|
|
|
|
<Link className="button button--primary button--lg" to="/docs/intro">
|
|
Learn more
|
|
</Link>
|
|
</div>
|
|
<div className="col col--2">
|
|
<YogaLogo className={styles.heroLogo} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
const playgroundCode = `
|
|
<Layout config={{useWebDefaults: false}}>
|
|
<Node style={{width: 250, height: 475, padding: 10}}>
|
|
<Node style={{flex: 1, rowGap: 10}}>
|
|
<Node style={{height: 60}} />
|
|
<Node style={{flex: 1, marginInline: 10}} />
|
|
<Node style={{flex: 2, marginInline: 10}} />
|
|
<Node
|
|
style={{
|
|
position: "absolute",
|
|
width: "100%",
|
|
bottom: 0,
|
|
height: 64,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-around",
|
|
}}
|
|
>
|
|
<Node style={{height: 40, width: 40}} />
|
|
<Node style={{height: 40, width: 40}} />
|
|
<Node style={{height: 40, width: 40}} />
|
|
<Node style={{height: 40, width: 40}} />
|
|
</Node>
|
|
</Node>
|
|
</Node>
|
|
</Layout>
|
|
`.trim();
|
|
|
|
function PlaygroundSection() {
|
|
return (
|
|
<main className={styles.playgroundSection}>
|
|
<Playground height="600px" code={playgroundCode} autoFocus={true} />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default function Home(): JSX.Element {
|
|
return (
|
|
<Layout>
|
|
<HeroSection />
|
|
<PlaygroundSection />
|
|
</Layout>
|
|
);
|
|
}
|