Merge pull request #193 from 1milligram/nextjs

Use Nextjs

.babelrc

@@ -1,14 +0,0 @@
-{
-    "plugins": [
-        "@loadable/babel-plugin",
-        ["prismjs", {
-            "languages": ["css", "html", "javascript", "jsx", "tsx"],
-            // "theme": "okaidia",
-            "css": true
-        }]
-    ],
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ]
-}

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .netlify
-dist
+.next
 node_modules
+out
 package-lock.json
 tslint.log

.prettierignore

@@ -0,0 +1,4 @@
+.netlify
+.next
+node_modules
+out

README.md

@@ -2,10 +2,10 @@
 
 A collection of popular layouts and patterns made with CSS:
 
-* 🎉Zero dependencies
-* 🎉No frameworks
-* 🎉No CSS hacks
-* 🎉Real use cases
+* 🎉 Zero dependencies
+* 🎉 No frameworks
+* 🎉 No CSS hacks
+* 🎉 Real use cases
 * Good practices (coming soon)
 * Accessibility Support (coming soon)
 
@@ -27,24 +27,24 @@ By composing them, you can have any possible layout that exists in the real life
 
 - Clone the project:
 
-```console
-$ git clone https://github.com/phuoc-ng/csslayout
+```shell
+$ git clone https://github.com/1milligram/csslayout
 ```
 
 - Install the dependencies:
 
-```console
+```shell
 $ cd csslayout
 $ npm install
 ```
 
 - Run it on the local:
 
-```console
-$ npm run dev-server
+```shell
+$ npm run dev
 ```
 
-Visit http://localhost:1234 to see it in action.
+Visit http://localhost:3000 to see it in action.
 
 ## Contributing
 
@@ -52,7 +52,7 @@ PRs are welcomed. If you thing there are any missing useful layouts or patterns,
 
 It's important to note that you should run the following command to lint the code:
 
-```console
+```shell
 $ npm run lint
 ```
 
