From 16ba7ab04352d857b13efaf99e63c30cd17759fc Mon Sep 17 00:00:00 2001
From: Runjuu <hi@runjuu.com>
Date: Mon, 5 Jun 2023 15:42:32 -0700
Subject: [PATCH] feat(products/shop): add coming soon tips

---
 .../components/pages/products/Sections/ParallaxSection.tsx  | 5 ++++-
 sites/crossbell.io/components/pages/products/lazy.tsx       | 6 ++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/sites/crossbell.io/components/pages/products/Sections/ParallaxSection.tsx b/sites/crossbell.io/components/pages/products/Sections/ParallaxSection.tsx
index 5f8e1e0b..0e12865c 100644
--- a/sites/crossbell.io/components/pages/products/Sections/ParallaxSection.tsx
+++ b/sites/crossbell.io/components/pages/products/Sections/ParallaxSection.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, PropsWithChildren } from "react";
+import React, { ComponentProps, PropsWithChildren } from "react";
 import { m, useTime, useTransform } from "framer-motion";
 import { Text, Title, UnstyledButton } from "@mantine/core";
 import BaseSection from "./BaseSection";
@@ -15,6 +15,7 @@ export default function ParallaxSection({
 	btnText,
 	btnHoverClassName,
 	link,
+	onClick,
 	image,
 	children,
 }: PropsWithChildren<{
@@ -24,6 +25,7 @@ export default function ParallaxSection({
 	btnText: string;
 	btnHoverClassName?: string;
 	link: string;
+	onClick?: (event: React.MouseEvent) => void;
 	image: ComponentProps<typeof Image>["src"];
 }>) {
 	// image animation
@@ -66,6 +68,7 @@ export default function ParallaxSection({
 						<UnstyledButton
 							component={Link}
 							href={link}
+							onClick={onClick}
 							target={link.startsWith("/") ? "_self" : "_blank"}
 							className={classNames(
 								"mt-50px relative flex flex-row items-center justify-center space-x-10px w-300px h-60px rounded-md bg-black transition-colors group",
diff --git a/sites/crossbell.io/components/pages/products/lazy.tsx b/sites/crossbell.io/components/pages/products/lazy.tsx
index 911f4d0d..79c20d9b 100644
--- a/sites/crossbell.io/components/pages/products/lazy.tsx
+++ b/sites/crossbell.io/components/pages/products/lazy.tsx
@@ -1,5 +1,6 @@
 import { m, useMotionTemplate, useTime, useTransform } from "framer-motion";
 import { useMediaQuery } from "@mantine/hooks";
+import { showNotification } from "@mantine/notifications";
 
 import { Image } from "~/shared/components/image";
 import config from "~/shared/config";
@@ -97,6 +98,11 @@ export default function LazyIndex() {
 					btnText="Shop now"
 					btnHoverClassName="hover:bg-[#E65040]"
 					link="/shop"
+					onClick={(event) => {
+						event.stopPropagation();
+						event.preventDefault();
+						showNotification({ message: "Coming Soon", color: "blue" });
+					}}
 					image={shopImage}
 				/>