feat: Implement image slider component!

Signed-off-by: Souptik Datta <souptikdatta2001@gmail.com>

components/GutenbergParser/ParseBlock.js

@@ -11,6 +11,7 @@ import Column from "./Column";
 import Columns from "./Columns";
 import MediaText from "./MediaText";
 import Paragraph from "./Paragraph/Paragraph";
+import Slider from "./Slider/Slider";
 
 const ParseBlock = ({blocks, depth, searchComponent, extra}) => {
 
@@ -156,13 +157,20 @@ const ParseBlock = ({blocks, depth, searchComponent, extra}) => {
 				);
 				break;
 			case "core/image":
-				var borderRadius = block?.attributes?.style?.border?.radius ?? "0px";
+				var borderRadius = block?.attributes?.style?.border?.radius ?? "10px";
 				customAttributes.height = block?.attributes?.height ?? "auto";
 				customAttributes.width = block?.attributes?.width ?? "auto";
 				elements.push(
-					<Image key={key} borderRadius={borderRadius} src={block.attributes.url} alt={block.attributes.alt} mb={customAttributes.mb} mt={customAttributes.mt} mr={customAttributes.mr} ml={customAttributes.ml} pl={customAttributes.pl} pr={customAttributes.pr} pt={customAttributes.pt} pb={customAttributes.pb} height={customAttributes.height} width={customAttributes.width} />
+					<Flex key={key} alignItems='center' justifyContent='center' mb={customAttributes.mb} mt={customAttributes.mt} mr={customAttributes.mr} ml={customAttributes.ml} pl={customAttributes.pl} pr={customAttributes.pr} pt={customAttributes.pt} pb={customAttributes.pb}>
+						<Image borderRadius={borderRadius} src={block.attributes.url} alt={block.attributes.alt} height={customAttributes.height} width={customAttributes.width} />
+					</Flex>
 				);
 				break;
+			case "core/gallery":
+				elements.push(
+					<Slider key={key} blocks={block.innerBlocks} depth={depth+1} />
+				)
+				break;
 			case "core/buttons":
 				let layout = {};
 				_.merge(layout, FLEX_LAYOUT, block.attributes.layout);

components/GutenbergParser/Slider/Slider.js

@@ -0,0 +1,57 @@
+import { Box, Icon, useToast, Image } from "@chakra-ui/react";
+import he from 'he';
+import { useEffect, useState, Children } from "react";
+import { BiCopy } from 'react-icons/bi';
+import { FaAngleLeft, FaAngleRight } from "react-icons/fa";
+import '@travelopia/web-components/dist/slider/style.css';
+
+const Slider = ({blocks, ...props}) => {
+
+	useEffect(() => {
+		function loadWebComponent() {
+		  import("@travelopia/web-components/dist/slider")
+		}
+		loadWebComponent();
+	}, []);
+
+	let slides = [];
+	let slideNavItems = [];
+
+	blocks.forEach((block, index) => {
+		slides.push(
+			<tp-slider-slide key={index}>
+				<Image src={block.attributes.url} alt={block.attributes.alt} height={block?.attributes?.height ?? 'auto'} width={block?.attributes?.width ?? 'auto'} />
+				{
+					block?.attributes?.caption !== ''
+					&&
+					<Box className="caption">{block?.attributes?.caption}</Box>
+				}
+			</tp-slider-slide>
+		);
+
+		slideNavItems.push(
+			<tp-slider-nav-item key={index}></tp-slider-nav-item>
+		)
+	});
+
+
+	return (
+		<div className="slider-container">
+			<tp-slider flexible-height="yes" infinite="yes" swipe="yes">
+				<tp-slider-track>
+					<tp-slider-arrow direction="previous"><button><FaAngleLeft /></button></tp-slider-arrow>
+					<tp-slider-arrow direction="next"><button><FaAngleRight /></button></tp-slider-arrow>
+					<tp-slider-slides>
+						{slides}
+					</tp-slider-slides>
+				</tp-slider-track>
+				<tp-slider-nav>
+					{slideNavItems}
+				</tp-slider-nav>
+			</tp-slider>
+		</div>
+	);
+
+}
+
+export default Slider;

components/GutenbergParser/Slider/Slider.module.css

@@ -0,0 +1,6 @@
+.test {
+	height: 10px;
+	width: 10px;
+	color: white;
+	content: "\00B7";
+}

package.json

@@ -17,6 +17,7 @@
     "@emotion/server": "latest",
     "@emotion/styled": "^11.11.0",
     "@fontsource/heebo": "^5.0.3",
+    "@travelopia/web-components": "^0.5.5",
     "focus-visible": "^5.2.0",
     "framer-motion": "^10.12.16",
     "he": "^1.2.0",

pages/_app.js

@@ -7,6 +7,7 @@ import NProgress from 'nprogress'
 import { useEffect } from 'react'
 import TagManager from 'react-gtm-module'
 import '../styles/globals.css'
+import '../styles/Slider.css'
 import { theme } from '../styles/theme'
 
 const GlobalStyles = css`