@@ -66,23 +66,3 @@ Be my friend on
 * [Twitter](https://twitter.com/nghuuphuoc)
 * [dev.to](https://dev.to/phuocng)
 * [Github](https://github.com/phuoc-ng)
-
-## Products
-
-You might be interested in my products:
-
-_Products_
-* [Blur Page - A browser extension to hide sensitive information on a web page](https://blur.page)
-* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support)
-* [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io)
-* [Form Validation - The best validation library for JavaScript](https://formvalidation.io)
-* [Intersection Observer Examples - Practical, real world examples of Intersection Observer](https://intersectionobserver.io)
-* [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev)
-
-_Resources_
-* [1LOC - Favorite JavaScript utilities in single line of code](https://1loc.dev)
-* [CSS Layout - A collection of popular layouts and patterns made with CSS](https://csslayout.io)
-* [HTML DOM - How to manage HTML DOM with vanilla JavaScript](https://htmldom.dev)
-* [Responsive Design Patterns - A collection of patterns to create a responsive web page](https://responsive.page)
-* [Super tiny, quick tips, tricks and best practices of front-end development](https://getfrontend.tips)
-* [this VS that - The differences between ___ and ___ in the front-end development](https://thisthat.dev)

bin/generateScreenshot.ts

@@ -13,20 +13,20 @@ const main = () => {
     }
 
     const pattern = args[2];
-    
+
     (async () => {
-        const browser = await puppeteer.launch();    
-           
+        const browser = await puppeteer.launch();
+
         const page = await browser.newPage();
-        await page.goto(`http://localhost:1234/patterns/${pattern}`);
+        await page.goto(`http://localhost:3000/${pattern}`);
 
         await page.waitForSelector('.demo__live');
         const element = await page.$('.demo__live');
         await element.screenshot({
-            path: `public/assets/patterns/${pattern}.png`
+            path: `public/assets/patterns/${pattern}.png`,
         });
         await page.close();
-        
+
         await browser.close();
     })();
 };

client/App.tsx

@@ -1,30 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom';
-
-import './index.css';
-
-import ExplorePage from './pages/ExplorePage';
-import HomePage from './pages/HomePage';
-import PatternPage from './pages/PatternPage';
-
-const App = () => {
-    return (
-        <Router>
-            <RouteSwitch>
-                <Route exact={true} path='/'><HomePage /></Route>
-                <Route exact={true} path='/patterns'><ExplorePage /></Route>
-                <Route
-                    path='/patterns/:pattern'
-                    render={(props) => <PatternPage pattern={props.match.params.pattern as string} />} // tslint:disable-line
-                />
-            </RouteSwitch>
-        </Router>
-    );
-};
-
-export default App;

client/components/CoverCard.tsx

@@ -1,32 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-import Pattern from '../constants/Pattern';
-import slug from '../helpers/slug';
-import CoverLoader from '../loaders/CoverLoader';
-import './coverCard.css';
-
-interface CoverCardProps {
-    pattern: Pattern;
-}
-
-const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
-    return (
-        <Link
-            to={`/patterns/${slug(pattern)}`}
-            className="cover"
-        >
-            <CoverLoader pattern={pattern} />
-            <h4 className="cover__name">
-                {pattern}
-            </h4>
-        </Link>
-    );
-};
-
-export default CoverCard;

client/components/Heading.tsx

@@ -1,20 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import './heading.css';
-
-interface HeadingProps {
-    title: string;
-}
-
-const Heading: React.FC<HeadingProps> = ({ title }) => {
-    return (
-        <h3 className="heading">{title}</h3>
-    );
-};
-
-export default Heading;

client/components/Product.tsx

@@ -1,28 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import './product.css';
-import ProductModel from '../constants/ProductModel';
-import slug from '../helpers/slug';
-
-interface ProductProps {
-    product: ProductModel;
-}
-
-const Product: React.FC<ProductProps> = ({ product }) => {
-    return (
-        <div className="product" style={{ backgroundColor: product.themeColor }}>
-            <a href={product.url}>
-                <img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
-                <h3 className="product__name">{product.name}</h3>
-                <div className="product__desc">{product.description}</div>
-            </a>
-        </div>
-    );
-};
-
-export default Product;

client/components/RelatedPatterns.tsx

@@ -1,30 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import Pattern from '../constants/Pattern';
-import CoverCard from './CoverCard';
-import Heading from './Heading';
-
-interface RelatedPatternsProps {
-    patterns: Pattern[];
-}
-
-const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {
-    return (
-        <section>
-            <Heading title="Related patterns" />
-
-            <div style={{ alignItems: 'start', display: 'flex', flexWrap: 'wrap', padding: '24px' }}>
-                {
-                    patterns.map((pattern) => <CoverCard key={pattern} pattern={pattern} />)
-                }
-            </div>
-        </section>
-    );
-};
-
-export default RelatedPatterns;

client/components/SampleCode.tsx

@@ -1,27 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import highlight from '../helpers/highlight';
-
-interface SampleCodeProps {
-    code: string;
-    fullHeight?: boolean;
-    lang: string;
-}
-
-const SampleCode: React.FC<SampleCodeProps> = ({ code, fullHeight = false, lang }) => {
-    return code === ''
-            ? <></>
-            : (
-                <pre
-                    className={`language-${lang}`}
-                    dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
-                />
-            );
-};
-
-export default SampleCode;

client/components/ad.css

@@ -1,23 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-#carbonads {
-    border: 1px solid rgba(0, 0, 0, .3);
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-}
-.carbon-img {
-    display: block;
-    margin-bottom: 0.5rem;
-    text-align: center;
-}
-.carbon-poweredby {
-    display: block;
-    font-size: 0.75rem;
-    text-align: right;
-}
-.carbon-text {
-    display: block;
-}

client/components/heading.css

@@ -1,19 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.heading {
-    color: var(--color-gray-9);
-    display: grid;
-    font-size: 2rem;
-    grid-template-columns: 1fr auto 1fr;
-    grid-gap: 1rem;
-    text-align: center;
-}
-.heading::before,
-.heading::after {
-    align-self: center;
-    border-top: 0.25rem double var(--color-gray-9);
-    content: '';
-}

client/components/product.css

@@ -1,30 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.product {
-    border-radius: 0.5rem;
-    color: #FFF;
-    margin: 1rem 0;
-    overflow: hidden;
-    padding: 1rem;
-}
-.product a {
-    color: #FFF;
-    text-align: center;
-    text-decoration: none;
-}
-.product__logo {
-    display: flex;
-    height: auto;
-    margin: 0 auto;
-    width: 6rem;
-}
-.product__name {
-    font-size: 1.5rem;
-    margin: 1rem;
-}
-.product__desc {
-    text-align: center;
-}

client/constants/ProductList.ts

@@ -1,71 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import ProductModel from './ProductModel';
-
-const ProductList: ProductModel[] = [
-    {
-        name: 'Intersection Observer Examples',
-        url: 'https://intersectionobserver.io',
-        description: 'Practical, real world examples of Intersection Observer',
-        themeColor: '#024ca9',
-    },
-    {
-        name: 'Blur Page',
-        url: 'https://blur.page',
-        description: 'A browser extension to hide sensitive information on a web page',
-        themeColor: '#4e7fb8',
-    },
-    {
-        name: 'Check Browsers Support',
-        url: 'https://checkbrowsers.support',
-        description: 'A browser extension to check browser compatibility without leaving your tab',
-        themeColor: '#f33446',
-    },
-    {
-        name: 'Form Validation',
-        url: 'https://formvalidation.io',
-        description: 'The best validation library for JavaScript',
-        themeColor: '#014ba6',
-    },
-    {
-        name: 'React PDF Viewer',
-        url: 'https://react-pdf-viewer.dev',
-        description: 'A React component to view a PDF document',
-        themeColor: '#fb6303',
-    },
-    {
-        name: '1 LOC',
-        url: 'https://1loc.dev',
-        description: 'Favorite JavaScript utilities in single line of code',
-        themeColor: '#000200',
-    },
-    {
-        name: 'Front-end Tips',
-        url: 'https://getfrontend.tips',
-        description: 'Super tiny, quick tips, tricks and best practices of front-end development',
-        themeColor: '#2e2c74',
-    },
-    {
-        name: 'HTML DOM',
-        url: 'https://htmldom.dev',
-        description: 'How to manage HTML DOM with vanilla JavaScript',
-        themeColor: '#5b5d8a',
-    },
-    {
-        name: 'Responsive Design Patterns',
-        url: 'https://responsive.page',
-        description: 'A collection of patterns to create a responsive web page',
-        themeColor: '#43246d',
-    },
-    {
-        name: 'this VS that',
-        url: 'https://thisthat.dev',
-        description: 'The differences between _ and _ in the front-end development',
-        themeColor: '#414293',
-    },
-];
-
-export { ProductList };

client/constants/ProductModel.ts

@@ -1,11 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-export default interface ProductModel {
-    name: string;
-    url: string;
-    description: string;
-    themeColor: string;
-}

client/helpers/chunk.ts

@@ -1,10 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-function chunk<T>(arr: T[], size: number): T[][] {
-    return arr.reduce((acc, e, i) => (i % size ? acc[acc.length - 1].push(e) : acc.push([e]), acc), []);
-};
-
-export default chunk;

client/helpers/highlight.ts

@@ -1,16 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import Prism from 'prismjs';
-
-const highlight = (input: string, language: string) => {
-    const lang = language || 'html';
-    const value = Prism.highlight(input, Prism.languages[language], language);
-    const highlighted = value.replace('&amp;', '&').trim();
-
-    return `<code class="language-${lang}">${highlighted}</code>`;
-};
-
-export default highlight;

client/helpers/random.ts

@@ -1,8 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));
-
-export default random;

client/helpers/randomFromArray.ts

@@ -1,10 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-function randomFromArray<T>(array: T[]): T {
-    return array[Math.floor(Math.random() * array.length)];
-};
-
-export default randomFromArray;

client/helpers/randomIterms.ts

@@ -1,21 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-type Tuple<T> = [number, T[]];
-
-function randomItems<T>(arr: T[], count: number): T[] {
-    const result = arr.concat().reduce(
-        (p, _, __, arr) => {
-            const [a, b] = p;
-            return (a < count)
-                    ? [a + 1, b.concat(arr.splice(Math.random() * arr.length | 0, 1))]
-                    : p;
-        },
-        [0, []] as Tuple<T>
-    );
-    return (result as Tuple<T>)[1];
-};
-
-export default randomItems;

client/helpers/shuffe.ts

@@ -1,11 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-const shuffe = (array: number[]) => {
-    array.sort(() => Math.random() - 0.5);
-    return array;
-};
-
-export default shuffe;

client/helpers/slug.ts

@@ -1,8 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-const slug = (item: string) => item.toLowerCase().split(' ').join('-');
-
-export default slug;

client/hooks/useInterval.ts

@@ -1,21 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import { useEffect } from 'react';
-
-const useInterval = (callback: () => void, delay?: number) => {
-    useEffect(
-        () => {
-            const handler = () => callback();
-            if (delay !== null) {
-                const id = setInterval(handler, delay);
-                return () => clearInterval(id);
-            }
-        },
-        [delay],
-    );
-};
-
-export default useInterval;

client/index.css

@@ -1,179 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-:root {
-    --background-color: #e7d900;
-    --color-blue-6: #2563EB;
-    --color-gray-2: #E5E7EB;
-    --color-gray-5: #6B7280;
-    --color-gray-8: #27272A;
-    --color-gray-9: #111827;
-} 
-body {
-    font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    margin: 0;
-}
-* {
-    box-sizing: border-box;
-}
-a {
-    text-decoration: none;
-}
-
-::-webkit-scrollbar {
-    height: 0.5rem;
-    width: 0.5rem;
-}
-::-webkit-scrollbar-thumb {
-    background-color: var(--color-gray-5);
-    border-radius: 0.5rem;
-}
-::-webkit-scrollbar-track {
-    background-color: transparent;
-    border-radius: 0.5rem;
-}
-
-/* Layout */
-.container {
-    margin: 0 auto;
-    max-width: 80rem;
-    padding: 0 1rem;
-}
-.main {
-    flex: 1;
-    overflow: hidden;
-    padding: 4rem 0;
-}
-.sidebar {
-    display: none;
-    padding: 4rem 0;
-}
-
-/* Sidebar */
-.sidebar__inner {    
-    position: sticky;
-    top: 1rem;
-}
-
-/* Hero */
-.hero {
-    --current-background-color: var(--background-color);
-    background: var(--background-color);
-    display: flex;
-    justify-content: center;
-    padding-bottom: 1rem;
-}
-.hero__logo {
-    display: flex;
-    justify-content: center;
-}
-.hero__logo img {
-    object-fit: cover;
-    width: 16rem;
-}
-.hero__heading {
-    color: var(--color-gray-9);
-    font-size: 2rem;
-    line-height: 1.5;
-    text-align: center;
-    text-transform: uppercase;
-}
-.hero__subheading {
-    color: var(--color-gray-9);
-    font-size: 1.5rem;
-    line-height: 1.5;
-    text-align: center;
-}
-
-/*
-Prism theme
-Credit to https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/css/prism.css
-*/
-pre {
-    background: var(--color-gray-8);
-    border: none;
-    border-radius: 0px;
-    box-shadow: none;
-    color: #FFF;
-    font-family: "Source Code Pro", monospace;
-    font-size: 1rem;
-    line-height: 1.5;
-    margin: 0px;
-    overflow-x: auto;
-    padding: 1rem;
-    white-space: pre;
-}
-
-.token.tag,
-.token.class-name,
-.token.selector,
-.token.selector .class,
-.token.function {
-    color: #E879F9;
-}
-
-.token.attr-name,
-.token.keyword,
-.token.rule,
-.token.operator,
-.token.pseudo-class,
-.token.important {
-    color: #22D3EE;
-}
-
-.token.attr-value,
-.token.class,
-.token.string,
-.token.number,
-.token.unit,
-.token.color {
-    color: #BEF264;
-}
-
-.token.punctuation,
-.token.module,
-.token.property {
-    color: #BAE6FD;
-}
-
-.token.atapply .token:not(.rule):not(.important) {
-    color: inherit;
-}
-
-.language-shell .token:not(.comment) {
-    color: inherit;
-}
-
-.language-css .token.function {
-    color: inherit;
-}
-
-.token.comment {
-    color: #A1A1AA;
-}
-
-/* Responsive */
-@media (min-width: 640px) {
-    .content {
-        display: flex;
-    }
-    .sidebar {
-        display: block;
-        flex: 0 0 8rem;
-        margin-left: 0.5rem;
-    }
-}
-@media (min-width: 768px) {
-    .sidebar {
-        flex-basis: 12rem;
-        margin-left: 1rem;
-    }
-}
-@media (min-width: 1024px) {
-    .sidebar {
-        flex-basis: 16rem;
-        margin-left: 2rem;
-    }
-}

client/index.html

@@ -1,24 +0,0 @@
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="author" content="Nguyen Huu Phuoc" />
-    <meta property="og:site_name" content="CSS Layout" />
-    <meta property="og:type" content="website" />
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:creator" content="@nghuuphuoc" />
-    <meta property="twitter:site" content="@nghuuphuoc" />
-    <link href="/assets/favicon.png" rel="icon">
-    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Lato&display=swap" rel="stylesheet">
-</head>
-<body>
-    <div id="root"></div>
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139616701-3"></script>
-<script>
-window.dataLayer = window.dataLayer || [];
-function gtag(){dataLayer.push(arguments);}
-gtag('js', new Date());
-gtag('config', 'UA-139616701-3');
-</script>
-</body>
-</html>

client/index.tsx

@@ -1,14 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { hydrate, render } from 'react-dom';
-
-import App from './App';
-
-const rootElement = document.getElementById('root');
-rootElement.hasChildNodes()
-    ? hydrate(<App />, rootElement)
-    : render(<App />, rootElement);

client/layouts/DetailsLayout.tsx

@@ -1,67 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Ad from '../components/Ad';
-import Product from '../components/Product';
-import { ProductList } from '../constants/ProductList';
-import Pattern from '../constants/Pattern';
-import randomItems from '../helpers/randomIterms';
-import slug from '../helpers/slug';
-import CoverLoader from '../loaders/CoverLoader';
-import Layout from './Layout';
-
-interface DetailsLayoutProps {
-    pattern: Pattern;
-}
-
-const DetailsLayout: React.FC<DetailsLayoutProps> = ({ pattern, children }) => {
-    const products = React.useMemo(() => randomItems(ProductList, 3), []);
-    const patternSlug = slug(pattern);
-
-    return (
-        <Layout>
-            <Helmet>
-                <title>CSS Layout ∙ {pattern}</title>
-                <meta name="title" content={`CSS Layout ∙ ${pattern}`} />
-
-                <meta property="og:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
-                <meta property="og:title" content={`CSS Layout ∙ ${pattern}`} />
-                <meta property="og:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
-
-                <meta property="twitter:image" content={`https://csslayout.io/assets/patterns/${patternSlug}.png`} />
-                <meta property="twitter:title" content={`CSS Layout ∙ ${pattern}`} />
-                <meta property="twitter:url" content={`https://csslayout.io/patterns/${patternSlug}`} />
-            </Helmet>
-            <div className="hero">
-                <div className="container">
-                    <div className="hero__logo">
-                        <CoverLoader pattern={pattern} />
-                    </div>
-                    <h1 className="hero__heading">{pattern}</h1>
-                </div>
-            </div>
-            <div className="container">
-                <div className="content">
-                    <main className="main">
-                        {children}
-                    </main>
-                    <div className="sidebar">
-                        <div className="sidebar__inner">
-                            <Ad />
-                            {
-                                products.map(product => <Product key={product.name} product={product} />)
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
-};
-
-export default DetailsLayout;

client/layouts/Footer.tsx

@@ -1,86 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import './footer.css';
-
-const Footer: React.FC<{}> = () => {
-    return (
-        <footer className="footer">
-            <div className="container">
-                <div className="footer__about">
-                    <div className="footer__author">
-                        <div>© 2019-{new Date().getFullYear()} Nguyen Huu Phuoc.</div>
-                        <div>All rights reserved</div>
-                    </div>
-                    <a className="footer__social" href="https://twitter.com/nghuuphuoc" rel="noopener noreferrer" target="_blank">
-                        <svg height="24" version="1.1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z" strokeLinecap="round" fill="none" stroke="currentColor" strokeLinejoin="round"></path>
-                        </svg>
-                    </a>
-                    <a className="footer__social" href="https://github.com/phuoc-ng" rel="noopener noreferrer" target="_blank">
-                        <svg height="24" version="1.1" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M12,.5A11.5,11.5,0,0,0,8.365,22.914c.574.1.756-.237.756-.541,0-.275.006-1.037,0-2-3.2.694-3.861-1.515-3.861-1.515a3.043,3.043,0,0,0-1.276-1.682c-1.044-.714.078-.7.078-.7a2.414,2.414,0,0,1,1.762,1.184,2.448,2.448,0,0,0,3.346.956A2.45,2.45,0,0,1,9.9,17.084c-2.553-.292-5.238-1.278-5.238-5.686A4.447,4.447,0,0,1,5.847,8.312a4.126,4.126,0,0,1,.112-3.043s.967-.309,3.162,1.18a10.883,10.883,0,0,1,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18a4.131,4.131,0,0,1,.114,3.043A4.442,4.442,0,0,1,19.337,11.4c0,4.42-2.689,5.391-5.251,5.674a2.727,2.727,0,0,1,.787,2.12v3.184c0,.307.186.647.77.536A11.5,11.5,0,0,0,12,.5Z" strokeLinecap="round" fill="none" stroke="currentColor" strokeLinejoin="round"></path>
-                        </svg>
-                    </a>
-                </div>
-
-                <div className="footer__grid">
-                    <div className="footer__col">
-                        <ul className="footer__products">
-                            <li className="footer__product">
-                                <a href="https://blur.page" rel="noopener noreferrer" target="_blank" title="A browser extension to hide sensitive element on page">Blur Page</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://checkbrowsers.support" rel="noopener noreferrer" target="_blank" title="A browser extension to check browser compatibility without leaving your tab">Check Browsers Support</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://fakenumbers.io" rel="noopener noreferrer" target="_blank" title="A JavaScript library to fake a number">Fake Numbers</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://intersectionobserver.io" rel="noopener noreferrer" target="_blank" title="Practical, real world examples of Intersection Observer">Intersection Observer Examples</a>
-                            </li>                            
-                        </ul>
-                    </div>
-                    <div className="footer__col">
-                        <ul className="footer__products">                            
-                            <li className="footer__product">
-                                <a href="https://formvalidation.io" rel="noopener noreferrer" target="_blank" title="The best validation library for JavaScript">Form Validation</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://react-pdf-viewer.dev" rel="noopener noreferrer" target="_blank" title="A PDF viewer made for React">React PDF Viewer</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://1loc.dev" rel="noopener noreferrer" target="_blank" title="Favorite JavaScript utilities in single line of code">1 LOC (4.2k ★)</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://csslayout.io" rel="noopener noreferrer" target="_blank" title="A collection of popular layouts and patterns made with CSS">CSS Layout (3.5k ★)</a>
-                            </li>                            
-                        </ul>
-                    </div>
-                    <div className="footer__col">
-                        <ul className="footer__products">
-                            <li className="footer__product">
-                                <a href="https://getfrontend.tips" rel="noopener noreferrer" target="_blank" title="Super tiny, quick tips, tricks and best practices of front-end development">Front-end Tips</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://htmldom.dev" rel="noopener noreferrer" target="_blank" title="Common tasks of managing HTML DOM with native API">HTML DOM (3.7k ★)</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://responsive.page" rel="noopener noreferrer" target="_blank" title="A collection of patterns to create a responsive web page">Responsive Design Patterns</a>
-                            </li>
-                            <li className="footer__product">
-                                <a href="https://thisthat.dev" rel="noopener noreferrer"  target="_blank" title="What is the difference between ___ and ___ in the front-end development?">this VS that (750 ★)</a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </footer>
-    );
-};
-
-export default Footer;

client/layouts/Header.tsx

@@ -1,43 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-import './header.css';
-
-const STARS_KEY = 'stars';
-
-const Header: React.FC<{}> = () => {
-    const stars = window.localStorage.getItem(STARS_KEY) || '';
-    const [totalStars, setTotalStars] = React.useState(stars);
-
-    React.useEffect(() => {
-        if (window.location.pathname === '/' || stars === '') {
-            fetch('https://api.github.com/repos/phuoc-ng/csslayout')
-                .then(res => res.json())
-                .then(data => setTotalStars(data.stargazers_count))
-                .catch(console.log);
-        }
-    }, []);
-
-    React.useEffect(() => window.localStorage.setItem(STARS_KEY, totalStars), [totalStars]);
-
-    return (
-        <header className="header">
-            <div className="container">
-                <div className="header__nav">
-                    <Link to="/">
-                        <img src="/assets/logo.svg" />
-                    </Link>
-                    <Link to="/patterns">Patterns</Link>
-                    <a href="https://github.com/phuoc-ng/csslayout">{totalStars}★</a>
-                </div>
-            </div>
-        </header>
-    );
-};
-
-export default Header;

client/layouts/Layout.tsx

@@ -1,25 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import Footer from './Footer';
-import Header from './Header';
-
-const Layout: React.FC<{}> = ({ children }) => {
-    React.useEffect(() => {
-        window.scrollTo(0, 0);
-    }, []);
-
-    return (
-        <>
-            <Header />
-            {children}
-            <Footer />
-        </>
-    );
-};
-
-export default Layout;

client/layouts/footer.css

@@ -1,47 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.footer {
-    padding: 2rem 0;
-}
-.footer__about {
-    border-bottom: 1px solid var(--color-gray-2);
-    color: var(--color-gray-9);
-    display: flex;
-    margin-bottom: 1rem;
-    padding-bottom: 1rem;
-}
-.footer__author {
-    flex: 1;
-}
-.footer__social {
-    margin-left: 0.5rem;
-    color: var(--color-gray-5);
-}
-.footer__grid {
-    margin-left: -1rem;
-    margin-right: -1rem;
-}
-.footer__col {
-    flex: 1;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-.footer__products {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-.footer__product {
-    margin: 0.25rem 0;
-}
-.footer__product a {
-    color: var(--color-gray-5);
-}
-@media (min-width: 640px) {
-    .footer__grid {
-        display: flex;
-    }
-}

client/layouts/header.css

@@ -1,21 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.header {
-    background-color: var(--background-color);
-}
-.header__nav {
-    align-items: center;
-    display: flex;
-    font-size: 1.2rem;
-}
-.header__nav a:first-child {
-    margin-left: 0;
-    margin-right: auto;
-}
-.header__nav a {
-    color: var(--color-gray-9);
-    margin-left: 1rem;
-}

client/loaders/CoverLoader.tsx

@@ -1,18 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import loadable, { LoadableComponent } from '@loadable/component';
-
-import Pattern from '../constants/Pattern';
-
-interface CoverLoaderProps {
-    pattern: Pattern;
-}
-
-const slug = (item: string) => item.toLowerCase().split(' ').join('-');
-
-const CoverLoader: LoadableComponent<CoverLoaderProps> = loadable((props: CoverLoaderProps) => import(`../patterns/${slug(props.pattern)}/Cover`));
-
-export default CoverLoader;

client/loaders/DetailsLoader.tsx

@@ -1,53 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import loadable, { LoadableComponent } from '@loadable/component';
-import * as React from 'react';
-
-import './spinner.css';
-
-interface DetailsLoaderProps {
-    pattern: string;
-}
-
-const slug = (item: string) => item.toLowerCase().split(' ').join('-');
-
-// In order to create a link to another page that is dynamically loaded (via <Link to="...">),
-// the page chunks have to be loadable by @loadable.
-// We have to add a magic comment /* #__LOADABLE__ */ here
-// and the following plugin to Babel's settings (.babelrc):
-//  {
-//      "plugins": ["@loadable/babel-plugin"],
-//  }
-const loadDetails = /* #__LOADABLE__ */ (props: DetailsLoaderProps) => import(`../patterns/${slug(props.pattern)}/Details`);
-
-const DetailsLoader: LoadableComponent<DetailsLoaderProps> = loadable(loadDetails, {
-    fallback: (
-        <div
-            style={{
-                alignItems: 'center',
-                display: 'flex',
-                height: '100%',
-                justifyContent: 'center',
-                width: '100%',
-            }}
-        >
-            <svg className="spinner" width="64px" height="64px" viewBox="0 0 32 32">
-                <circle
-                    cx="16"
-                    cy="16"
-                    fill="none"
-                    r="12"
-                    stroke="rgba(0, 0, 0, 0.4)"
-                    strokeDasharray={Math.PI * 2 * 9}
-                    strokeLinecap="round"
-                    strokeWidth="4"
-                />
-            </svg>
-        </div>
-    ),
-});
-
-export default DetailsLoader;

client/loaders/spinner.css

@@ -1,21 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.spinner {
-    animation-duration: 750ms;
-    animation-name: viewer-spinner-transform;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    transition-property: transform;
-}
-
-@keyframes viewer-spinner-transform {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}

client/pages/ExplorePage.tsx

@@ -1,201 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Ad from '../components/Ad';
-import CoverCard from '../components/CoverCard';
-import Heading from '../components/Heading';
-import Product from '../components/Product';
-import Pattern from '../constants/Pattern';
-import { ProductList } from '../constants/ProductList';
-import Layout from '../layouts/Layout';
-import './explorePage.css';
-
-const ExplorePage = () => {
-    const numPatterns = Object.keys(Pattern).length;
-
-    return (
-        <Layout>
-            <Helmet>
-                <title>CSS Layout ∙ Patterns</title>
-                <meta name="title" content="CSS Layout ∙ Patterns" />
-                <meta name="description" content="CSS layouts and patterns" />
-                <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
-
-                <meta property="og:description" content="CSS layouts and patterns" />
-                <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
-                <meta property="og:title" content="CSS Layout ∙ Patterns" />
-                <meta property="og:url" content="https://csslayout.io/patterns" />
-
-                <meta property="twitter:description" content="CSS layouts and patterns" />
-                <meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
-                <meta property="twitter:title" content="CSS Layout ∙ Patterns" />
-                <meta property="twitter:url" content="https://csslayout.io/patterns" />
-            </Helmet>
-            <div className="hero">
-                <div className="container">
-                    <h1 className="hero__heading">Collection of {numPatterns} patterns</h1>
-                    <h2 className="hero__subheading">Covers are made with CSS only. Inspect them!</h2>
-                </div>
-            </div>
-
-            <div className="container">
-                <div className="content">
-                    <main className="main">
-                        <section>
-                            <Heading title="Layout" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.CardLayout} />
-                                <CoverCard pattern={Pattern.HolyGrail} />
-                                <CoverCard pattern={Pattern.MasonryGrid} />
-                                <CoverCard pattern={Pattern.SameHeightColumns} />
-                                <CoverCard pattern={Pattern.Sidebar} />
-                                <CoverCard pattern={Pattern.SimpleGrid} />
-                                <CoverCard pattern={Pattern.SplitScreen} />
-                                <CoverCard pattern={Pattern.StickyFooter} />
-                                <CoverCard pattern={Pattern.StickyHeader} />
-                                <CoverCard pattern={Pattern.StickySections} />
-                            </div>
-                        </section>
-
-                        <section>
-                            <Heading title="Navigation" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.Breadcrumb} />
-                                <CoverCard pattern={Pattern.CircularNavigation} />
-                                <CoverCard pattern={Pattern.DotNavigation} />
-                                <CoverCard pattern={Pattern.Drawer} />
-                                <CoverCard pattern={Pattern.Dropdown} />
-                                <CoverCard pattern={Pattern.FullScreenMenu} />
-                                <CoverCard pattern={Pattern.MegaMenu} />
-                                <CoverCard pattern={Pattern.Menu} />
-                                <CoverCard pattern={Pattern.NestedDropdowns} />
-                                <CoverCard pattern={Pattern.Pagination} />
-                                <CoverCard pattern={Pattern.PreviousNextButtons} />
-                                <CoverCard pattern={Pattern.SplitNavigation} />
-                                <CoverCard pattern={Pattern.Tab} />
-                                <CoverCard pattern={Pattern.Wizard} />
-                            </div>
-                        </section>
-
-                        <section>
-                            <Heading title="Input" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.ButtonWithIcon} />
-                                <CoverCard pattern={Pattern.Chip} />
-                                <CoverCard pattern={Pattern.CustomCheckboxButton} />
-                                <CoverCard pattern={Pattern.CustomRadioButton} />
-                                <CoverCard pattern={Pattern.FloatingLabel} />
-                                <CoverCard pattern={Pattern.InputAddon} />
-                                <CoverCard pattern={Pattern.RadioButtonGroup} />
-                                <CoverCard pattern={Pattern.RadioSwitch} />
-                                <CoverCard pattern={Pattern.Rating} />
-                                <CoverCard pattern={Pattern.SearchBox} />
-                                <CoverCard pattern={Pattern.Slider} />
-                                <CoverCard pattern={Pattern.SpinButton} />
-                                <CoverCard pattern={Pattern.StepperInput} />
-                                <CoverCard pattern={Pattern.Switch} />
-                                <CoverCard pattern={Pattern.TogglePasswordVisibility} />
-                                <CoverCard pattern={Pattern.UploadButton} />
-                            </div>
-                        </section>
-
-                        <section>
-                            <Heading title="Display" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.Accordion} />
-                                <CoverCard pattern={Pattern.ArrowButtons} />
-                                <CoverCard pattern={Pattern.Avatar} />
-                                <CoverCard pattern={Pattern.AvatarList} />
-                                <CoverCard pattern={Pattern.Badge} />
-                                <CoverCard pattern={Pattern.Card} />
-                                <CoverCard pattern={Pattern.Centering} />
-                                <CoverCard pattern={Pattern.CloseButton} />
-                                <CoverCard pattern={Pattern.ColorSwatch} />
-                                <CoverCard pattern={Pattern.ConcaveCorners} />
-                                <CoverCard pattern={Pattern.CookieBanner} />
-                                <CoverCard pattern={Pattern.CornerRibbon} />
-                                <CoverCard pattern={Pattern.CurvedBackground} />
-                                <CoverCard pattern={Pattern.DiagonalSection} />
-                                <CoverCard pattern={Pattern.DockedAtCorner} />
-                                <CoverCard pattern={Pattern.DotLeader} />
-                                <CoverCard pattern={Pattern.DropArea} />
-                                <CoverCard pattern={Pattern.DropCap} />
-                                <CoverCard pattern={Pattern.FadingLongSection} />
-                                <CoverCard pattern={Pattern.FeatureComparison} />
-                                <CoverCard pattern={Pattern.FeatureList} />
-                                <CoverCard pattern={Pattern.FixedAtCorner} />
-                                <CoverCard pattern={Pattern.FixedAtSide} />
-                                <CoverCard pattern={Pattern.FolderStructure} />
-                                <CoverCard pattern={Pattern.FullBackground} />
-                                <CoverCard pattern={Pattern.InitialAvatar} />
-                                <CoverCard pattern={Pattern.InvertedCorners} />
-                                <CoverCard pattern={Pattern.KeyboardShortcut} />
-                                <CoverCard pattern={Pattern.LayeredCard} />
-                                <CoverCard pattern={Pattern.LinedPaper} />
-                                <CoverCard pattern={Pattern.MediaObject} />
-                                <CoverCard pattern={Pattern.OverlayPlayButton} />
-                                <CoverCard pattern={Pattern.PriceTag} />
-                                <CoverCard pattern={Pattern.PricingTable} />
-                                <CoverCard pattern={Pattern.PropertyList} />
-                                <CoverCard pattern={Pattern.QuestionsAndAnswers} />
-                                <CoverCard pattern={Pattern.Ribbon} />
-                                <CoverCard pattern={Pattern.Separator} />
-                                <CoverCard pattern={Pattern.StackedCards} />
-                                <CoverCard pattern={Pattern.StampBorder} />
-                                <CoverCard pattern={Pattern.Statistic} />
-                                <CoverCard pattern={Pattern.StatusLight} />
-                                <CoverCard pattern={Pattern.StickyTableColumn} />
-                                <CoverCard pattern={Pattern.StickyTableHeaders} />
-                                <CoverCard pattern={Pattern.Teardrop} />
-                                <CoverCard pattern={Pattern.ThreeDimensionsCard} />
-                                <CoverCard pattern={Pattern.Timeline} />
-                                <CoverCard pattern={Pattern.TreeDiagram} />
-                                <CoverCard pattern={Pattern.TriangleButtons} />
-                                <CoverCard pattern={Pattern.VideoBackground} />
-                                <CoverCard pattern={Pattern.Voting} />
-                                <CoverCard pattern={Pattern.Watermark} />
-                                <CoverCard pattern={Pattern.ZigzagTimeline} />
-                            </div>
-                        </section>
-
-                        <section>
-                            <Heading title="Feedback" />
-
-                            <div className="explore__collection">
-                                <CoverCard pattern={Pattern.Modal} />
-                                <CoverCard pattern={Pattern.Notification} />
-                                <CoverCard pattern={Pattern.PopoverArrow} />
-                                <CoverCard pattern={Pattern.ProgressBar} />
-                                <CoverCard pattern={Pattern.RadialProgressBar} />
-                                <CoverCard pattern={Pattern.ResizableElement} />
-                                <CoverCard pattern={Pattern.PresenceIndicator} />
-                                <CoverCard pattern={Pattern.Tooltip} />
-                                <CoverCard pattern={Pattern.ValidationIcon} />
-                            </div>
-                        </section>
-                    </main>
-
-                    <div className="sidebar">
-                        <div className="sidebar__inner">
-                            <Ad />
-                            {
-                                ProductList.map(product => <Product key={product.name} product={product} />)
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Layout>
-    );
-};
-
-export default ExplorePage;

client/pages/HomePage.tsx

@@ -1,117 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import './homePage.css';
-
-import CoverCard from '../components/CoverCard';
-import Pattern from '../constants/Pattern';
-import chunk from '../helpers/chunk';
-import Layout from '../layouts/Layout';
-
-const NUM_SLIDES = 3;
-
-const HomePage = () => {
-    const numPatterns = Object.keys(Pattern).length;
-
-    const numPatternsPerSlide = Math.floor(numPatterns / NUM_SLIDES);
-    const groups = chunk(Object.entries(Pattern).map(([_, v]) => v).slice(0, NUM_SLIDES * numPatternsPerSlide), numPatternsPerSlide);
-
-    return (
-        <Layout>
-            <Helmet>
-                <title>CSS Layout</title>
-                <meta name="title" content="CSS Layout" />
-                <meta name="description" content="CSS layouts and patterns" />
-                <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
-                
-                <meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
-                <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />                
-                <meta property="og:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
-                <meta property="og:url" content="https://csslayout.io" />
-                
-                <meta property="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
-                <meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />                
-                <meta property="twitter:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
-                <meta property="twitter:url" content="https://csslayout.io" />
-            </Helmet>
-            <div className="hero">
-                <div className="container">
-                    <div className="hero__logo"><img src="/assets/logo.png" alt="CSS Layout" /></div>
-                    <h1 className="home__heading">CSS Layout</h1>
-                    <h2 className="hero__subheading">Popular Layouts & patterns made with CSS</h2>
-                </div>
-            </div>
-
-            <div className="container">
-                <div className="home__features">
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M0.500 12.000 A11.500 11.500 0 1 0 23.500 12.000 A11.500 11.500 0 1 0 0.500 12.000 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4.5,14.5v-4a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4.5 12.5L6 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5 14.5L8.5 9.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5,9.5h.75a1.25,1.25,0,0,1,0,2.5H8.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M10.5 14.5L9 12" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M14.5,14.5h-1a1,1,0,0,1-1-1v-3a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.5 12.5L14.5 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M18.5,14.5h-1a1,1,0,0,1-1-1v-3a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.5 12.5L18.5 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">
-                            Zero Dependencies
-                        </div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M0.500 2.500 L23.500 2.500 L23.500 21.500 L0.500 21.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.5 7.5L23.5 7.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4,4.75A.25.25,0,1,1,3.75,5,.25.25,0,0,1,4,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7,4.75A.25.25,0,1,1,6.75,5,.25.25,0,0,1,7,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M10,4.75A.25.25,0,1,1,9.75,5,.25.25,0,0,1,10,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5,11.5a2,2,0,0,0-2,2v1a2,2,0,0,0,2,2" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.5,11.5h-1a1,1,0,0,0-1,1c0,1.5,2,1.5,2,3a1,1,0,0,1-1,1h-1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.5,11.5h-1a1,1,0,0,0-1,1c0,1.5,2,1.5,2,3a1,1,0,0,1-1,1h-1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">No Frameworks</div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M13.514 23.5L10.514 23.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M14.514 21.5L9.514 21.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.014 0.5L12.014 3.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.528 4.015L5.65 6.136" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M20.499 4.015L18.378 6.136" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.514 12.5L3.514 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M23.514 12.5L20.514 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M18.014,12.5a6,6,0,1,0-9.429,4.917,1,1,0,0,1,.429.821V19a.5.5,0,0,0,.5.5h5a.5.5,0,0,0,.5-.5v-.763a1,1,0,0,1,.429-.821A5.98,5.98,0,0,0,18.014,12.5Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">
-                            No CSS Hacks
-                        </div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M9.000 9.500 A3 1.5 0 1 0 15.000 9.500 A3 1.5 0 1 0 9.000 9.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.000 3.500 A3 1.5 0 1 0 15.000 3.500 A3 1.5 0 1 0 9.000 3.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.000 6.500 A3 1.5 0 1 0 22.000 6.500 A3 1.5 0 1 0 16.000 6.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M2.500 6.500 A3 1.5 0 1 0 8.500 6.500 A3 1.5 0 1 0 2.500 6.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.737 4.484L7.582 5.421" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.694 5.541L14.261 4.483" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.074,7.381,1.1,8.239a1,1,0,0,0-.6.917v6.7a1,1,0,0,0,.586.91L11.1,21.32a1,1,0,0,0,.8.013l10.983-4.577a1,1,0,0,0,.615-.923V9.156a1,1,0,0,0-.6-.917L21.2,7.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M11.5 13.5L11.5 21.408" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M23.315 8.577L11.5 13.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M11.5 13.5L0.681 8.582" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">Real Use Cases</div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M20,15.659h0a1.5,1.5,0,1,1,0,3H19a1.5,1.5,0,0,1,1.5,1.5c0,.829-.672,1-1.5,1H12.5c-2.851,0-3.5-.5-7-1v-8.5c2.45,0,6.5-4.5,6.5-8.5,0-1.581,2.189-2.17,3,.719.5,1.781-1,5.281-1,5.281h8a1.5,1.5,0,0,1,1.5,1.5c0,.829-.672,2-1.5,2H21a1.5,1.5,0,0,1,0,3H20" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.5 10.159H5.5V22.159H0.5z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.25 19.659L3.25 19.659" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.25,19.659a.25.25,0,1,0,.25.25.25.25,0,0,0-.25-.25" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">Good Practices <div className="home__soon">soon</div></div>
-                    </div>
-                    <div className="home__feature">
-                        <div className="home__icon">
-                            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M7,6,8.362,16.44a1,1,0,0,0,1.184.853C11.644,16.882,16.233,16,17,16c1,0,1.5,5.5,2,5.5a11.343,11.343,0,0,0,2-.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7.389,12.557A5.645,5.645,0,0,0,3,18a5.487,5.487,0,0,0,5.4,5.5A5.66,5.66,0,0,0,14,18V16.451" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.456,3.227A2.728,2.728,0,1,1,6.728.5,2.728,2.728,0,0,1,9.456,3.227Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7.389 12.557L13.5 11" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
-                        </div>
-                        <div className="home__title">Accessibility Support <div className="home__soon">soon</div></div>
-                    </div>
-                </div>
-
-                <section className="home__patterns">
-                    <div className="home__overlay">
-                        <div className="home__heading">{numPatterns} patterns</div>
-                        <Link to="/patterns" className="home__explore">Explore the collection</Link>
-                    </div>
-                    <div className="home__sliders">
-                    {
-                        groups.map((patterns, index) => (
-                            <div className="home__slide" key={index}>
-                            {
-                                patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
-                            }
-                            </div>
-                        ))
-                    }
-                    </div>
-                </section>
-            </div>
-        </Layout>
-    );
-};
-
-export default HomePage;

client/pages/PatternPage.tsx

@@ -1,29 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import Pattern from '../constants/Pattern';
-import DetailsLoader from '../loaders/DetailsLoader';
-
-interface PatternPageProps {
-    pattern: string;
-}
-
-const capitalizeFirstLetter = (s: string) => `${s.charAt(0).toUpperCase()}${s.slice(1)}`;
-
-const PatternPage: React.FC<PatternPageProps> = ({ pattern }) => {
-    const name = pattern.split('-').map((s) => capitalizeFirstLetter(s)).join('');
-    const patterns = Object.keys(Pattern);
-
-    return (
-        patterns.indexOf(name) === -1
-            // TODO: Render 404
-            ? <div>404</div>
-            : <DetailsLoader pattern={pattern} />
-    );
-};
-
-export default PatternPage;

client/pages/explorePage.css

@@ -1,9 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.explore__collection {
-    display: flex;
-    flex-wrap: wrap;
-}

client/pages/homePage.css

@@ -1,102 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
- 
-.home__features {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 1rem -1rem;
-}
-.home__feature {
-    padding: 1rem;
-    text-align: center;
-    width: 100%;
-}
-.home__icon {
-    color: var(--color-blue-6);
-    margin-bottom: 1rem;
-}
-.home__title {
-    color: var(--color-gray-5);
-    font-size: 1.5rem;
-    font-weight: 600;
-}
-
-.home__patterns {
-    height: 80rem;
-    overflow: hidden;
-    position: relative;
-}
-
-.home__overlay {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 10;
-}
-.home__heading {
-    color: var(--color-gray-9);
-    font-size: 3rem;
-    font-weight: 600;
-    margin: 1rem;
-    text-align: center;
-}
-.home__explore {
-    background-color: var(--background-color);
-    border-radius: 0.4rem;
-    color: var(--color-gray-9);
-    font-size: 1.5rem;
-    font-weight: 600;
-    padding: 1rem 2rem;
-}
-
-.home__sliders {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    opacity: 0.8;
-}
-.home__slide {
-    animation: slide 20s linear infinite;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    will-change: transform;
-}
-
-.home__soon {
-    background: #1e1d6e;
-    border-radius: 9999px;
-    color: #fff;
-    display: inline-block;
-    padding: 0.125rem 1rem;
-}
-
-@keyframes slide {
-    from {
-        transform: translateY(0);
-    }
-    to {
-        transform: translateY(-100%);
-    }
-}
-
-/* Responsive */
-@media (min-width: 640px) {
-    .home__feature {
-        width: 50%;
-    }
-}
-@media (min-width: 1024px) {
-    .home__feature {
-        width: 33.333333%;
-    }
-}

client/patterns/accordion/Details.tsx

@@ -1,185 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-interface ItemProps {
-    index: number;
-    title: React.ReactNode;
-}
-
-const Details: React.FC<{}> = () => {
-    const [activeItem, setActiveItem] = React.useState(1);
-
-    const Item: React.FC<ItemProps> = ({ index, title, children }) => {
-        const isOpened = (index === activeItem);
-        const click = () => setActiveItem(isOpened ? -1 : index);
-        return (
-            <>
-                <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            padding: '16px',
-                        }}
-                        onClick={click}
-                    >
-                        <div style={{ marginRight: '12px' }}>
-                            <Triangle size={8} corner={isOpened ? 'b' : 'r'} />
-                        </div>
-                        <div style={{ flex: 1 }}>{title}</div>
-                    </div>
-                    <div
-                        style={{
-                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                            display: isOpened ? 'block' : 'none',
-                            padding: '16px',
-                        }}
-                    >
-                        {children}
-                    </div>
-                </div>
-            </>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.Accordion}>
-            <Helmet>
-                <meta name="description" content="Create an accordion with CSS flexbox" />
-                <meta name="og:description" content="Create an accordion with CSS flexbox" />
-                <meta name="twitter:description" content="Create an accordion with CSS flexbox" />
-                <meta name="keywords" content="css accordion, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Container -->
-<div class="accordion">
-    <!-- Each accordion item -->
-    <div class="accordion__item">
-        <!-- Heading -->
-        <div class="accordion__header">
-            <!-- The toggle icon -->
-            <div class="accordion__toggle">...</div>
-
-            <!-- The title -->
-            <div class="accordion__title">
-                ...
-            </div>
-        </div>
-
-        <!-- The content -->
-        <div class="accordion__content">
-            ...
-        </div>
-    </div>
-
-    <!-- Repeat other item -->
-    ...
-</div>
-`}
-css={`
-.accordion {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-bottom-color: transparent;
-    border-radius: 4px;
-}
-
-.accordion__item {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-}
-
-.accordion__header {
-    /* Center the content horizontally */
-    align-items: center;
-    display: flex;
-
-    cursor: pointer;
-    padding: 16px;
-}
-
-.accordion__toggle {
-    margin-right: 12px;
-}
-
-.accordion__title {
-    /* Take remaining width */
-    flex: 1;
-}
-
-.accordion__content {
-    /* For not selected item */
-    display: none;
-
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    padding: 16px;
-}
-
-.accordion__content--selected {
-    /* For selected item */
-    display: block;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderBottomColor: 'transparent',
-                                borderRadius: '4px',
-                                width: '60%',
-                            }}
-                        >
-                            <Item
-                                index={0}
-                                title={<div style={{ width: '40%' }}><Rectangle /></div>}
-                            >
-                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
-                            </Item>
-                            <Item
-                                index={1}
-                                title={<div style={{ width: '80%' }}><Rectangle /></div>}
-                            >
-                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={15} /></div>
-                            </Item>
-                            <Item
-                                index={2}
-                                title={<div style={{ width: '60%' }}><Rectangle /></div>}
-                            >
-                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
-                            </Item>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.QuestionsAndAnswers]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/arrow-buttons/Details.tsx

@@ -1,261 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ArrowButtons}>
-            <Helmet>
-                <meta name="description" content="Create arrow buttons with CSS" />
-                <meta name="og:description" content="Create arrow buttons with CSS" />
-                <meta name="twitter:description" content="Create arrow buttons with CSS" />
-                <meta name="keywords" content="css arrow buttons" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Up arrow button -->
-<button class="button">
-    <!-- Arrow -->
-    <div class="button__arrow button__arrow--up"></div>
-
-    <!-- Content -->
-    ...
-</button>
-
-<!-- Right arrow button -->
-<button class="button">
-    <!-- Content -->
-    ...
-
-    <!-- Arrow -->
-    <div class="button__arrow button__arrow--right"></div>
-</button>
-
-<!-- Down arrow button -->
-<button class="button">
-    <!-- Arrow -->
-    <div class="button__arrow button__arrow--down"></div>
-
-    <!-- Content -->
-    ...
-</button>
-
-<!-- Left arrow button -->
-<button class="button">
-    <!-- Arrow -->
-    <div class="button__arrow button__arrow--left"></div>
-
-    <!-- Content -->
-    ...
-</button>
-`}
-css={`
-.button {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    padding: 8px;
-}
-
-.button__arrow {
-    /* Transparent background */
-    background-color: transparent;
-
-    /* Size */
-    height: 12px;
-    width: 12px;
-}
-
-.button__arrow--up {
-    /* Edges */
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translateY(25%) rotate(45deg);
-}
-
-.button__arrow--right {
-    /* Edges */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translateX(-25%) rotate(45deg);
-}
-
-.button__arrow--down {
-    /* Edges */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translateY(-25%) rotate(45deg);
-}
-
-.button__arrow--left {
-    /* Edges */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translateX(25%) rotate(45deg);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                height: '200px',
-                                position: 'relative',
-                                width: '200px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            backgroundColor: 'transparent',
-                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                            height: '12px',
-                                            transform: 'translateY(25%) rotate(45deg)',
-                                            width: '12px',
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Up</div>
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>Right</div>
-                                    <div
-                                        style={{
-                                            backgroundColor: 'transparent',
-                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                            height: '12px',
-                                            transform: 'translateX(-25%) rotate(45deg)',
-                                            width: '12px',
-                                        }}
-                                    />
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    bottom: 0,
-                                    left: '50%',
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, 50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            backgroundColor: 'transparent',
-                                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                            height: '12px',
-                                            transform: 'translateY(-25%) rotate(45deg)',
-                                            width: '12px',
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Down</div>
-                                </button>
-                            </div>
-                            <div
-                                style={{
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                <button
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'transparent',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                    }}
-                                >
-                                    <div
-                                        style={{
-                                            backgroundColor: 'transparent',
-                                            borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                            borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                            height: '12px',
-                                            transform: 'translateX(25%) rotate(45deg)',
-                                            width: '12px',
-                                        }}
-                                    />
-                                    <div style={{ marginLeft: '8px' }}>Left</div>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CloseButton, Pattern.PopoverArrow, Pattern.TriangleButtons]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/avatar-list/Details.tsx

@@ -1,108 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Avatar: React.FC<{}> = ({ children }) => {
-    return (
-        <div
-            style={{
-                alignItems: 'center',
-                backgroundColor: '#BBB',
-                borderRadius: '9999px',
-                boxShadow: '0 0 0 4px #FFF',
-                color: '#FFF',
-                display: 'flex',
-                height: '48px',
-                justifyContent: 'center',
-                width: '48px',
-            }}
-        >
-            {children}
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.AvatarList}>
-            <Helmet>
-                <meta name="description" content="Create an avatar list with CSS flexbox" />
-                <meta name="og:description" content="Create an avatar list with CSS flexbox" />
-                <meta name="twitter:description" content="Create an avatar list with CSS flexbox" />
-                <meta name="keywords" content="css avatar, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="avatars">
-    <!-- Avatar item -->
-    <div class="avatars__item">
-        <div class="avatars__image">
-            <!-- Image -->
-            ...
-        </div>
-    </div>
-
-    <!-- Repeat other avatars -->
-    ...
-</div>
-`}
-css={`
-.avatars {
-    display: flex;
-}
-
-.avatars__item {
-    /* Nagative margin make avatar overlap to previous one */
-    margin-left: -4px;
-}
-
-.avatars__image {
-    /* Add a white curve between avatars */
-    box-shadow: 0 0 0 4px #FFF;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Rounded border */
-    border-radius: 9999px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                        <div style={{ marginLeft: '-4px' }}><Avatar /></div>
-                        <div style={{ marginLeft: '-4px' }}><Avatar>+5</Avatar></div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/badge/Details.tsx

@@ -1,83 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Badge}>
-            <Helmet>
-                <meta name="description" content="Create a badge component with CSS flexbox" />
-                <meta name="og:description" content="Create a badge component with CSS flexbox" />
-                <meta name="twitter:description" content="Create a badge component with CSS flexbox" />
-                <meta name="keywords" content="css badge, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="badge">
-    ...
-</div>
-`}
-css={`
-.badge {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-    color: #FFF;
-
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 32px;
-    width: 32px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '9999px',
-                                color: '#FFF',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                fontSize: '20px',
-                                height: '32px',
-                                justifyContent: 'center',
-                                width: '32px',
-                            }}
-                        >
-                            1
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/breadcrumb/Details.tsx

@@ -1,75 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Breadcrumb}>
-            <Helmet>
-                <meta name="description" content="Create a breadcrumb with CSS flexbox" />
-                <meta name="og:description" content="Create a breadcrumb with CSS flexbox" />
-                <meta name="twitter:description" content="Create a breadcrumb with CSS flexbox" />
-                <meta name="keywords" content="css breadcrumb, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="breadcrumb">
-    <!-- Breadcrumb item -->
-    <a>...</a>
-
-    <!-- Separator -->
-    <div class="breadcrumb__separator">/</div>
-
-    <!-- Repeated items and separators -->
-    ...
-</div>
-`}
-css={`
-.breadcrumb {
-    /* Content is centered vertically */
-    align-items: center;
-    display: flex;
-}
-
-.breadcrumb__separator {
-    margin: 0 8px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ alignItems: 'center', display: 'flex' }}>
-                            <div style={{ width: '128px' }}><Rectangle height={16} /></div>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                            <div style={{ width: '32px' }}><Rectangle height={16} /></div>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                            <div style={{ width: '64px' }}><Rectangle height={16} /></div>
-                            <div style={{ color: 'rgba(0, 0, 0, 0.3)', fontSize: '36px', margin: '0 4px' }}>/</div>
-                            <div style={{ width: '32px' }}><Rectangle height={16} /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/button-with-icon/Details.tsx

@@ -1,78 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ButtonWithIcon}>
-            <Helmet>
-                <meta name="description" content="Create an icon button with CSS flexbox" />
-                <meta name="og:description" content="Create an icon button with CSS flexbox" />
-                <meta name="twitter:description" content="Create an icon button with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css icon button" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<button class="button">
-    <!-- Icon -->
-    ...
-
-    <!-- Label -->
-    ...
-</div>
-`}
-css={`
-.button {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <button
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '8px',
-                                    display: 'flex',
-                                    height: '64px',
-                                    padding: '8px',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ marginRight: '8px' }}><Circle size={32} /></div>
-                                <Rectangle />
-                            </button>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/centering/Details.tsx

