Actions

src/pages/List/List.jsx

@@ -1,28 +1,63 @@
 import * as React from "react";
 import {graphql, Link} from "gatsby";
-import Breadcrumbs from "../../components/Breadcrumbs/Breadcrumbs";
 import Listing from "../../components/Listing/Listing";
+import Layout from "../../components/Layout/Layout";
+import Tabs from "../../components/Tabs/Tabs";
+import Filter from "../../components/Filter/Filter";
+
+const TABS = [
+    {
+        title: "Clothing"
+    },
+    {
+        title: "Shoes"
+    },
+    {
+        title: "Accessories"
+    }
+]
 
 const List = ({data, location}) => {
     const products = data.allDataJson.nodes;
     const images = data.allImageSharp.nodes;
 
     return (
-        <main>
-            <Breadcrumbs location={location.pathname} label="Insights"/>
+        <Layout breafcrumbs={location}>
             <h1>Insights</h1>
             <p className="text-container m-b-56">
                 Upcoming fashion insights, enabling you to make informed procurement and
                 manufacturing decisions that align with consumer preferences and market
                 demands
             </p>
-            <div className="center">
-                <Link to="/insights/" className="button button__primary active">
+            <div className="center flex flex--center flex--gap-32">
+                <Link
+                    to="/insights/"
+                    className="button button__primary active"
+                    style={{pointerEvents: 'none'}}
+                >
+                    Men’s Fashion
+                </Link>
+                <Link
+                    to="/insights/"
+                    className="button button__primary"
+                    style={{pointerEvents: 'none'}}
+                >
                     Women’s Fashion
                 </Link>
+                <Link
+                    to="/insights/"
+                    className="button button__primary active"
+                    style={{pointerEvents: 'none'}}
+                >
+                    Kid’s Fashion
+                </Link>
             </div>
+            <div className="center flex flex--center flex--gap-32">
+                <Tabs tabs={TABS} activeTabIndex={0} />
+            </div>
+            <Filter />
             <Listing products={products} images={images}/>
-        </main>
+        </Layout>
     );
 };
 export const query = graphql`