List products on sidebar

client/components/Product.tsx

@@ -0,0 +1,27 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 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">
+            <a href={product.url}>
+                <img className="product__logo" src={`/assets/${slug(product.name)}.png`} alt={`${product.name} - ${product.description}`} />
+                <div className="product__desc">{product.description}</div>
+            </a>
+        </div>
+    );
+};
+
+export default Product;

client/components/product.css

@@ -0,0 +1,22 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.product {
+    border: 1px solid rgba(0, 0, 0, .3);
+    border-radius: 0.5rem;
+    margin: 1rem 0;
+    overflow: hidden;
+}
+.product a {
+    text-decoration: none;
+}
+.product__logo {
+    height: auto;
+    width: 100%;
+}
+.product__desc {
+    padding: 0.5rem;
+    text-align: center;
+}

client/constants/ProductList.ts

@@ -0,0 +1,60 @@
+import ProductModel from './ProductModel';
+
+const ProductList: ProductModel[] = [
+    {
+        name: 'Blur Page',
+        url: 'https://blur.page',
+        description: 'A browser extension to hide sensitive information on a web page',
+        themeColor: '#4e7fb8',
+    },
+    {
+        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: 'CSS Layout',
+        url: 'https://csslayout.io',
+        description: 'A collection of popular layouts and patterns made with CSS',
+        themeColor: '#e7d900',
+    },
+    {
+        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

@@ -0,0 +1,6 @@
+export default interface ProductModel {
+    name: string;
+    url: string;
+    description: string;
+    themeColor: string;
+}

client/index.css

@@ -28,10 +28,24 @@ code {
     max-width: 64rem;
     padding: 0 1rem;
 }
+.content {
+    display: flex;
+}
 .main {
-    margin: 4rem 0;
+    flex: 1;
+    overflow: auto;
+}
+.sidebar {
+    display: none;
 }
 
+/* Sidebar */
+.sidebar__inner {
+    position: sticky;
+    top: 1rem;
+}
+
+/* Hero */
 .hero {
     background: var(--background-color);
     display: flex;
@@ -58,4 +72,24 @@ code {
     font-size: 2rem;
     margin: 2rem 0;
     text-align: center;
+}
+
+/* Responsive */
+@media (min-width: 640px) {
+    .sidebar {
+        display: block;
+        flex: 0 0 10rem;
+        margin-left: 0.5rem;
+    }
+}
+@media (min-width: 768px) {
+    .sidebar {
+        flex-basis: 12rem;
+    }
+}
+@media (min-width: 1024px) {
+    .sidebar {
+        flex-basis: 16rem;
+        margin-left: 1rem;
+    }
 }

client/pages/ExplorePage.tsx

@@ -9,7 +9,9 @@ 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 useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from '../layouts/Layout';
 import './explorePage.css';
@@ -32,133 +34,144 @@ const ExplorePage = () => {
             </div>
 
             <div className="container">
-                <Ad />
+                <div className="content">
+                    <main class="main">
+                        <section>
+                            <Heading title="Layout" />
 
-                <section>
+                            <div className="explore__collection">
-                    <Heading title="Layout" />
+                                <CoverCard pattern={Pattern.CardLayout} />
+                                <CoverCard pattern={Pattern.HolyGrail} />
+                                <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>
 
-                    <div className="explore__collection">
+                        <section>
-                        <CoverCard pattern={Pattern.CardLayout} />
+                            <Heading title="Navigation" />
-                        <CoverCard pattern={Pattern.HolyGrail} />
+
-                        <CoverCard pattern={Pattern.SameHeightColumns} />
+                            <div className="explore__collection">
-                        <CoverCard pattern={Pattern.Sidebar} />
+                                <CoverCard pattern={Pattern.Breadcrumb} />
-                        <CoverCard pattern={Pattern.SimpleGrid} />
+                                <CoverCard pattern={Pattern.CircularNavigation} />
-                        <CoverCard pattern={Pattern.SplitScreen} />
+                                <CoverCard pattern={Pattern.DotNavigation} />
-                        <CoverCard pattern={Pattern.StickyFooter} />
+                                <CoverCard pattern={Pattern.Drawer} />
-                        <CoverCard pattern={Pattern.StickyHeader} />
+                                <CoverCard pattern={Pattern.Dropdown} />
-                        <CoverCard pattern={Pattern.StickySections} />
+                                <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.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.FullBackground} />
+                                <CoverCard pattern={Pattern.InitialAvatar} />
+                                <CoverCard pattern={Pattern.KeyboardShortcut} />
+                                <CoverCard pattern={Pattern.LinedPaper} />
+                                <CoverCard pattern={Pattern.MediaObject} />
+                                <CoverCard pattern={Pattern.OverlayPlayButton} />
+                                <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.Timeline} />
+                                <CoverCard pattern={Pattern.TriangleButtons} />
+                                <CoverCard pattern={Pattern.VideoBackground} />
+                                <CoverCard pattern={Pattern.Watermark} />
+                            </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>
-                </section>
+                </div>
-
-                <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.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.FullBackground} />
-                        <CoverCard pattern={Pattern.InitialAvatar} />
-                        <CoverCard pattern={Pattern.KeyboardShortcut} />
-                        <CoverCard pattern={Pattern.LinedPaper} />
-                        <CoverCard pattern={Pattern.MediaObject} />
-                        <CoverCard pattern={Pattern.OverlayPlayButton} />
-                        <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.Timeline} />
-                        <CoverCard pattern={Pattern.TriangleButtons} />
-                        <CoverCard pattern={Pattern.VideoBackground} />
-                        <CoverCard pattern={Pattern.Watermark} />
-                    </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>
             </div>
         </Layout>
     );