@@ -1,60 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Centering}>
-            <Helmet>
-                <meta name="description" content="Center an element with CSS flexbox" />
-                <meta name="og:description" content="Center an element with CSS flexbox" />
-                <meta name="twitter:description" content="Center an element with CSS flexbox" />
-                <meta name="keywords" content="css centering, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <Circle size={64} />
-                        <div style={{ marginTop: '16px', width: '40%' }}><Rectangle /></div>
-                        <div style={{ marginTop: '8px', width: '30%' }}><Rectangle /></div>
-                        <div style={{ marginTop: '8px', width: '20%' }}><Rectangle /></div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/chip/Details.tsx

@@ -1,83 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import InputChip from './InputChip';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Chip}>
-            <Helmet>
-                <meta name="description" content="Create a chip component with CSS flexbox" />
-                <meta name="og:description" content="Create a chip component with CSS flexbox" />
-                <meta name="twitter:description" content="Create a chip component with CSS flexbox" />
-                <meta name="keywords" content="css chip, css flexbox, css tag" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
-                </div>
-                <BrowserFrame
-html={`
-<div class="chip">
-    <!-- Content -->
-    <div class="chip__content">
-        ...
-    </div>
-
-    <!-- The close button -->
-    <!-- See https://csslayout.io/patterns/close-button -->
-    ...
-</div>
-`}
-css={`
-.chip {
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-
-    /* Background color */
-    background-color: rgba(0, 0, 0, .1);
-
-    /* Rounded border */
-    border-radius: 9999px;
-
-    /* Spacing */
-    padding: 4px 8px;
-}
-
-.chip__content {
-    margin-right: 4px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <InputChip>CSS</InputChip>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CloseButton]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/chip/InputChip.tsx

@@ -1,60 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-const InputChip: React.FC<{}> = ({ children }) => {
-    return (
-        <div
-            style={{
-                alignItems: 'center',
-                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                borderRadius: '9999px',
-                display: 'inline-flex',
-                justifyContent: 'center',
-                padding: '4px 8px',
-            }}
-        >
-            <div style={{ flex: 1, marginRight: '4px' }}>
-                {children}
-            </div>
-            <button
-                style={{
-                    backgroundColor: 'transparent',
-                    borderColor: 'transparent',
-                    cursor: 'pointer',
-                    height: '16px',
-                    position: 'relative',
-                    width: '16px',
-                }}
-            >
-                <div
-                    style={{
-                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                        height: '1px',
-                        left: 0,
-                        position: 'absolute',
-                        top: '50%',
-                        transform: 'translate(0%, -50%) rotate(45deg)',
-                        width: '100%',
-                    }}
-                />
-                <div
-                    style={{
-                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                        height: '100%',
-                        left: '50%',
-                        position: 'absolute',
-                        top: 0,
-                        transform: 'translate(-50%, 0%) rotate(45deg)',
-                        width: '1px',
-                    }}
-                />
-            </button>
-        </div>
-    );
-};
-
-export default InputChip;

client/patterns/close-button/Details.tsx

@@ -1,136 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.CloseButton}>
-            <Helmet>
-                <meta name="description" content="Create a close button with CSS flexbox" />
-                <meta name="og:description" content="Create a close button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a close button with CSS flexbox" />
-                <meta name="keywords" content="css close button, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<button class="button">
-    <div class="button__line button__line--first"></div>
-
-    <div class="button__line button__line--second"></div>
-</button>
-`}
-css={`
-.button {
-    /* Reset */
-    background-color: transparent;
-    border-color: transparent;
-
-    /* Cursor */
-    cursor: pointer;
-
-    /* Size */
-    height: 32px;
-    width: 32px;
-
-    /* Used to position the inner */
-    position: relative;
-}
-
-.button__line {
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
-
-    /* Position */
-    position: absolute;
-
-    /* Size */
-    height: 1px;
-    width: 100%;
-}
-
-.button__line--first {
-    /* Position */
-    left: 0px;
-    top: 50%;
-    transform: translate(0%, -50%) rotate(45deg);
-
-    /* Size */
-    height: 1px;
-    width: 100%;
-}
-
-.button__line--second {
-    /* Position */
-    left: 50%;
-    top: 0px;
-    transform: translate(-50%, 0%) rotate(45deg);
-
-    /* Size */
-    height: 100%;
-    width: 1px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <button
-                            style={{
-                                backgroundColor: 'transparent',
-                                borderColor: 'transparent',
-                                cursor: 'pointer',
-                                height: '32px',
-                                position: 'relative',
-                                width: '32px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '1px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(0%, -50%) rotate(45deg)',
-                                    width: '100%',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '100%',
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, 0%) rotate(45deg)',
-                                    width: '1px',
-                                }}
-                            />
-                        </button>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Chip, Pattern.Modal, Pattern.Notification]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/color-swatch/Details.tsx

@@ -1,84 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ColorSwatch}>
-            <Helmet>
-                <meta name="description" content="Create a color swatch with CSS flexbox" />
-                <meta name="og:description" content="Create a color swatch with CSS flexbox" />
-                <meta name="twitter:description" content="Create a color swatch with CSS flexbox" />
-                <meta name="keywords" content="css color swatch, css flexbox" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="swatch">
-    <div class="swatch__item" style="background-color: ..."></div>
-
-    <!-- Repeat other items -->
-    ...
-</div>
-`}
-css={`
-.swatch {
-    /* Wrap the items */
-    display: flex;
-    flex-wrap: wrap;
-}
-.swatch__item {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 1.5rem;
-    width: 1.5rem;
-
-    /* Space between items */
-    margin: 0.5rem;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '0.5rem',
-                    }}
-                >
-                    <div
-                        style={{
-                            display: 'flex',
-                            flexWrap: 'wrap',
-                        }}
-                    >
-                    {
-                        Array(9).fill(0).map((_, index) => (
-                            <div
-                                key={index}
-                                style={{
-                                    backgroundColor: `rgba(0, 0, 0, 0.${index + 1})`,
-                                    borderRadius: '9999px',
-                                    height: '1.5rem',
-                                    margin: '0.5rem',
-                                    width: '1.5rem',
-                                }}
-                            />
-                        ))
-                    }
-                    </div>
-                </div>
-            </BrowserFrame>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/concave-corners/Details.tsx

@@ -1,139 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-import './concave-corners.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.ConcaveCorners}>
-            <Helmet>
-                <meta name="description" content="Create concave corners with CSS" />
-                <meta name="og:description" content="Create concave corners with CSS" />
-                <meta name="twitter:description" content="Create concave corners with CSS" />
-                <meta name="keywords" content="css border radius, css concave border radius, css concave corners" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="concave-corners">
-    <!-- The top-left corner -->
-    <div class="concave-corners__corner concave-corners__corner--tl"></div>
-
-    <!-- The top-right corner -->
-    <div class="concave-corners__corner concave-corners__corner--tr"></div>
-
-    <!-- The bottom-left corner -->
-    <div class="concave-corners__corner concave-corners__corner--bl"></div>
-
-    <!-- The bottom-right corner -->
-    <div class="concave-corners__corner concave-corners__corner--br"></div>
-
-    <!-- Content -->
-    ...
-</div>
-`}
-css={`
-:root {
-    --concave-corners-background: rgba(0, 0, 0, .3);
-    --concave-corners-size: 1rem;
-}
-
-.concave-corners {
-    background-color: var(--concave-corners-background);
-    
-    /* Used to position the corners */
-    position: relative;
-
-    /* Misc */
-    height: 100%;
-}
-
-.concave-corners__corner {
-    /* Absolute position */
-    position: absolute;
-
-    /* Size */
-    height: var(--concave-corners-size);    
-    width: var(--concave-corners-size);
-
-    background: #FFF;
-}
-
-.concave-corners__corner--tl {
-    /* Position */
-    left: 0;
-    top: 0;
-
-    /* Border radius */
-    border-radius: 0 0 var(--concave-corners-size) 0;
-}
-
-.concave-corners__corner--tr {
-    /* Position */ 
-    right: 0;
-    top: 0;
-
-    /* Border radius */
-    border-radius: 0 0 0 var(--concave-corners-size);
-}
-
-.concave-corners__corner--bl {
-    /* Position */
-    bottom: 0;
-    left: 0;
-
-    /* Border radius */
-    border-radius: 0 var(--concave-corners-size) 0 0;
-}
-
-.concave-corners__corner--br {
-    /* Position */
-    bottom: 0;
-    right: 0;
-
-    /* Border radius */
-    border-radius: var(--concave-corners-size) 0 0 0;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '1rem',
-                    }}
-                >
-                    <div
-                        style={{
-                            height: '8rem',
-                            width: '16rem',
-                        }}
-                    >
-                        <div className='concave-corners'>
-                            <div className='concave-corners__corner concave-corners__corner--tl' />
-                            <div className='concave-corners__corner concave-corners__corner--tr' />
-                            <div className='concave-corners__corner concave-corners__corner--bl' />
-                            <div className='concave-corners__corner concave-corners__corner--br' />
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.InvertedCorners]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/cookie-banner/Details.tsx

@@ -1,96 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.CookieBanner}>
-            <Helmet>
-                <meta name="description" content="Create a cookie banner with CSS flexbox" />
-                <meta name="og:description" content="Create a cookie banner with CSS flexbox" />
-                <meta name="twitter:description" content="Create a cookie banner with CSS flexbox" />
-                <meta name="keywords" content="css cookie banner, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="banner">
-    <!-- Tells visitors that the website uses cookie -->
-    <div class="banner__content">
-        ...
-    </div>
-
-    <!-- Close button -->
-    ...
-</div>
-`}
-css={`
-.banner {
-    /* Banner is displayed at the bottom */
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    width: 100%;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.banner__content {
-    /* Take available width */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            position: 'relative',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: 'rgba(0, 0, 0, 0.05)',
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: 0,
-                                display: 'flex',
-                                left: 0,
-                                padding: '8px',
-                                position: 'absolute',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ flex: 1, marginRight: '12px' }}>
-                                <Block numberOfBlocks={5} />
-                            </div>
-                            <div style={{ width: '96px' }}>
-                                <Rectangle height={32} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.FixedAtCorner]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/curved-background/Details.tsx

@@ -1,68 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.CurvedBackground}>
-            <Helmet>
-                <meta name="description" content="Create an element with curved background" />
-                <meta name="og:description" content="Create an element with curved background" />
-                <meta name="twitter:description" content="Create an element with curved background" />
-                <meta name="keywords" content="css border radius, css curved background" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
-
-    /* You can use gradient background color such as
-    background: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); */
-
-    /* Curved corners */
-    border-bottom-left-radius: 50% 40%;
-    border-bottom-right-radius: 50% 40%;
-}
-`}
-                >
-                    <div
-                        style={{
-                            height: '100%',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderBottomLeftRadius: '50% 40%',
-                                borderBottomRightRadius: '50% 40%',
-                                height: '50%',
-                                width: '100%',
-                            }}
-                        />
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.DiagonalSection]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/custom-checkbox-button/Details.tsx

