import React, { Fragment } from "react"; import Slider from "react-slick"; import { Link } from "gatsby"; import { CardImg } from "reactstrap"; import TagsYAML from '../admin-config/tagslist.yml'; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import "bootstrap/dist/css/bootstrap.min.css"; import "../sass/cards.sass"; const _ = require("lodash"); function SampleNextArrow() { return <div style={{ display: "none" }} />; } const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 4, slidesToScroll: 1, initialSlide: 0, autoplay: true, autoplaySpeed: 5000, cssEase: "linear", swipeToSlide: true, pauseOnHover: true, nextArrow: <SampleNextArrow />, prevArrow: <SampleNextArrow />, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 1, infinite: true, dots: true, }, }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 1, }, }, { breakpoint: 480, settings: { slidesToShow: 2, slidesToScroll: 1, }, }, ], }; const SlickSlider = () => { // const data = useStaticQuery(graphql` // query categorySliderQuery { // allMarkdownRemark { // edges { // node { // frontmatter { // tags // templateKey // } // } // } // } // } // `); // let tagsArray = []; // data.allMarkdownRemark.edges.forEach((edge) => { // if (edge.node.frontmatter.templateKey === "blog-post") // edge.node.frontmatter.tags.forEach((tag) => tagsArray.push(tag)); // }); // var finalTagsArray = _.uniq(tagsArray); var finalTagsArray = TagsYAML.tagslist const renderFallbackImg = (e) => { // Will replace broken image e.target.src = "https://via.placeholder.com/200?text=." } return ( <Fragment> <div className="categoryHeader">Categories</div> <div className="underline"></div> <div className="slider-category"> <div className="slider-equalizer"> <Slider {...settings}> {finalTagsArray.map((tag) => ( <div className="category"> <Link to={"/categories/" + _.kebabCase(tag.name)}> <div className="overlay">{_.startCase(tag.name)}</div> </Link> <CardImg width="100%" src={tag.icon} alt={tag.name} className="categoryImg" onError={renderFallbackImg} ></CardImg> </div> ))} </Slider> </div> </div> </Fragment> ); }; export default SlickSlider;