test/src/pages/List/List.jsx

import * as React from "react";
import {graphql, Link} from "gatsby";
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 (
        <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 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}/>
        </Layout>
    );
};
export const query = graphql`
  query {
    allDataJson {
      nodes {
        name
        images
        tags
        description
        socialMedia {
        Twitter {
          Social_Media_Influence
          Tweet_Bookmarks
          Tweet_Bookmarks_Relative_to_Average
          Tweet_Likes
          Tweet_Likes_Relative_to_Average
          Tweet_Quotes
          Tweet_Quotes_Relative_to_Average
          Tweet_Reposts
          Tweet_Reposts_Relative_to_Average
          Tweet_Views
          Tweet_Views_Relative_to_Average
          found
        }
        Instagram {
          Post_Comments
          Post_Comments_Relative_to_Average
          Post_Likes
          Post_Likes_Relative_to_Average
          Social_Media_Influence
          found
        }
      }
      }
    }
    allImageSharp(sort: { original: { src: ASC } }) {
      nodes {
        gatsbyImageData(
          width: 400
          height: 500
          placeholder: BLURRED
          transformOptions: { cropFocus: CENTER, fit: COVER }
        )
        fluid {
          originalName
        }
      }
    }
  }
`;

export default List;