@@ -1,178 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface CheckboxProps {
-    isChecked: boolean;
-    value: string;
-}
-
-const Details: React.FC<{}> = () => {
-    const Checkbox: React.FC<CheckboxProps> = ({ isChecked, value, children }) => {
-        const [checked, setChecked] = React.useState(isChecked);
-        const click = () => setChecked((c) => !c);
-
-        return (
-            <label
-                htmlFor="custom-checkbox-button"
-                style={{
-                    alignItems: 'center',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                }}
-            >
-                <input
-                    id="custom-checkbox-button"
-                    type="checkbox"
-                    name="option"
-                    value={value}
-                    checked={checked}
-                    style={{ display: 'none' }}
-                    onChange={click}
-                />
-                <div
-                    style={{
-                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                        borderRadius: '4px',
-                        marginRight: '8px',
-                        padding: '4px',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: checked ? '#00449E' : 'transparent',
-                            borderRadius: '4px',
-                            height: '16px',
-                            width: '16px',
-                        }}
-                    />
-                </div>
-                {children}
-            </label>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.CustomCheckboxButton}>
-            <Helmet>
-                <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="og:description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a custom checkbox button with CSS flexbox" />
-                <meta name="keywords" content="css checkbox, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<label class="label">
-    <!-- The real checkbox -->
-    <input type="checkbox" class="label__input" />
-
-    <!-- The fake square -->
-    <div class="label__square">
-        <!-- The inner square -->
-        <div class="label__checkbox label__square--selected"></div>
-    </div>
-
-    <!-- The text -->
-    ...
-</div>
-`}
-css={`
-.label {
-    /* Center the content horizontally */
-    align-items: center;
-    display: inline-flex;
-
-    /* Cursor */
-    cursor: pointer;
-}
-
-.label__input {
-    /* Hide it */
-    display: none;
-}
-
-.label__square {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-
-    /* Spacing */
-    margin-right: 8px;
-    padding: 4px;
-}
-
-.label__checkbox {
-    background-color: transparent;
-    border-radius: 4px;
-    height: 16px;
-    width: 16px;
-}
-
-.label__checkbox--selected {
-    /* For selected checkbox */
-    background-color: #00449E;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '200px' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <Checkbox value='1' isChecked={false}>
-                                    <div style={{ width: '100px' }}><Rectangle /></div>
-                                </Checkbox>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <Checkbox value='2' isChecked={true}>
-                                    <div style={{ width: '200px' }}><Rectangle /></div>
-                                </Checkbox>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                }}
-                            >
-                                <Checkbox value='3' isChecked={false}>
-                                    <div style={{ width: '150px' }}><Rectangle /></div>
-                                </Checkbox>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.CustomRadioButton, Pattern.RadioButtonGroup]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/custom-radio-button/Details.tsx

@@ -1,183 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface RadioProps {
-    value: string;
-}
-
-const Details: React.FC<{}> = () => {
-    const [selectedValue, setSelectedValue] = React.useState('1');
-
-    const Radio: React.FC<RadioProps> = ({ value, children }) => {
-        const click = () => setSelectedValue(value);
-
-        return (
-            <label
-                htmlFor="custom-radio-button"
-                style={{
-                    alignItems: 'center',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                }}
-            >
-                <input
-                    id="custom-radio-button"
-                    type="radio"
-                    name="option"
-                    value={value}
-                    style={{ display: 'none' }}
-                    onChange={click}
-                />
-                <div
-                    style={{
-                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                        borderRadius: '9999px',
-                        marginRight: '8px',
-                        padding: '4px',
-                    }}
-                >
-                    <div
-                        style={{
-                            backgroundColor: value === selectedValue
-                                ? '#00449E'
-                                : 'transparent',
-                            borderRadius: '9999px',
-                            height: '16px',
-                            width: '16px',
-                        }}
-                    />
-                </div>
-                {children}
-            </label>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.CustomRadioButton}>
-            <Helmet>
-                <meta name="description" content="Create a custom radio button with CSS flexbox" />
-                <meta name="og:description" content="Create a custom radio button with CSS flexbox" />
-                <meta name="twitter:description" content="Create a custom radio button with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css radio" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<label class="label">
-    <!-- The real radio -->
-    <input type="radio" class="label__input" />
-
-    <!-- The fake circle -->
-    <div class="label__circle">
-        <!-- The inner circle -->
-        <div class="label__radio label__radio--selected"></div>
-    </div>
-
-    <!-- The text -->
-    ...
-</div>
-`}
-css={`
-.label {
-    /* Center the content horizontally */
-    align-items: center;
-    display: inline-flex;
-
-    /* Cursor */
-    cursor: pointer;
-}
-
-.label__input {
-    /* Hide it */
-    display: none;
-}
-
-.label__circle {
-    /* Rounded border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 9999px;
-
-    /* Spacing */
-    margin-right: 8px;
-    padding: 4px;
-}
-
-.label__radio {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 16px;
-    width: 16px;
-
-    /* For not selected radio */
-    background-color: transparent;
-}
-
-.label__radio--selected {
-    /* For selected radio */
-    background-color: #00449E;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '200px' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <Radio value='1'>
-                                    <div style={{ width: '100px' }}><Rectangle /></div>
-                                </Radio>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                    marginBottom: '16px',
-                                }}
-                            >
-                                <Radio value='2'>
-                                    <div style={{ width: '200px' }}><Rectangle /></div>
-                                </Radio>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'inline-flex',
-                                }}
-                            >
-                                <Radio value='3'>
-                                    <div style={{ width: '150px' }}><Rectangle /></div>
-                                </Radio>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.RadioButtonGroup]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/diagonal-section/Details.tsx

@@ -1,107 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.DiagonalSection}>
-            <Helmet>
-                <meta name="description" content="Create a diagonal section with CSS" />
-                <meta name="og:description" content="Create a diagonal section with CSS" />
-                <meta name="twitter:description" content="Create a diagonal section with CSS" />
-                <meta name="keywords" content="css diagonal section, css transform skew" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The diagonal area -->
-    <div class="container__diagonal"></div>
-
-    <!-- Content -->
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Used to position the diagonal area */
-    position: relative;
-}
-
-.container__diagonal {
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 0px;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* Create diagonal sides */
-    transform: skewY(-5deg);
-
-    /* Background color */
-    background-color: rgba(0, 0, 0, 0.3);
-
-    /* Displayed under the main content */
-    z-index: -1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '200px',
-                                justifyContent: 'center',
-                                position: 'relative',
-                                width: '75%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                    height: '100%',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'skewY(-5deg)',
-                                    width: '100%',
-                                    zIndex: -1,
-                                }}
-                            />
-                            <div style={{ width: '60%' }}>
-                                <Block backgroundColor='#fff' justify='center' numberOfBlocks={5} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CurvedBackground]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/dot-navigation/Details.tsx

