Dmytro Tkachenko
114 lines
3.0 KiB
React
114 lines
3.0 KiB
React
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;
|