Tweak the pattern page

client/helpers/randomFromArray.ts

@@ -3,6 +3,8 @@
  * (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
  */
 
-const randomFromArray = (array: number[]) => array[Math.floor(Math.random() * array.length)];
+function randomFromArray<T>(array: T[]): T {
+    return array[Math.floor(Math.random() * array.length)];
+};
 
 export default randomFromArray;

client/index.css

@@ -30,6 +30,7 @@ code {
 }
 .content {
     display: flex;
+    margin: 1rem 0;
 }
 .main {
     flex: 1;
@@ -60,7 +61,7 @@ code {
     object-fit: cover;
     width: 24rem;
 }
-.hreo__heading {
+.hero__heading {
     color: var(--text-color);
     font-size: 3rem;
     margin: 2rem 0;
@@ -78,18 +79,18 @@ code {
 @media (min-width: 640px) {
     .sidebar {
         display: block;
-        flex: 0 0 10rem;
+        flex: 0 0 8rem;
         margin-left: 0.5rem;
     }
 }
 @media (min-width: 768px) {
     .sidebar {
-        flex-basis: 12rem;
+        flex-basis: 10rem;
     }
 }
 @media (min-width: 1024px) {
     .sidebar {
-        flex-basis: 16rem;
+        flex-basis: 12rem;
         margin-left: 1rem;
     }
 }

client/layouts/DetailsLayout.tsx

@@ -4,11 +4,13 @@
  */
 
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 import Ad from '../components/Ad';
 import useDocumentTitle from '../hooks/useDocumentTitle';
 import Layout from './Layout';
+import Product from '../components/Product';
+import { ProductList } from '../constants/ProductList';
+import randomFromArray from '../helpers/randomFromArray';
 
 interface DetailsLayoutProps {
     title: string;
@@ -17,32 +19,27 @@ interface DetailsLayoutProps {
 const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
     useDocumentTitle(`CSS Layout ∙ ${title}`);
 
+    const product = randomFromArray(ProductList);
+
     return (
         <Layout>
-            <div className='flex sm:text-2xl p-4 xl:pl-0'>
+            <div className="hero">
-                <Link
+                <div className="container">
-                    to="/"
+                    <h1 className="hero__heading">{title}</h1>
-                    style={{
-                        textDecoration: 'none',
-                    }}
-                >
-                    Home
-                </Link>
-                <span className='mx-2'>/</span>
-                <Link
-                    to="/patterns"
-                    style={{
-                        textDecoration: 'none',
-                    }}
-                >
-                    Explore
-                </Link>
-                <span className='mx-2'>/</span>
-                <h1>{title}</h1>
                 </div>
-            <div className='xl:border xl:border-gray-400'>
+            </div>
+            <div className="container">
+                <div className="content">
+                    <main className="main">
                         {children}
+                    </main>
+                    <div className="sidebar">
+                        <div className="sidebar__inner">
                             <Ad />
+                            <Product product={product} />
+                        </div>
+                    </div>
+                </div>
             </div>
         </Layout>
     );

client/pages/ExplorePage.tsx

@@ -28,14 +28,14 @@ const ExplorePage = () => {
             </Helmet>
             <div className="hero">
                 <div className="container">
-                    <h1 className="hreo__heading">Collection of {numPatterns} patterns</h1>
+                    <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 class="main">
+                    <main className="main">
                         <section>
                             <Heading title="Layout" />