@@ -1,120 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface DotProps {
-    index: number;
-}
-
-const Details: React.FC<{}> = () => {
-    const [activeItem, setActiveItem] = React.useState(0);
-
-    const Dot: React.FC<DotProps> = ({ index }) => {
-        const isActive = index === activeItem;
-        const click = () => setActiveItem(index);
-        return (
-            <li
-                style={{
-                    backgroundColor: isActive ? 'rgba(0, 0, 0, 0.3)' : '',
-                    border: isActive ? 'none' : '1px solid rgba(0, 0, 0, 0.3)',
-                    borderRadius: '9999px',
-                    cursor: 'pointer',
-                    height: '12px',
-                    margin: '0 4px',
-                    width: '12px',
-                }}
-                onClick={click}
-            />
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.DotNavigation}>
-            <Helmet>
-                <meta name="description" content="Create dot navigation with CSS flexbox" />
-                <meta name="og:description" content="Create dot navigation with CSS flexbox" />
-                <meta name="twitter:description" content="Create dot navigation with CSS flexbox" />
-                <meta name="keywords" content="css dot navigation, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<ul class="dots">
-    <li class="dots__item"></li>
-
-    <!-- Repeat other dots -->
-    ...
-</div>
-`}
-css={`
-.dots {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.dots__item {
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 12px;
-    width: 12px;
-
-    /* Active dot */
-    background-color: rgba(0, 0, 0, .3);
-
-    /* Inactive dot */
-    background-color: transparent;
-    border: 1px solid rgba(0, 0, 0, .3);
-
-    /* OPTIONAL: Spacing between dots */
-    margin: 0 4px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <ul
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                justifyContent: 'center',
-                                listStyleType: 'none',
-                                margin: 0,
-                                padding: 0,
-                            }}
-                        >
-                            <Dot index={0} />
-                            <Dot index={1} />
-                            <Dot index={2} />
-                            <Dot index={3} />
-                        </ul>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/drawer/Details.tsx

@@ -1,115 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Drawer}>
-            <Helmet>
-                <meta name="description" content="Create a drawer navigation with CSS" />
-                <meta name="og:description" content="Create a drawer navigation with CSS" />
-                <meta name="twitter:description" content="Create a drawer navigation with CSS" />
-                <meta name="keywords" content="css drawer, css off-canvas" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    This pattern is also known as off-canvas.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Backdrop -->
-    <div class="container__overlay"></div>
-
-    <!-- Sidebar -->
-    <div class="container__sidebar">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Container takes full size */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-
-    z-index: 9999;
-}
-
-.container__overlay {
-    /* Take full size */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-
-    /* User still can see the content of main page */
-    background-color: rgba(0, 0, 0, 0.5);
-
-    z-index: -1;
-}
-
-.container__sidebar {
-    /* Take full height */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 200px;
-
-    /* Background */
-    background-color: #fff;
-}
-`}
-                >
-                    <div
-                        style={{
-                            height: '100%',
-                            position: 'relative',
-                            width: '100%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                height: '100%',
-                                left: 0,
-                                position: 'absolute',
-                                top: 0,
-                                width: '100%',
-                            }}
-                        />
-                        <div
-                            style={{
-                                backgroundColor: '#fff',
-                                height: '100%',
-                                left: 0,
-                                padding: '16px',
-                                position: 'absolute',
-                                top: 0,
-                                width: '250px',
-                            }}
-                        >
-                            <Block numberOfBlocks={20} />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/drop-area/Details.tsx

@@ -1,76 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.DropArea}>
-            <Helmet>
-                <meta name="description" content="Create a dropping area with CSS flexbox" />
-                <meta name="og:description" content="Create a dropping area with CSS flexbox" />
-                <meta name="twitter:description" content="Create a dropping area with CSS flexbox" />
-                <meta name="keywords" content="css dropping area, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Border */
-    border: 4px dashed rgba(0, 0, 0, 0.3),
-    border-radius: 4px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                border: '4px dashed rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '80%',
-                                justifyContent: 'center',
-                                width: '80%',
-                            }}
-                        >
-                            <div style={{ width: '40%' }}>
-                                <Block justify='center' numberOfBlocks={10} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/drop-cap/Details.tsx

@@ -1,73 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './dropcap.css';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Pattern from '../../constants/Pattern';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.DropCap}>
-            <Helmet>
-                <meta name="description" content="Create a drop cap with CSS" />
-                <meta name="og:description" content="Create a drop cap with CSS" />
-                <meta name="twitter:description" content="Create a drop cap with CSS" />
-                <meta name="keywords" content="css drop cap" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-/* Styles for the first letter */
-.container:first-letter {
-    /* Display at the left */
-    float: left;
-    line-height: 1;
-
-    /* Spacing */
-    margin: 0 8px 0 0;
-    padding: 0 8px;
-
-    /* Optional */
-    font-size: 64px;
-    font-weight: 700;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <div className="p-drop-cap">
-                                Cascading Style Sheets (CSS) is a style sheet language used for
-                                describing the presentation of a document written in a markup
-                                language like HTML. CSS is a cornerstone technology of the World Wide Web,
-                                alongside HTML and JavaScript.
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/drop-cap/dropcap.css

@@ -1,14 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-drop-cap:first-letter {
-    border: 2px solid rgba(0, 0, 0, 0.3);
-    float: left;
-    font-size: 64px;
-    font-weight: 700;
-    line-height: 1;
-    margin: 0 8px 0 0;
-    padding: 0 8px; 
-}

client/patterns/dropdown/Details.tsx

@@ -1,149 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './dropdown.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Dropdown}>
-            <Helmet>
-                <meta name="description" content="Create a dropdown with CSS" />
-                <meta name="og:description" content="Create a dropdown with CSS" />
-                <meta name="twitter:description" content="Create a dropdown with CSS" />
-                <meta name="keywords" content="css dropdown, css menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Move the mouse over the button to see the dropdown.
-                </div>
-                <BrowserFrame
-html={`
-<div class="dropdown">
-    <!-- The trigger element -->
-    <button>...</button>
-
-    <!-- The content -->
-    <div class="dropdown__content">
-        ...
-    </div>
-</div>
-`}
-css={`
-.dropdown {
-    position: relative;   
-}
-
-/* Hide the dropdown's content by default */
-.dropdown__content {
-    display: none;
-
-    /* Position it right below the trigger element */
-    left: 0;
-    paddingTop: 4px;
-    position: absolute;
-    top: 100%;
-
-    /* It should be on the top of other elements */
-    background-color: #FFF;
-    zIndex: 9999;
-
-    /* Size */
-    height: 200px;
-    width: 200px;
-}
-
-/* Show the content when hover on the container */
-.dropdown:hover .dropdown__content {
-    display: block;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            className="p-dropdown"
-                            style={{
-                                position: 'relative',
-                            }}
-                        >
-                            <button
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    width: '128px',
-                                }}
-                            >
-                                <span style={{ flex: 1, marginRight: '8px' }}><Rectangle /></span>
-                                <Triangle size={8} corner='b' />
-                            </button>
-
-                            <div
-                                className="p-dropdown-content"
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    height: '200px',
-                                    left: 0,
-                                    paddingTop: '4px',
-                                    position: 'absolute',
-                                    top: '100%',
-                                    width: '200px',
-                                    zIndex: 9999,
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        height: '100%',
-                                        justifyContent: 'center',
-                                        padding: '16px',
-                                        width: '100%',
-                                    }}
-                                >
-                                    <Block numberOfBlocks={10} justify='center' />
-                                </div>
-                            </div>
-                        </div>
-                        <div
-                            style={{
-                                marginTop: '16px',
-                                width: '256px',
-                            }}
-                        >
-                            <Block numberOfBlocks={20} justify='center' />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.MegaMenu, Pattern.Menu, Pattern.NestedDropdowns]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/dropdown/dropdown.css

@@ -1,12 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-dropdown-content {
-    display: none;
-}
-
-.p-dropdown:hover .p-dropdown-content {
-    display: block;
-}

client/patterns/fading-long-section/Details.tsx

@@ -1,106 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FadingLongSection}>
-            <Helmet>
-                <meta name="description" content="Fading long section to indicate there is more content" />
-                <meta name="og:description" content="Fading long section to indicate there is more content" />
-                <meta name="twitter:description" content="Fading long section to indicate there is more content" />
-                <meta name="keywords" content="css fading overflow, css linear gradient" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Fading a long section to indicate there is more content.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container"
-    <!-- Main content -->
-    <div class="container__content">
-        ...
-    </div>
-
-    <!-- The faded element -->
-    <div class="container__fading"></div>
-</div>
-`}
-css={`
-.container {
-    /* Used to position the faded element */
-    position: relative;
-}
-
-.container__content {
-    /* Height */
-    height: 200px;
-
-    /* Scrollable */
-    overflow-y: scroll;
-}
-
-.container__fading {
-    /* Displayed at the bottom */
-    bottom: 0;
-    left: 0;
-    position: absolute;
-
-    /* Size */
-    height: 30px;
-    width: 100%;
-
-    /* Gradient background */
-    background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ position: 'relative', width: '200px' }}>
-                            <div
-                                style={{
-                                    height: '200px',
-                                    overflowY: 'scroll',
-                                }}
-                            >
-                                <Block numberOfBlocks={50} />
-                            </div>
-
-                            <div
-                                style={{
-                                    background: 'linear-gradient(rgba(255, 255, 255, 0.01), #fff)',
-                                    bottom: 0,
-                                    height: '30px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    width: '100%',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/feature-comparison/Details.tsx

@@ -1,193 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FeatureComparison}>
-            <Helmet>
-                <meta name="description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="og:description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="twitter:description" content="Create a feature comparison list with CSS flexbox" />
-                <meta name="keywords" content="css feature comparison, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Feature name -->
-    <div class="container__feature">
-        ...
-    </div>
-
-    <!-- The model -->
-    <div class="container__model">
-        <!--
-        For the first row: display the model name (Basic, Pro, etc.)
-        From the second row: display a yes/no icon indicating the feature is available or not
-        -->
-        ...
-    </div>
-
-    <!-- Repeated other models -->
-    ...
-</div>
-
-<!-- Repeated items -->
-...
-`}
-css={`
-.container {
-    align-items: center;
-    display: flex;
-
-    /* Bottom border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Spacing */
-    padding: 12px 0px;
-}
-
-.container__feature {
-    /* Take available width */
-    flex: 1;
-
-    /* Spacing */
-    margin-right: 16px;
-}
-
-.container__model {
-    /* Center the content */
-    display: flex;
-    justify-content: center;
-
-    /* Spacing */
-    margin-right: 16px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div style={{ width: '60%' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '12px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Rectangle />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                    <Rectangle />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                    <Rectangle />
-                                </div>
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Block numberOfBlocks={4} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                    <Circle size={8} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                    <Circle size={8} />
-                                </div>
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Block numberOfBlocks={5} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }} />
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }}>
-                                    <Circle size={8} />
-                                </div>
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Block numberOfBlocks={4} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                    <Circle size={8} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    padding: '8px 0',
-                                    width: '100%',
-                                }}
-                            >
-                                <div style={{ flex: 1, marginRight: '16px' }}>
-                                    <Block numberOfBlocks={6} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', marginRight: '16px', width: '75px' }}>
-                                    <Circle size={8} />
-                                </div>
-                                <div style={{ display: 'flex', justifyContent: 'center', width: '50px' }} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.FeatureList, Pattern.PricingTable]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/feature-list/Details.tsx

@@ -1,99 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FeatureList}>
-            <Helmet>
-                <meta name="description" content="Create a feature list with CSS flexbox" />
-                <meta name="og:description" content="Create a feature list with CSS flexbox" />
-                <meta name="twitter:description" content="Create a feature list with CSS flexbox" />
-                <meta name="keywords" content="css feature list, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Feature item -->
-<div class="container">
-    <!-- Image -->
-    <div class="container__image">
-        ...
-    </div>
-
-    <!-- Right side -->
-    <div class="container__feature">
-        ...
-    </div>
-</div>
-
-<!-- Repeated items -->
-...
-`}
-css={`
-.container {
-    display: flex;
-
-    /* OPTIONAL: Reverse the order of image and content */
-    flex-direction: row-reverse;
-
-    /* OPTIONAL: Spacing between items */
-    margin: 16px 0;
-}
-
-.container__image {
-    width: 128px;
-}
-
-.container__feature {
-    /* Take the remaining width */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div style={{ width: '60%' }}>
-                            <div style={{ display: 'flex', marginBottom: '32px' }}>
-                                <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
-                                <div style={{ flex: 1 }}>
-                                    <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                            </div>
-                            <div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
-                                <div style={{ margin: '0 16px' }}><Circle size={128} /></div>
-                                <div style={{ flex: 1 }}>
-                                    <div style={{ marginBottom: '32px' }}><Rectangle height={8} /></div>
-                                    <Block numberOfBlocks={15} />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/fixed-at-corner/Details.tsx

@@ -1,100 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FixedAtCorner}>
-            <Helmet>
-                <meta name="description" content="Fix an element at corner with CSS" />
-                <meta name="og:description" content="Fix an element at corner with CSS" />
-                <meta name="twitter:description" content="Fix an element at corner with CSS" />
-                <meta name="keywords" content="css fixed" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Top-left corner -->
-    <div class="container__corner container__corner--tl">
-        ...
-    </div>
-
-    <!-- Top-right corner -->
-    <div class="container__corner container__corner--tr">
-        ...
-    </div>
-
-    <!-- Bottom-right corner -->
-    <div class="container__corner container__corner--br">
-        ...
-    </div>
-
-    <!-- Bottom-left corner -->
-    <div class="container__corner container__corner--bl">    
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    position: relative;
-}
-
-.container__corner {
-    position: absolute;
-}
-
-.container__corner--tl {
-    left: 0;        
-    top: 0;
-}
-
-.container__corner--tr {
-    top: 0;
-    right: 0;
-}
-
-.container__corner--br {
-    bottom: 0;
-    right: 0;
-}
-
-.container__corner--bl {
-    bottom: 0;
-    left: 0;
-}
-`}
-                >
-                    <div style={{ height: '100%', position: 'relative' }}>
-                        <div style={{ left: 0, position: 'absolute', top: 0 }}>
-                            <Triangle size={64} corner="tl" />
-                        </div>
-                        <div style={{ position: 'absolute', right: 0, top: 0 }}>
-                            <Triangle size={64} corner="tr" />
-                        </div>
-                        <div style={{ bottom: 0, position: 'absolute', right: 0 }}>
-                            <Triangle size={64} corner="br" />
-                        </div>
-                        <div style={{ bottom: 0, left: 0, position: 'absolute' }}>
-                            <Triangle size={64} corner="bl" />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.CookieBanner, Pattern.CornerRibbon, Pattern.FixedAtSide]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/floating-label/Details.tsx

@@ -1,115 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './floating-label.css';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Pattern from '../../constants/Pattern';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FloatingLabel}>
-            <Helmet>
-                <meta name="description" content="Create a floating label with CSS" />
-                <meta name="og:description" content="Create a floating label with CSS" />
-                <meta name="twitter:description" content="Create a floating label with CSS" />
-                <meta name="keywords" content="css floating label, placeholder shown" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Type something in the input to see how the label is shown up.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The input -->
-    <input placeholder="Placeholder" class="container__input" />
-
-    <!-- The label -->
-    <label class="container__label">Placeholder</label>
-</div>
-`}
-css={`
-.container {
-    position: relative;
-}
-
-/*
-Show the label at desired position when the 
-placeholder of input isn't shown
-*/
-.container__input:not(:placeholder-shown) + .container__label {
-    background: #FFF;
-    transform: translate(0, -50%);
-    opacity: 1;
-}
-
-.container__label {
-    /* Position the label */
-    left: 8px;
-    position: absolute;
-    top: 0;
-
-    /* Hide it by default */
-    opacity: 0;
-    transition: all 200ms;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            className="p-floating-container"
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                padding: '0 1px',
-                                position: 'relative',
-                                width: '200px',
-                            }}
-                        >
-                            <input
-                                id="floating-label-input"
-                                placeholder="Placeholder"
-                                type="text"
-                                style={{
-                                    borderColor: 'transparent',
-                                    padding: '8px',
-                                    width: '100%',
-                                }}
-                            />
-                            <label
-                                htmlFor="floating-label-input"
-                                style={{
-                                    left: '8px',
-                                    padding: '0 8px',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transition: 'all 200ms',
-                                }}
-                            >
-                                Placeholder
-                            </label>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/floating-label/floating-label.css

@@ -1,14 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-floating-container label {
-    opacity: 0;
-}
-
-.p-floating-container input:not(:placeholder-shown) + label {
-    background: #FFF;
-    transform: translate(0, -50%);
-    opacity: 1;
-}

client/patterns/folder-structure/Details.tsx

@@ -1,157 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Square from '../../placeholders/Square';
-import './folder-structure.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FolderStructure}>
-            <Helmet>
-                <meta name="description" content="Create a folder structure with CSS" />
-                <meta name="og:description" content="Create a folder structure with CSS" />
-                <meta name="twitter:description" content="Create a folder structure with CSS" />
-                <meta name="keywords" content="css folder structure, css folder tree" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="folder-structure">
-    <ul>
-        <li>
-            <!-- Content -->
-            ...
-
-            <!-- Sub items -->
-            <ul>
-                <li>
-                    <!-- Content -->
-                    ...
-
-                    <!-- Sub items -->
-                    <ul>
-                        <li>...</li>
-                        <li>...</li>
-                        ...
-                    </ul>
-                </li>
-                <li>...</li>
-                ...
-            </ul>
-        </li>
-        
-        <!-- Repeat other items -->
-        ...
-    </ul>
-</div>
-`}
-css={`
-:root {
-    --folder-structure-item-height: 1rem;
-    --folder-structure-item-margin-left: 2rem;
-    --folder-structure-item-padding-top: 1rem;
-}
-
-.folder-structure ul {
-    /* Reset */
-    list-style-type: none;
-    margin: 0;
-}
-
-.folder-structure li {
-    padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
-    position: relative;
-}
-
-.folder-structure li::before {
-    border-left: 1px solid rgba(0, 0, 0, .3);
-    content: '';
-    
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 0;
-    transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
-
-    /* Size */
-    height: 100%;
-}
-
-.folder-structure li::after {
-    border-bottom: 1px solid rgba(0, 0, 0, .3);
-    content: '';
-
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
-    transform: translate(-100%, 0);
-
-    /* Size */
-    width: var(--folder-structure-item-margin-left);
-}
-
-/* Remove the border from the last item */
-.folder-structure li:last-child::before {
-    height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '0.5rem',
-                    }}
-                >
-                    <div className="folder-structure">
-                        <ul>
-                            <li>
-                                <Square size='1rem' />
-                                <ul>
-                                    <li><Square size='1rem' /></li>
-                                </ul>
-                            </li>
-                            <li>
-                                <Square size='1rem' />
-                                <ul>
-                                    <li>
-                                        <Square size='1rem' />
-                                        <ul>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
-                                        </ul>
-                                    </li>
-                                    <li><Square size='1rem' /></li>
-                                    <li>
-                                        <Square size='1rem' />
-                                        <ul>
-                                            <li><Square size='1rem' /></li>
-                                            <li><Square size='1rem' /></li>
-                                        </ul>
-                                    </li>
-                                </ul>
-                            </li>
-                            <li><Square size='1rem' /></li>
-                        </ul>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.TreeDiagram]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/full-background/Details.tsx

@@ -1,81 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FullBackground}>
-            <Helmet>
-                <meta name="description" content="Create a full background element with CSS" />
-                <meta name="og:description" content="Create a full background element with CSS" />
-                <meta name="twitter:description" content="Create a full background element with CSS" />
-                <meta name="keywords" content="css background size cover, css full background" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    /* Take full size */
-    height: 100vh;
-    width: 100%;
-
-    /* Background */
-    background: url('/assets/full-background.jpeg') center center / cover no-repeat;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                background: 'url("/assets/full-background.jpeg") center center / cover no-repeat',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                width: '100%',
-                            }}
-                        >
-                            <div style={{ width: '250px' }}>
-                                <Block backgroundColor='#fff' justify='center' numberOfBlocks={10} />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/full-screen-menu/Details.tsx

@@ -1,139 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.FullScreenMenu}>
-            <Helmet>
-                <meta name="description" content="Create a full screen menu with CSS flexbox" />
-                <meta name="og:description" content="Create a full screen menu with CSS flexbox" />
-                <meta name="twitter:description" content="Create a full screen menu with CSS flexbox" />
-                <meta name="keywords" content="css fixed, css flexbox, css menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The close button -->
-    <button class="container__close">
-        ...
-    </button>
-
-    <!-- The navigation menu -->
-    <ul>
-        ...
-    </ul>
-</div>
-`}
-css={`
-.container {
-    /* Full screen overlay */
-    height: 100%;
-    left: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.container__close {
-    /* Shown at top right corner */
-    position: absolute;
-    right: 16px;
-    top: 16px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                            position: 'relative',
-                        }}
-                    >
-                        <button
-                            style={{
-                                backgroundColor: 'transparent',
-                                borderColor: 'transparent',
-                                padding: 0,
-                                position: 'absolute',
-                                right: '16px',
-                                top: '16px',
-                            }}
-                        >
-                            <svg
-                                viewBox="0 0 24 24"
-                                style={{
-                                    fill: 'none',
-                                    height: 24,
-                                    stroke: '#000',
-                                    strokeLinecap: 'round',
-                                    strokeLinejoin: 'round',
-                                    strokeWidth: 1,
-                                    width: 24,
-                                }}
-                            >
-                                <path
-                                    d={`M7,16.999l10-10
-                                    M17,16.999l-10-10
-                                    M12,0.499c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5
-                                    S0.5,18.35,0.5,11.999S5.649,0.499,12,0.499z`}
-                                />
-                            </svg>
-                        </button>
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                backgroundColor: 'rgba(0, 0, 0, 0.25)',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                height: '100%',
-                                justifyContent: 'center',
-                                left: 0,
-                                position: 'absolute',
-                                top: 0,
-                                width: '100%',
-                            }}
-                        >
-                            <ul
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    listStyleType: 'none',
-                                    margin: 0,
-                                    padding: 0,
-                                }}
-                            >
-                                <li style={{ marginBottom: '16px', width: '256px' }}><Rectangle /></li>
-                                <li style={{ marginBottom: '16px', width: '144px' }}><Rectangle /></li>
-                                <li style={{ marginBottom: '16px', width: '128px' }}><Rectangle /></li>
-                                <li style={{ width: '160px' }}><Rectangle /></li>
-                            </ul>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/holy-grail/Details.tsx

@@ -1,130 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.HolyGrail}>
-            <Helmet>
-                <meta name="description" content="Create a holy grail layout with CSS flexbox" />
-                <meta name="og:description" content="Create a holy grail layout with CSS flexbox" />
-                <meta name="twitter:description" content="Create a holy grail layout with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <header>
-        ...
-    </header>
-    <main class="container__main">
-        <!-- Left sidebar -->
-        <aside class="container__left">...</aside>
-
-        <!-- Main content -->
-        <article class="container__middle">...</article>
-
-        <!-- Right sidebar -->
-        <nav class="container__right">...</nav>
-    </main>
-    <footer>
-        ...
-    </footer>
-</div>
-`}
-css={`
-.container {
-    display: flex;
-    flex-direction: column;
-}
-
-.container__main {
-    /* Take the remaining height */
-    flex-grow: 1;
-
-    /* Layout the left sidebar, main content and right sidebar */
-    display: flex;
-    flex-direction: row;
-}
-
-.container__left {
-    width: 25%;
-}
-
-.container__middle {
-    /* Take the remaining width */
-    flex-grow: 1;
-}
-
-.container__right {
-    width: 20%;
-}
-`}
-                >
-                    <div
-                        style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                        }}
-                    >
-                        <div
-                            style={{
-                                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                flexShrink: 0,
-                                padding: '16px',
-                            }}
-                        >
-                            <div style={{ width: '50%' }}><Rectangle /></div>
-                        </div>
-                        <div style={{ display: 'flex', flexGrow: 1 }}>
-                            <div
-                                style={{
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    padding: '16px',
-                                    width: '25%',
-                                }}
-                            >
-                                <Block numberOfBlocks={10} />
-                            </div>
-                            <div style={{ flex: 1, padding: '16px' }}>
-                                <Block numberOfBlocks={20} />
-                            </div>
-                            <div
-                                style={{
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    padding: '16px',
-                                    width: '20%',
-                                }}
-                            >
-                                <Block numberOfBlocks={5} />
-                            </div>
-                        </div>
-                        <div
-                            style={{
-                                borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                flexShrink: 0,
-                                padding: '16px',
-                            }}
-                        >
-                            <div style={{ width: '40%' }}><Rectangle /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/initial-avatar/Details.tsx

