Init

2024-10-12 02:08:44 +03:00
commit 680168f6de
34 changed files with 21951 additions and 0 deletions
@@ -0,0 +1,129 @@
+import * as React from 'react';
+import Slider from 'react-slick';
+import {graphql} from 'gatsby';
+import {GatsbyImage} from 'gatsby-plugin-image';
+
+import Badge from '../../components/Badge/Badge';
+import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import SocialMediaTooltips from "../../components/SocialMediaTooltips/SocialMediaTooltips";
+import getConfidence from '../../helpers/getConfidence';
+
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+function ProductPage({location, pageContext, data}) {
+    const settings = {
+        customPaging(i) {
+            return (
+                <a>
+                    <GatsbyImage
+                        image={images[i].gatsbyImageData}
+                        alt={`${name} image thumb ${i}`}
+                    />
+                </a>
+            );
+        },
+        dots: true,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        nextArrow: <></>,
+        prevArrow: <></>,
+    };
+
+    const images = data.allImageSharp.nodes;
+
+    const MEDIA_LIST = ['TalkWalker', 'Twitter', 'Instagram', 'Google Search'];
+
+    const {name, tags, sources, description, socialMedia} = pageContext.data;
+
+    return (
+        <main>
+            <Breadcrumbs location={location.pathname} label={name}/>
+            <div className="product">
+                <div className="product__data product__data--mobile">
+                    <h1 className="product__title">{name}</h1>
+                    <p className="product__subtitle">Current Trend</p>
+                    <div
+                        className={`product__confidence product__confidence--${getConfidence(socialMedia)}`}
+                    >
+                        <SocialMediaTooltips product={pageContext.data}/>
+                    </div>
+                </div>
+                <div className="product__slider">
+                    <Slider {...settings}>
+                        {images.map((image, index) => (
+                            <GatsbyImage
+                                key={index}
+                                image={image.gatsbyImageData}
+                                alt={`${name} image ${index}`}
+                            />
+                        ))}
+                    </Slider>
+                </div>
+                <div className="product__data product__data--desktop">
+                    <h1 className="product__title">{name}</h1>
+                    <p className="product__subtitle">Current Signal</p>
+                    <div
+                        className={`product__confidence product__confidence--${getConfidence(socialMedia)}`}
+                    >
+                        <SocialMediaTooltips product={pageContext.data}/>
+                    </div>
+                    <div className="product__badge-list">
+                        {tags.split(",").map((tag, index) => (
+                            <Badge tag={tag} key={`badge_${index}`}/>
+                        ))}
+                    </div>
+                    <div className="product__badge-list">
+
+                        {sources.split(",").map((source, index) => (
+                            <Badge tag={source} key={`badge_${index}`} isSource={true}/>
+                        ))}
+                    </div>
+                    <p className="product__description">{description}</p>
+                    <ul className="product__media">
+                        {MEDIA_LIST
+                            .sort((prev, current) => socialMedia[current] ? socialMedia[current]?.Social_Media_Influence - socialMedia[prev]?.Social_Media_Influence : -1)
+                            .map((media, index) => (
+                                <li className="product__media-item" key={`media_${index}`}>
+                                    <input
+                                        id={media.replace(' ', '')}
+                                        type="checkbox"
+                                        checked={socialMedia[media]?.found}
+                                        className="checkbox"
+                                        disabled
+                                    />
+                                    <label
+                                        htmlFor={media.replace(' ', '')}>{media}</label>
+                                </li>
+                            ))}
+                    </ul>
+                </div>
+            </div>
+        </main>
+    );
+}
+
+export default ProductPage;
+
+export const query = graphql`
+  query ProductImages($images: [String]) {
+    allImageSharp(
+      sort: { original: { src: ASC } }
+      filter: { fluid: { originalName: { in: $images } } }
+    ) {
+      nodes {
+        gatsbyImageData(
+          width: 600
+          height: 800
+          placeholder: BLURRED
+          transformOptions: { cropFocus: CENTER, fit: COVER }
+        )
+        fluid {
+          originalName
+        }
+      }
+    }
+  }
+`;