@@ -1,117 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.InitialAvatar}>
-            <Helmet>
-                <meta name="description" content="Create an initial avatar with CSS" />
-                <meta name="og:description" content="Create an initial avatar with CSS" />
-                <meta name="twitter:description" content="Create an initial avatar with CSS" />
-                <meta name="keywords" content="css avatar" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    To center the content, you also can use other technique demonstrated in
-                    the <Link to='/patterns/centering'>Centering</Link> pattern.
-                </div>
-                <BrowserFrame
-html={`
-<div class="avatar">
-    <div class="avatar__letters">
-        <!-- The letters -->
-        ...
-    </div>
-</div>
-`}
-css={`
-.avatar {
-    /* Center the content */
-    display: inline-block;
-    vertical-align: middle;
-
-    /* Used to position the content */
-    position: relative;
-
-    /* Colors */
-    background-color: rgba(0, 0, 0, .3);
-    color: #FFF;
-
-    /* Rounded border */
-    border-radius: 50%;
-    height: 48px;
-    width: 48px;
-}
-
-.avatar__letters {
-    /* Center the content */
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                                borderRadius: '50%',
-                                color: '#FFF',
-                                display: 'inline-block',
-                                fontSize: '24px',
-                                height: '48px',
-                                position: 'relative',
-                                verticalAlign: 'middle',
-                                width: '48px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%)',
-                                }}
-                            >
-                                PN
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[
-                    Pattern.Avatar,
-                    Pattern.AvatarList,
-                    Pattern.Badge,
-                    Pattern.Centering,
-                    Pattern.PresenceIndicator,
-                ]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/input-addon/Details.tsx

@@ -1,214 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.InputAddon}>
-            <Helmet>
-                <meta name="description" content="Create an input add-on with CSS flexbox" />
-                <meta name="og:description" content="Create an input add-on with CSS flexbox" />
-                <meta name="twitter:description" content="Create an input add-on with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css input add-on" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Add-on prepended -->
-<div class="container">
-    <!-- Add-on -->
-    <div class="container__addon">
-        ...
-    </div>
-
-    <!-- Input -->
-    <input type="text" class="container__input" />
-</div>
-
-<!-- Add-on appended -->
-<div class="container">
-    <!-- Input -->
-    <input type="text" class="container__input" />
-
-    <!-- Add-on -->
-    <div class="container__addon">
-        ...
-    </div>
-</div>
-
-<!-- Appended and prepended add-ons -->
-<div class="container">
-    <!-- Add-on -->
-    <div class="container__addon">
-        ...
-    </div>
-
-    <!-- Input -->
-    <input type="text" class="container__input" />
-
-    <!-- Add-on -->
-    <div class="container__addon">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    display: flex;
-
-    /* Take full size */
-    width: 100%;
-}
-
-.container__input {
-    /* Take the remaining width */
-    flex: 1;
-}
-
-.container__addon {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '256px' }}>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    marginBottom: '16px',
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '30%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                                <input
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        marginRight: '1px',
-                                        padding: '4px',
-                                    }}
-                                />
-                            </div>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    marginBottom: '16px',
-                                    width: '100%',
-                                }}
-                            >
-                                <input
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        marginLeft: '1px',
-                                        padding: '8px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '40%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                            </div>
-                            <div
-                                style={{
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    height: '32px',
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '20%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                                <input
-                                    type="text"
-                                    style={{
-                                        borderColor: 'transparent',
-                                        flex: 1,
-                                        padding: '8px',
-                                    }}
-                                />
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                        borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        padding: '8px',
-                                        width: '30%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/inverted-corners/Details.tsx

@@ -1,104 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-import './inverted-corners.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.InvertedCorners}>
-            <Helmet>
-                <meta name="description" content="Create inverted corners with CSS" />
-                <meta name="og:description" content="Create inverted corners with CSS" />
-                <meta name="twitter:description" content="Create inverted corners with CSS" />
-                <meta name="keywords" content="css border radius, css inverted border radius, css inverted corners" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="inverted-corners">
-    ...
-</div>
-`}
-css={`
-:root {
-    --inverted-corners-background: #52525B;
-    --inverted-corners-size: 2rem;
-}
-
-.inverted-corners {
-    background-color: var(--inverted-corners-background);
-
-    /* Used to position the corner */
-    position: relative;
-}
-
-.inverted-corners::before {
-    content: '';
-
-    /* Absolute position */
-    bottom: calc(-2 * var(--inverted-corners-size));
-    left: 0;
-    position: absolute;
-
-    /* Size */
-    height: calc(2 * var(--inverted-corners-size));
-    width: var(--inverted-corners-size);
-
-    /* Border */
-    background-color: transparent;
-    border-top-left-radius: var(--inverted-corners-size);
-    box-shadow: var(--inverted-corners-background)
-                0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '1rem',
-                    }}
-                >
-                    <div
-                        style={{
-                            height: '8rem',
-                            width: '16rem',
-                        }}
-                    >
-                        <div className='inverted-corners'></div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <section>
-                <Heading title="Use case" />
-
-                <div
-                    style={{
-                        height: '8rem',
-                        width: '16rem',
-                    }}
-                >
-                    <div className='inverted-corners inverted-corners--speech'>Speech Bubble</div>
-                </div>
-            </section>
-
-            <RelatedPatterns patterns={[Pattern.ConcaveCorners]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/keyboard-shortcut/Details.tsx

@@ -1,126 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import Heading from '../../components/Heading';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface ItemProps {
-    action: string;
-    keys: string;
-}
-
-const Item: React.FC<ItemProps> = ({ action, keys }) => {
-    return (
-        <div
-            style={{
-                alignItems: 'center',
-                display: 'flex',
-                justifyContent: 'space-between',
-                margin: 0,
-                padding: '4px 0',
-            }}
-        >
-            <div>{action}</div>
-            <kbd
-                style={{
-                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                    borderRadius: '4px',
-                    boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
-                    color: 'rgba(0, 0, 0, 0.7)',
-                    padding: '8px',
-                }}
-            >
-                {keys}
-            </kbd>
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.KeyboardShortcut}>
-            <Helmet>
-                <meta name="description" content="Create a keyboard shortcut with CSS" />
-                <meta name="og:description" content="Create a keyboard shortcut with CSS" />
-                <meta name="twitter:description" content="Create a keyboard shortcut with CSS" />
-                <meta name="keywords" content="kbd tag, keyboard shortcut" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    We use the native <code>kbd</code> tag to display the keyboard shortcut.
-                </div>
-                <BrowserFrame
-html={`
-<kbd class="container">
-    ...
-</kbd>
-`}
-css={`
-.container {
-    /* Background and color */
-    background-color: rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    color: rgba(0, 0, 0, 0.7);
-
-    /* Bottom shadow */
-    box-shadow: rgba(0, 0, 0, 0.3) 0px -2px 0px inset, 
-                rgba(0, 0, 0, 0.4) 0px 1px 1px;
-
-    /* Spacing */
-    padding: 8px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <kbd
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                borderRadius: '4px',
-                                boxShadow: 'rgba(0, 0, 0, 0.3) 0px -2px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 1px',
-                                color: 'rgba(0, 0, 0, 0.7)',
-                                padding: '8px',
-                            }}
-                        >
-                            ⌘ + C
-                        </kbd>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <section>
-                <Heading title="Use cases" />
-
-                <div style={{ padding: '32px' }}>
-                    <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                        We can use this pattern with the <Link to="/patterns/property-list">property list</Link> pattern
-                        to create shortkey preferences as following:
-                    </div>
-                    <div style={{ width: '250px' }}>
-                        <Item action="Cut" keys="⌘ + X" />
-                        <Item action="Copy" keys="⌘ + C" />
-                        <Item action="Paste" keys="⌘ + V" />
-                    </div>
-                </div>
-            </section>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/lined-paper/Details.tsx

@@ -1,79 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.LinedPaper}>
-            <Helmet>
-                <meta name="description" content="Create lined paper with CSS" />
-                <meta name="og:description" content="Create lined paper with CSS" />
-                <meta name="twitter:description" content="Create lined paper with CSS" />
-                <meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Lined background */
-    background-image: linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0px);
-    background-size: 100% 2em;
-
-    /*
-    Display the content on top of the lines.
-    The line height must be the same as the background size defined above
-    */
-    background-position-y: 24px;
-    line-height: 2em;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundImage: 'linear-gradient(rgba(0, 0, 0, 0.3) 1px, transparent 0)',
-                                backgroundPositionY: '24px',
-                                backgroundSize: '100% 2em',
-                                height: '200px',
-                                lineHeight: '2em',
-                                width: '75%',
-                            }}
-                        >
-                            <div>
-                                Cascading Style Sheets (CSS) is a style sheet language used for
-                                describing the presentation of a document written in a markup
-                                language like HTML. CSS is a cornerstone technology of the World Wide Web,
-                                alongside HTML and JavaScript.
-                            </div>
-                            <div style={{ textAlign: 'right' }}>— Wikipedia</div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/masonry-grid/Details.tsx

@@ -1,86 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-import './masonry-grid.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.MasonryGrid}>
-            <Helmet>
-                <meta name="description" content="Create a masonry grid with CSS" />
-                <meta name="og:description" content="Create a masonry grid with CSS" />
-                <meta name="twitter:description" content="Create a masonry grid with CSS" />
-                <meta name="keywords" content="css column-count, css column-gap, css masonry, css masonry grid" />
-            </Helmet>
-            <BrowserFrame
-html={`
-<div class="masonry-grid">
-    <!--Item -->
-    <div class="masonry-grid__item">...</div>
-
-    <!-- Repeat other items -->
-</div>
-`}
-css={`
-.masonry-grid {
-    /* It is split into 3 columns */
-    column-count: 3;
-
-    /* The space between columns */
-    column-gap: 1rem;
-
-    /* Misc */
-    width: 100%;
-}
-
-.masonry-grid__item {
-    /* Prevent a column from breaking into multiple columns */
-    break-inside: avoid;
-
-    /* Misc */
-    margin-bottom: 1rem;
-}
-`}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '1rem',
-                    }}
-                >
-                    <div className='masonry-grid'>
-                        <div className='masonry-grid__item'><Rectangle height={32} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={64} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={96} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={64} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={128} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={96} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={128} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={32} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={64} /></div>
-                        <div className='masonry-grid__item'><Rectangle height={32} /></div>
-                    </div>
-                </div>
-            </BrowserFrame>
-
-            <RelatedPatterns patterns={[Pattern.CardLayout, Pattern.SimpleGrid]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/media-object/Details.tsx

@@ -1,85 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Square from '../../placeholders/Square';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.MediaObject}>
-            <Helmet>
-                <meta name="description" content="Create a media object with CSS flexbox" />
-                <meta name="og:description" content="Create a media object with CSS flexbox" />
-                <meta name="twitter:description" content="Create a media object with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, media object" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Media object -->
-    <div class="container__media">
-        ...
-    </div>
-
-    <!-- Main content -->
-    <div class="container__content">
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Align sub-items to top */
-    align-items: start;
-    display: flex;
-}
-
-.container__media {
-    margin-right: 16px;
-
-    /* Set the width for the media object */
-    width: 200px;
-}
-
-.container__content {
-    /* Take the remaining width */
-    flex: 1;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'flex-start',
-                            display: 'flex',
-                            height: '100%',
-                            padding: '16px',
-                        }}
-                    >
-                        <div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
-                            <Square />
-                        </div>
-                        <div style={{ flex: 1 }}>
-                            <div style={{ marginBottom: '32px', width: '80%' }}>
-                                <Rectangle />
-                            </div>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={20} /></div>
-                            <div style={{ marginBottom: '32px' }}><Block numberOfBlocks={15} /></div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/mega-menu/Details.tsx

@@ -1,153 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './mega-menu.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.MegaMenu}>
-            <Helmet>
-                <meta name="description" content="Create a mega menu with CSS" />
-                <meta name="og:description" content="Create a mega menu with CSS" />
-                <meta name="twitter:description" content="Create a mega menu with CSS" />
-                <meta name="keywords" content="css mega menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Move the mouse over the second navigation item to see the mega menu.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Item -->
-    ...
-
-    <!-- An item that triggers displaying the mega menu -->
-    <div class="container__trigger">
-        <!-- The trigger item's content -->
-        <div>...</div>
-
-        <!-- Mega menu -->
-        <div class="container__content">
-            ...
-        </div>
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Used to position the mega menu */
-    position: relative;
-}
-
-.container__trigger:hover .container__content {
-    /* Show the mega menu when hovering the trigger item */
-    display: block;
-}
-
-.container__content {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    margin-top: -1px;
-
-    /* Hidden by default */
-    display: none;
-
-    /* Absolute position */
-    left: 0px;
-    position: absolute;
-    top: 100%;
-
-    /* Take full width */
-    width: 100%;
-
-    /* Displayed on top of other elements */
-    background: #fff;
-    z-index: 9999;
-}
-`}
-                >
-                    <div style={{ padding: '8px' }}>
-                        <div className='p-mega-menu-container'>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'inline-flex',
-                                    justifyContent: 'center',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        padding: '16px',
-                                        width: '150px',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                                <div
-                                    className='p-mega-menu-trigger'
-                                    style={{
-                                        borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                        width: '180px',
-                                    }}
-                                >
-                                    <div style={{ display: 'flex', padding: '16px' }}>
-                                        <div style={{ flex: 1, marginRight: '8px' }}><Rectangle /></div>
-                                        <Triangle size={8} corner='b' />
-                                    </div>
-                                    <div className='p-mega-menu-content'>
-                                        <div style={{ display: 'flex' }}>
-                                            <div style={{ flex: 1, padding: '16px' }}>
-                                                <Block numberOfBlocks={10} />
-                                            </div>
-                                            <div style={{ flex: 1, padding: '16px' }}>
-                                                <Block numberOfBlocks={6} />
-                                            </div>
-                                            <div style={{ flex: 1, padding: '16px' }}>
-                                                <Block numberOfBlocks={8} />
-                                            </div>
-                                            <div style={{ flex: 1, padding: '16px' }}>
-                                                <Block numberOfBlocks={6} />
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div
-                                    style={{
-                                        padding: '16px',
-                                        width: '120px',
-                                    }}
-                                >
-                                    <Rectangle />
-                                </div>
-                            </div>
-                        </div>
-
-                        <div style={{ marginTop: '16px' }}>
-                            <Block numberOfBlocks={10} />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu, Pattern.NestedDropdowns]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/menu/Details.tsx

@@ -1,217 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './menu.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Menu}>
-            <Helmet>
-                <meta name="description" content="Create a menu with CSS flexbox" />
-                <meta name="og:description" content="Create a menu with CSS flexbox" />
-                <meta name="twitter:description" content="Create a menu with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="menu">
-    <!-- Normal menu item -->
-    <div class="menu__item">
-        ...
-    </div>
-
-    <!-- With hot key -->
-    <div class="menu__item">
-        <!-- Label -->
-        ...
-        <!-- Hot key -->
-        <div class="menu__hotkey">
-            ...
-        </div>
-    </div>
-
-    <!-- With image and hot key -->
-    <div class="menu__item">
-        <!-- Image -->
-        ...
-
-        <!-- Label -->
-        ...
-
-        <!-- Hot key -->
-        <div class="menu__hotkey">
-            ...
-        </div>
-    </div>
-
-    <!-- Divider -->
-    <div class="menu__divider"></div>
-</div>
-`}
-css={`
-.menu {
-    display: flex;
-    flex-direction: column;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
-
-.menu__item {
-    /* Center the content horizontally */
-    align-items: center;
-    display: flex;
-}
-
-.menu__hotkey {
-    /* Push the hot key to the right */
-    margin-left: auto;
-}
-
-.menu__divider {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    height: 1px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                width: '40%',
-                            }}
-                        >
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '40%' }}><Rectangle /></div>
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <Circle />
-                                <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '30%' }}><Rectangle /></div>
-                                <div>Ctrl + X</div>
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '70%' }}><Rectangle /></div>
-                                <div>Ctrl + C</div>
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '20%' }}><Rectangle /></div>
-                                <Circle />
-                            </div>
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ alignItems: 'center', display: 'flex', width: '80%' }}>
-                                    <Circle />
-                                    <div style={{ marginLeft: '4px', width: '50%' }}><Rectangle /></div>
-                                </div>
-                                <Circle />
-                            </div>
-                            <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)', height: '1px' }} />
-                            <div
-                                className="p-menu-item"
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '0 8px',
-                                }}
-                            >
-                                <div style={{ width: '40%' }}><Rectangle /></div>
-                                <div>Ctrl + V</div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns
-                patterns={[
-                    Pattern.DotLeader,
-                    Pattern.MegaMenu,
-                    Pattern.NestedDropdowns,
-                    Pattern.PropertyList,
-                    Pattern.SplitNavigation,
-                ]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/menu/menu.css

@@ -1,8 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-.p-menu-item:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-}

client/patterns/modal/Details.tsx

@@ -1,128 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Modal}>
-            <Helmet>
-                <meta name="description" content="Create a modal with CSS flexbox" />
-                <meta name="og:description" content="Create a modal with CSS flexbox" />
-                <meta name="twitter:description" content="Create a modal with CSS flexbox" />
-                <meta name="keywords" content="css dialog, css flexbox, css modal" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can use the <Link to='/patterns/close-button'>close button</Link> to
-                    represent the button for closing the modal.
-                </div>
-                <BrowserFrame
-html={`
-<div class="modal">
-    <!-- Header -->
-    <div class="modal__header">
-        <!-- Title -->
-        ...
-        <!-- Close icon sticks to the right -->
-        ...
-    </div>
-
-    <!-- Content -->
-    ...
-
-    <!-- Footer -->
-    <div class="modal__footer">
-        ...
-    </div>
-</div>
-`}
-css={`
-.modal {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0.3);
-    border-radius: 4px;
-}
-
-.modal__header {
-    display: flex;
-    justify-content: space-between;
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0.3);
-}
-
-.modal__footer {
-    display: flex;
-    /* Push the buttons to the right */
-    justify-content: flex-end;
-    /* Border */
-    border-top: 1px solid rgba(0, 0, 0.3);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                width: '50%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ width: '60%' }}><Rectangle /></div>
-                                <div style={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                                    <Circle />
-                                </div>
-                            </div>
-                            <div style={{ padding: '16px' }}>
-                                <div style={{ marginBottom: '16px' }}><Block numberOfBlocks={10} /></div>
-                                <Block numberOfBlocks={5} />
-                            </div>
-                            <div
-                                style={{
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'flex-end',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginRight: '8px', width: '30%' }}><Rectangle height={32} /></div>
-                                <div style={{ width: '30%' }}><Rectangle height={32} /></div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/nested-dropdowns/Details.tsx

@@ -1,154 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './nested-dropdowns.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.NestedDropdowns}>
-            <Helmet>
-                <meta name="description" content="Create nested dropdown menu with CSS" />
-                <meta name="og:description" content="Create nested dropdown menu with CSS" />
-                <meta name="twitter:description" content="Create nested dropdown menu with CSS" />
-                <meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    Hover on the Patterns &rarr; Navigation to see the sub dropdowns.
-                </div>
-                <BrowserFrame
-html={`
-<ul class="dropdown">
-    <li>Home</li>
-    <li>
-        <div>Patterns</div>
-        <!-- First level sub dropdown -->
-        <ul>
-            <li>Layout</li>
-            <li>Input</li>
-            <li>
-                <div>Navigation</div>
-                <!-- Second level sub dropdown -->
-                <ul>
-                    <li>Breadcrumb</li>
-                    <li>Dropdown</li>
-                    <li>Menu</li>
-                    <li>Nested dropdown</li>
-                </ul>
-            </li>
-            <li>Display</li>
-            <li>Feedback</li>
-        </ul>
-    </li>
-    <li>Products</li>
-    <li>About</li>
-</ul>
-`}
-css={`
-.dropdown {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    display: flex;
-
-    /* Reset list styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-.dropdown li {
-    /* Spacing */
-    padding: 8px;
-
-    /* Used to position the sub dropdown */
-    position: relative;
-}
-
-/* The sub dropdown */
-.dropdown ul {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Hidden by default */
-    display: none;
-
-    /* Absolute position */
-    left: 0;
-    position: absolute;
-    top: 100%;
-
-    /* Reset styles */
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    /* Width */
-    width: 200px;
-}
-
-/* The second level sub dropdown */
-.dropdown ul ul {
-    left: 100%;
-    position: absolute;
-    top: 0;
-}
-
-/* Change background color of list item when being hovered */
-.dropdown li:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-}
-
-/* Show the direct sub dropdown when hovering the list item */
-.dropdown li:hover > ul {
-    display: block;
-}
-`}
-                >
-                    <div
-                        style={{
-                            padding: '8px',
-                        }}
-                    >
-                        <ul className="p-nested-dropdowns">
-                            <li>Home</li>
-                            <li>
-                                <div>Patterns</div>
-                                <ul>
-                                    <li>Layout</li>
-                                    <li>Input</li>
-                                    <li>
-                                        <div>Navigation</div>
-                                        <ul>
-                                            <li>Breadcrumb</li>
-                                            <li>Dropdown</li>
-                                            <li>Menu</li>
-                                            <li>Nested dropdown</li>
-                                        </ul>
-                                    </li>
-                                    <li>Display</li>
-                                    <li>Feedback</li>
-                                </ul>
-                            </li>
-                            <li>Products</li>
-                            <li>About</li>
-                        </ul>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.Dropdown, Pattern.Menu]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/notification/Details.tsx

@@ -1,90 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Notification}>
-            <Helmet>
-                <meta name="description" content="Create a notification with CSS flexbox" />
-                <meta name="og:description" content="Create a notification with CSS flexbox" />
-                <meta name="twitter:description" content="Create a notification with CSS flexbox" />
-                <meta name="keywords" content="css alert, css flexbox, css notification" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can use the <Link to='/patterns/close-button'>close button</Link> to
-                    represent the button for closing the notification.
-                </div>
-                <BrowserFrame
-html={`
-<div class="notification">
-    <!-- Content -->
-    ...
-
-    <!-- Close button sticks to the right -->
-    ...
-</div>
-`}
-css={`
-.notification {
-    display: flex;
-    justify-content: space-between;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                width: '60%',
-                            }}
-                        >
-                            <div style={{ padding: '16px', width: '80%' }}><Block numberOfBlocks={5} /></div>
-                            <button
-                                style={{
-                                    alignItems: 'center',
-                                    borderColor: 'transparent',
-                                    color: 'rgba(0, 0, 0, .3)',
-                                    display: 'flex',
-                                    fontSize: '36px',
-                                    height: '32px',
-                                    justifyContent: 'center',
-                                    marginRight: '1px',
-                                    width: '32px',
-                                }}
-                            >
-                                <Circle />
-                            </button>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/overlay-play-button/Details.tsx

@@ -1,117 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Triangle from '../../placeholders/Triangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.OverlayPlayButton}>
-            <Helmet>
-                <meta name="description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="og:description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="twitter:description" content="Create an overlay play button with CSS flexbox" />
-                <meta name="keywords" content="css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The video element -->
-    <video src="..." />
-
-    <!-- The overlay area -->
-    <div class="container__overlay">
-        <!-- The player button -->
-        ...
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Used to position the overlay */
-    position: relative;
-}
-
-.container__overlay {
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 0;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Add a dark background */
-    background-color: rgba(0, 0, 0, 0.25);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                height: '100%',
-                                position: 'relative',
-                                width: '100%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: 'rgba(0, 0, 0, 0.25)',
-                                    display: 'flex',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: 0,
-                                    width: '100%',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '4px solid #FFF',
-                                        borderRadius: '9999px',
-                                        display: 'flex',
-                                        height: '64px',
-                                        justifyContent: 'center',
-                                        width: '64px',
-                                    }}
-                                >
-                                    <Triangle backgroundColor='#FFF' corner='r' size={8} />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <RelatedPatterns patterns={[Pattern.VideoBackground]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/pagination/Details.tsx

@@ -1,153 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.Pagination}>
-            <Helmet>
-                <meta name="description" content="Create a pagination with CSS flexbox" />
-                <meta name="og:description" content="Create a pagination with CSS flexbox" />
-                <meta name="twitter:description" content="Create a pagination with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css pagination" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="pagination">
-    <!-- Pagination item -->
-    <div class="pagination__item">
-        ...
-    </div>
-
-    <!-- Repeat other items -->
-    ...
-</div>
-`}
-css={`
-.pagination {
-    display: flex;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
-
-.pagination__item {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Right border */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-}
-.pagination__item + .pagination__item {
-    /* No right border */
-    border-right: none;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                display: 'flex',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                    width: '128px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                }}
-                            >
-                                <Circle size={16} />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                }}
-                            >
-                                <Circle size={16} />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                }}
-                            >
-                                <Circle size={16} />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                }}
-                            >
-                                <Circle size={16} />
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    justifyContent: 'center',
-                                    padding: '8px',
-                                    width: '64px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/popover-arrow/Details.tsx

@@ -1,407 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PopoverArrow}>
-            <Helmet>
-                <meta name="description" content="Create a popover arrow with CSS" />
-                <meta name="og:description" content="Create a popover arrow with CSS" />
-                <meta name="twitter:description" content="Create a popover arrow with CSS" />
-                <meta name="keywords" content="css arrow, css popover" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- The content -->
-    ...
-
-    <!-- Top left arrow -->
-    <div class="container__arrow container__arrow--tl"></div>
-
-    <!-- Top center arrow -->
-    <div class="container__arrow container__arrow--tc"></div>
-
-    <!-- Top right arrow -->
-    <div class="container__arrow container__arrow--tr"></div>
-
-    <!-- Right top arrow -->
-    <div class="container__arrow container__arrow--rt"></div>
-
-    <!-- Right center arrow -->
-    <div class="container__arrow container__arrow--rc"></div>
-
-    <!-- Right bottom arrow -->
-    <div class="container__arrow container__arrow--rb"></div>
-
-    <!-- Bottom left arrow -->
-    <div class="container__arrow container__arrow--bl"></div>
-
-    <!-- Bottom center arrow -->
-    <div class="container__arrow container__arrow--bc"></div>
-
-    <!-- Bottom right arrow -->
-    <div class="container__arrow container__arrow--br"></div>
-
-    <!-- Left top arrow -->
-    <div class="container__arrow container__arrow--lt"></div>
-
-    <!-- Left center arrow -->
-    <div class="container__arrow container__arrow--lc"></div>
-
-    <!-- Left bottom arrow -->
-    <div class="container__arrow container__arrow--lb"></div>
-</div>
-`}
-css={`
-.container {
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Used to position the arrow */
-    position: relative;
-}
-
-.container__arrow {
-    /* Size */
-    height: 16px;
-    width: 16px;
-
-    background-color: #FFF;
-    position: absolute;
-}
-
-.container__arrow--tl {
-    /* Position at the top left corner */
-    left: 32px;
-    top: 0px;
-
-    /* Border */
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.container__arrow--tc {
-    /* Position at the top center */
-    left: 50%;
-    top: 0px;
-
-    /* Border */
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--tr {
-    /* Position at the top right corner */
-    right: 32px;
-    top: 0px;
-
-    /* Border */
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--rt {
-    /* Position at the right top corner */
-    right: 0;
-    top: 32px;
-
-    /* Border */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, 50%) rotate(45deg);
-}
-
-.container__arrow--rc {
-    /* Position at the right center */
-    right: 0;
-    top: 50%;
-
-    /* Border */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.container__arrow--rb {
-    /* Position at the right bottom corner */
-    bottom: 32px;
-    right: 0;
-
-    /* Border */
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.container__arrow--bl {
-    /* Position at the bottom left corner */
-    bottom: -16px;
-    left: 32px;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.container__arrow--bc {
-    /* Position at the bottom center */
-    bottom: -16px;
-    left: 50%;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--br {
-    /* Position at the bottom right corner */
-    bottom: -16px;
-    right: 32px;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--lt {
-    /* Position at the left top corner */
-    left: 0;
-    top: 32px;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, 50%) rotate(45deg);
-}
-
-.container__arrow--lc {
-    /* Position at the left center */
-    left: 0;
-    top: 50%;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.container__arrow--lb {
-    /* Position at the left bottom corner */
-    bottom: 32px;
-    left: 0;
-
-    /* Border */
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                height: '300px',
-                                marginBottom: '16px',
-                                position: 'relative',
-                                width: '300px',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    left: '32px',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    left: '50%',
-                                    position: 'absolute',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: '32px',
-                                    top: 0,
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '32px',
-                                    transform: 'translate(50%, 50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translate(50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '32px',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    transform: 'translate(50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '-16px',
-                                    height: '16px',
-                                    left: '32px',
-                                    position: 'absolute',
-                                    transform: 'translate(50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '-16px',
-                                    height: '16px',
-                                    left: '50%',
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRight: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '-16px',
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: '32px',
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '32px',
-                                    transform: 'translate(-50%, 50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    height: '16px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    top: '50%',
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                            <div
-                                style={{
-                                    backgroundColor: '#FFF',
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
-                                    bottom: '32px',
-                                    height: '16px',
-                                    left: 0,
-                                    position: 'absolute',
-                                    transform: 'translate(-50%, -50%) rotate(45deg)',
-                                    width: '16px',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.ArrowButtons, Pattern.Tooltip]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/presence-indicator/Details.tsx

@@ -1,99 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PresenceIndicator}>
-            <Helmet>
-                <meta name="description" content="Create a presence indicator with CSS" />
-                <meta name="og:description" content="Create a presence indicator with CSS" />
-                <meta name="twitter:description" content="Create a presence indicator with CSS" />
-                <meta name="keywords" content="css indicator" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Other element such as avatar -->
-    ...
-
-    <!-- The presence indicator -->
-    <div class="container__indicator"></div>
-</div>
-`}
-css={`
-.container {
-    position: relative;
-}
-
-.container__indicator {
-    /* Shown at the bottom right corner */
-    bottom: 0,
-    position: absolute;
-    right: 0;
-    transform: translate(50%, 50%);
-
-    /* Rounded border */
-    border-radius: 9999px;
-    height: 16px;
-    width: 16px;
-
-    /* Background color */
-    background-color: #FF4136;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                height: '64px',
-                                marginRight: '16px',
-                                position: 'relative',
-                                width: '64px',
-                            }}
-                        >
-                            <Circle size={64} />
-                            <div
-                                style={{
-                                    backgroundColor: '#FF4136',
-                                    borderRadius: '9999px',
-                                    bottom: 0,
-                                    height: '16px',
-                                    position: 'absolute',
-                                    right: 0,
-                                    transform: 'translate(50%, 50%)',
-                                    width: '16px',
-                                }}
-                            />
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns
-                patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
-            />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/previous-next-buttons/Details.tsx

@@ -1,98 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PreviousNextButtons}>
-            <Helmet>
-                <meta name="description" content="Create previous and next buttons with CSS flexbox" />
-                <meta name="og:description" content="Create previous and next buttons with CSS flexbox" />
-                <meta name="twitter:description" content="Create previous and next buttons with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css pagination" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Previous link sticks to the left -->
-    <a>..</a>
-
-    <!-- Next link sticks to the right -->
-    <a>..</a>
-</div>
-`}
-css={`
-.container {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '50%' }}>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    height: '32px',
-                                    justifyContent: 'space-between',
-                                    padding: '8px',
-                                    width: '100%',
-                                }}
-                            >
-                                <a
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        padding: '8px',
-                                        width: '30%',
-                                    }}
-                                >
-                                    <div style={{ marginRight: '8px' }}>&lt;</div>
-                                    <Rectangle />
-                                </a>
-                                <a
-                                    style={{
-                                        alignItems: 'center',
-                                        border: '1px solid rgba(0, 0, 0, 0.3)',
-                                        borderRadius: '4px',
-                                        display: 'flex',
-                                        padding: '8px',
-                                        width: '30%',
-                                    }}
-                                >
-                                    <Rectangle />
-                                    <div style={{ marginLeft: '8px' }}>&gt;</div>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/price-tag/Details.tsx

@@ -1,113 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import './price-tag.css';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PriceTag}>
-            <Helmet>
-                <meta name="description" content="Create a price tag with CSS" />
-                <meta name="og:description" content="Create a price tag with CSS" />
-                <meta name="twitter:description" content="Create a price tag with CSS" />
-                <meta name="keywords" content="css price tag" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="price-tag">
-    ...
-</div>
-`}
-css={`
-:root {
-    --price-tag-background: rgba(0, 0, 0, 0.3);
-    --price-tag-height: 2rem;
-}
-
-.price-tag {
-    background: var(--price-tag-background);
-    color: #FFF;
-
-    /* Center the price */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Used to position the triangle */
-    position: relative;
-
-    /* Size */
-    height: var(--price-tag-height);
-
-    /* Spacing */
-    padding: 0.25rem 0.5rem;
-}
-
-/* The triangle */
-.price-tag::before {
-    content: '';
-
-    border-color: transparent var(--price-tag-background) transparent transparent;
-    border-style: solid;
-    border-width: calc(var(--price-tag-height) / 2)
-                  calc(var(--price-tag-height) / 2)
-                  calc(var(--price-tag-height) / 2)
-                  0rem;
-    
-    /* Position */
-    left: 0px;
-    position: absolute;
-    top: 0px;
-    transform: translate(-100%, 0px);
-}
-
-/* The dot */
-.price-tag::after {
-    content: '';
-
-    /* Make it like a cirle */ 
-    background: #FFF;
-    border-radius: 9999rem;
-    
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 50%;
-    transform: translate(-0.5rem, -50%);
-
-    /* Size */
-    height: 0.5rem;
-    width: 0.5rem;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div className="price-tag">99.99$</div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.TriangleButtons]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/pricing-table/Details.tsx

@@ -1,168 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import { Link } from 'react-router-dom';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.PricingTable}>
-            <Helmet>
-                <meta name="description" content="Create a pricing table with CSS flexbox" />
-                <meta name="og:description" content="Create a pricing table with CSS flexbox" />
-                <meta name="twitter:description" content="Create a pricing table with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css pricing table" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                    You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to
-                    indicate the most popular option.
-                </div>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Pricing column -->
-    <div class="container__column">
-        <!-- Title -->
-        ...
-
-        <!-- Price -->
-        ...
-
-        <!-- Description -->
-        ...
-
-        <!-- Button -->
-        ...
-    </div>
-
-    <!-- Repeated pricing columns -->
-    ...
-</div>
-`}
-css={`
-.container {
-    /* Content is centered horizontally */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-}
-
-.container__column {
-    /* Content is centered vertically */
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    /* Make all columns have the same width */
-    flex: 1;
-
-    /* OPTIONAL: Space between columns */
-    margin: 0 8px;
-
-    /* OPTIONAL: Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '16px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                alignItems: 'center',
-                                display: 'flex',
-                                justifyContent: 'center',
-                                width: '60%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                    margin: '0 8px',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                <div style={{ marginBottom: '16px', width: '100%' }}>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                    margin: '0 8px',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                <div style={{ marginBottom: '16px', width: '100%' }}>
-                                    <Block numberOfBlocks={20} />
-                                </div>
-                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                            </div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    border: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderRadius: '4px',
-                                    display: 'flex',
-                                    flex: 1,
-                                    flexDirection: 'column',
-                                    justifyContent: 'center',
-                                    margin: '0 8px',
-                                    padding: '16px',
-                                }}
-                            >
-                                <div style={{ marginBottom: '16px', width: '60%' }}><Rectangle /></div>
-                                <div style={{ marginBottom: '16px' }}><Circle size={64} /></div>
-                                <div style={{ marginBottom: '16px', width: '100%' }}>
-                                    <Block numberOfBlocks={10} />
-                                </div>
-                                <div style={{ width: '40%' }}><Rectangle height={32} /></div>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.FeatureComparison]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/progress-bar/Details.tsx

@@ -1,107 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import useInterval from '../../hooks/useInterval';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    const [progress, setProgress] = React.useState(0);
-    useInterval(() => {
-        setProgress((v) => v === 100 ? 0 : v + 1);
-    }, 1 * 100);
-
-    return (
-        <DetailsLayout pattern={Pattern.ProgressBar}>
-            <Helmet>
-                <meta name="description" content="Create a progress bar with CSS flexbox" />
-                <meta name="og:description" content="Create a progress bar with CSS flexbox" />
-                <meta name="twitter:description" content="Create a progress bar with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css progress bar" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <div class="container__progress" style="
-        /* Width based on the number of percentages */
-        width: 40%;
-    ">
-        <!-- The number of percentages -->
-        40%
-    </div>
-</div>
-`}
-css={`
-.container {
-    /* Colors */
-    background-color: rgba(0, 0, 0, .1);
-
-    /* Rounded border */
-    border-radius: 9999px;
-}
-
-.container__progress {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Colors */
-    background-color: #357edd;
-    color: #fff;
-
-    /* Rounded border */
-    border-radius: 9999px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.1)',
-                                borderRadius: '9999px',
-                                height: '16px',
-                                width: '50%',
-                            }}
-                        >
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    backgroundColor: '#357EDD',
-                                    borderRadius: '9999px',
-                                    color: '#FFF',
-                                    display: 'flex',
-                                    fontSize: '12px',
-                                    height: '100%',
-                                    justifyContent: 'center',
-                                    padding: '4px',
-                                    width: `${progress}%`,
-                                }}
-                            >
-                                {progress}%
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/property-list/Details.tsx

@@ -1,133 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import Heading from '../../components/Heading';
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    const Item: React.FC<{}> = ({ children }) => {
-        return (
-            <dl
-                style={{
-                    alignItems: 'center',
-                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    margin: 0,
-                    padding: '8px 0',
-                }}
-            >
-                {children}
-            </dl>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.PropertyList}>
-            <Helmet>
-                <meta name="description" content="Create a property list with CSS flexbox" />
-                <meta name="og:description" content="Create a property list with CSS flexbox" />
-                <meta name="twitter:description" content="Create a property list with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, property list" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- A property item -->
-<dl class="container">
-    <!-- Property name -->
-    <dt>...</dt>
-
-    <!-- Property value -->
-    <dd>...</dd>
-</dl>
-`}
-css={`
-.container {
-    /* Content is center horizontally */
-    align-items: center;
-    display: flex;
-
-    /*
-    The property name will stick to the left, and the value
-    will stick to the right
-    */
-    justify-content: space-between;
-
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-
-    /* Spacing */
-    margin: 0px;
-    padding: 8px 0px;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '40%' }}>
-                            <Item>
-                                <dt style={{ width: '80%' }}><Rectangle /></dt>
-                                <dd><Circle /></dd>
-                            </Item>
-                            <Item>
-                                <dt style={{ width: '60%' }}><Rectangle /></dt>
-                                <dd><Circle /></dd>
-                            </Item>
-                            <Item>
-                                <dt style={{ width: '30%' }}><Rectangle /></dt>
-                                <dd><Circle /></dd>
-                            </Item>
-                            <Item>
-                                <dt style={{ width: '50%' }}><Rectangle /></dt>
-                                <dd><Circle /></dd>
-                            </Item>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-            <section>
-                <Heading title="Use cases" />
-
-                <div style={{ padding: '32px', width: '500px' }}>
-                    <Item>
-                        <dt>Name</dt>
-                        <dd>WebAssembly in Action</dd>
-                    </Item>
-                    <Item>
-                        <dt>Author</dt>
-                        <dd>Gerard Gallant</dd>
-                    </Item>
-                    <Item>
-                        <dt>Publishing date</dt>
-                        <dd>November 2019</dd>
-                    </Item>
-                    <Item>
-                        <dt>ISBN</dt>
-                        <dd>9781617295744</dd>
-                    </Item>
-                </div>
-            </section>
-            <RelatedPatterns patterns={[Pattern.DotLeader, Pattern.Menu, Pattern.SplitNavigation]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/questions-and-answers/Details.tsx

@@ -1,155 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Triangle from '../../placeholders/Triangle';
-
-interface ItemProps {
-    index: number;
-    title: React.ReactNode;
-}
-
-const Details: React.FC<{}> = () => {
-    const [activeItem, setActiveItem] = React.useState(-1);
-
-    const Item: React.FC<ItemProps> = ({ index, title, children }) => {
-        const isOpened = (index === activeItem);
-        const click = () => setActiveItem(isOpened ? -1 : index);
-        return (
-            <>
-                <div
-                    style={{
-                        alignItems: 'center',
-                        cursor: 'pointer',
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        padding: '16px 0',
-                    }}
-                    onClick={click}
-                >
-                    {title}
-                    <Triangle size={8} corner={isOpened ? 't' : 'b'} />
-                </div>
-                <div
-                    style={{
-                        display: isOpened ? 'block' : 'none',
-                        marginBottom: '16px',
-                    }}
-                >
-                    {children}
-                </div>
-            </>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
-            <Helmet>
-                <meta name="description" content="Create a questions and answers section with CSS flexbox" />
-                <meta name="og:description" content="Create a questions and answers section with CSS flexbox" />
-                <meta name="twitter:description" content="Create a questions and answers section with CSS flexbox" />
-                <meta name="keywords" content="css accordion, css faq, css flexbox" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<!-- Each question and answer item -->
-<div class="container">
-    <!-- Heading -->
-    <div class="container__heading">
-        <!-- Question -->
-        ...
-
-        <!-- The toggle icon sticks to the right -->
-        ...
-    </div>
-
-    <!-- Answer -->
-</div>
-`}
-css={`
-.container {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-}
-
-.container__heading {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ width: '60%' }}>
-                            <div
-                                style={{
-                                    margin: '0 auto',
-                                    paddingBottom: '24px',
-                                    width: '200px',
-                                }}
-                            >
-                                <Rectangle />
-                            </div>
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                    borderTop: '1px solid rgba(0, 0, 0, 0.3)',
-                                }}
-                            >
-                                <Item
-                                    index={0}
-                                    title={<div style={{ width: '40%' }}><Rectangle /></div>}
-                                >
-                                    <Block numberOfBlocks={10} />
-                                </Item>
-                            </div>
-                            <div
-                                style={{
-                                    borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
-                                }}
-                            >
-                                <Item
-                                    index={1}
-                                    title={<div style={{ width: '80%' }}><Rectangle /></div>}
-                                >
-                                    <Block numberOfBlocks={15} />
-                                </Item>
-                            </div>
-                            <div style={{ borderBottom: '1px solid rgba(0, 0, 0, 0.3)' }}>
-                                <Item
-                                    index={2}
-                                    title={<div style={{ width: '60%' }}><Rectangle /></div>}
-                                >
-                                    <Block numberOfBlocks={10} />
-                                </Item>
-                            </div>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.Accordion]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/radial-progress-bar/Details.tsx

@@ -1,189 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-import Pattern from '../../constants/Pattern';
-
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-interface RadialProgressProps {
-    percentages: number;
-}
-
-const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
-    return (
-        <div style={{ position: 'relative' }}>
-            <div
-                style={{
-                    alignItems: 'center',
-                    border: '12px solid rgba(0, 0, 0, 0.3)',
-                    borderRadius: '9999px',
-                    color: 'rgba(0, 0, 0, 0.3)',
-                    display: 'flex',
-                    fontSize: '24px',
-                    height: '128px',
-                    justifyContent: 'center',
-                    width: '128px',
-                }}
-            >
-                {percentages}%
-            </div>
-            <div
-                style={{
-                    clip: percentages >= 50
-                            ? 'rect(auto, auto, auto, auto)'
-                            : 'rect(0px, 128px, 128px, 64px)',
-                    height: '100%',
-                    left: 0,
-                    position: 'absolute',
-                    top: 0,
-                    width: '100%',
-                }}
-            >
-                <div
-                    style={{
-                        border: '12px solid #00449E',
-                        borderRadius: '9999px',
-                        clip: 'rect(0px, 64px, 128px, 0px)',
-                        height: '100%',
-                        position: 'absolute',
-                        transform: `rotate(${percentages * 360 / 100}deg)`,
-                        width: '100%',
-                    }}
-                />
-                <div
-                    style={{
-                        border: '12px solid #00449E',
-                        borderRadius: '9999px',
-                        clip: 'rect(0px, 64px, 128px, 0px)',
-                        height: '100%',
-                        position: 'absolute',
-                        transform: `rotate(${percentages >= 50 ? 180 : 0}deg)`,
-                        width: '100%',
-                    }}
-                />
-            </div>
-        </div>
-    );
-};
-
-const Details: React.FC<{}> = () => {
-    return (
-        <DetailsLayout pattern={Pattern.RadialProgressBar}>
-            <Helmet>
-                <meta name="description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="og:description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" />
-                <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Show number of percentages -->
-    <div class="container__percentages">
-        ...
-    </div>
-
-    <!-- The curve -->
-    <div class="container__curve">
-        <!-- The first half -->
-        <div class="container__half container__half--first"></div>
-
-        <!-- The second half -->
-        <div class="container__half container__half--second"></div>
-    </div>
-</div>
-`}
-css={`
-.container {
-    position: relative;
-}
-
-.container__percentages {
-    /* Center the content */
-    align-items: center;
-    display: flex;
-    justify-content: center;
-
-    /* Rounded border */
-    border: 12px solid rgba(0, 0, 0, 0.3);
-    border-radius: 9999px;
-
-    /* Size */
-    height: 128px;
-    width: 128px;
-}
-
-.container__curve {
-    /* Position */
-    left: 0;
-    position: absolute;
-    top: 0;
-
-    /* Take full size */
-    height: 100%;
-    width: 100%;
-
-    /* If percentages is less than 50 */
-    clip: rect(0px, 128px, 128px, 64px);
-
-    /* If percentages is greater than or equals to 50 */
-    clip: rect(auto, auto, auto, auto);
-}
-
-.container__half {
-    /* Take full size */
-    height: 100%;
-    position: absolute;
-    width: 100%;
-
-    /*
-    Background color of curve.
-    The border width should be the same as the area showing the percentages
-    */
-    border: 12px solid rgb(0, 68, 158);
-    border-radius: 9999px;
-}
-
-.container__half--first {    
-    /* Position */
-    clip: rect(0px, 64px, 128px, 0px);
-    transform: rotate(162deg); /* Number of percentages * 360 / 100 */
-}
-
-.container__half--second {
-    /* Position */
-    clip: rect(0px, 64px, 128px, 0px);
-
-    /* If percentages is less than 50 */
-    transform: rotate(0deg);
-
-    /* If percentages is greater than or equals to 50 */
-    transform: rotate(180deg);
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div style={{ marginRight: '16px' }}><RadialProgress percentages={45} /></div>
-                        <RadialProgress percentages={80} />
-                    </div>
-                </BrowserFrame>
-            </div>
-        </DetailsLayout>
-    );
-};
-
-export default Details;

client/patterns/radio-button-group/Details.tsx

@@ -1,154 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-import { Helmet } from 'react-helmet';
-
-import './radio-button-group.css';
-
-import RelatedPatterns from '../../components/RelatedPatterns';
-import Pattern from '../../constants/Pattern';
-import DetailsLayout from '../../layouts/DetailsLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-interface RadioProps {
-    value: string;
-}
-
-const Details: React.FC<{}> = () => {
-    const [selectedValue, setSelectedValue] = React.useState('1');
-
-    const Radio: React.FC<RadioProps> = ({ value, children }) => {
-        const click = () => setSelectedValue(value);
-
-        return (
-            <label
-                htmlFor="radio-button-group"
-                style={{
-                    alignItems: 'center',
-                    backgroundColor: value === selectedValue ? '#00449E' : 'transparent',
-                    cursor: 'pointer',
-                    display: 'inline-flex',
-                    padding: '8px',
-                }}
-            >
-                <input
-                    id="radio-button-group"
-                    type="radio"
-                    name="option"
-                    value={value}
-                    style={{ display: 'none' }}
-                    onChange={click}
-                />
-                {children}
-            </label>
-        );
-    };
-
-    return (
-        <DetailsLayout pattern={Pattern.RadioButtonGroup}>
-            <Helmet>
-                <meta name="description" content="Create a radio button group with CSS flexbox" />
-                <meta name="og:description" content="Create a radio button group with CSS flexbox" />
-                <meta name="twitter:description" content="Create a radio button group with CSS flexbox" />
-                <meta name="keywords" content="css flexbox, css radio button" />
-            </Helmet>
-            <div className='p-8 pb-20'>
-                <BrowserFrame
-html={`
-<div class="container">
-    <!-- Each radio item -->
-    <label class="container__label">
-        <!-- The radio input -->
-        <input type="radio" class="container__input" />
-
-        <!-- The text -->
-        ...
-    </label>
-
-    <!-- Repeat other items -->
-    ...
-</div>
-`}
-css={`
-.container {
-    display: flex;
-
-    /* Border */
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
-    height: 32px;
-}
-
-.container__label {
-    /* Center the content */
-    align-items: center;
-    display: inline-flex;
-
-    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    padding: 8px;
-
-    /* For not selected radio */
-    background-color: transparent;
-    color: #CCC;
-}
-
-.container__label:last-child {
-    /* Remove the right border from the last label */
-    border-right-color: transparent;
-}
-
-.container__label--selected {
-    /* For selected radio */
-    background-color: #00449E;
-    color: #FFF;
-}
-
-.container__input {
-    /* Hide it */
-    display: none;
-}
-`}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            justifyContent: 'center',
-                            padding: '8px',
-                        }}
-                    >
-                        <div
-                            className="p-radio-button-group"
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                borderRadius: '4px',
-                                display: 'flex',
-                                height: '32px',
-                            }}
-                        >
-                            <Radio value='1'>
-                                <div style={{ width: '80px' }}><Rectangle /></div>
-                            </Radio>
-                            <Radio value='2'>
-                                <div style={{ width: '120px' }}><Rectangle /></div>
-                            </Radio>
-                            <Radio value='3'>
-                                <div style={{ width: '100px' }}><Rectangle /></div>
-                            </Radio>
-                        </div>
-                    </div>
-                </BrowserFrame>
-            </div>
-
-            <RelatedPatterns patterns={[Pattern.CustomCheckboxButton, Pattern.CustomRadioButton]} />
-        </DetailsLayout>
-    );
-};
-
-export default Details;