From 8c91e5bf14e3e3be60d3a4aecf1687fe887289b0 Mon Sep 17 00:00:00 2001
From: alij <ali.josheghani2005@gmail.com>
Date: Sun, 23 Jun 2024 16:33:10 +0430
Subject: [PATCH] feat : in intro component button andd scroll to
 products(configs) section(div)

---
 src/components/scrollLink/index.tsx           | 22 +++++++++++++++++++
 src/pages/shop/section/intro/Intro.tsx        |  5 ++++-
 .../shop/section/productList/ProductList.tsx  |  6 ++---
 src/types/props.d.ts                          |  5 +++++
 4 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 src/components/scrollLink/index.tsx

diff --git a/src/components/scrollLink/index.tsx b/src/components/scrollLink/index.tsx
new file mode 100644
index 0000000..a31dd0d
--- /dev/null
+++ b/src/components/scrollLink/index.tsx
@@ -0,0 +1,22 @@
+// components/SmoothScrollLink.tsx
+import React from 'react';
+import { ScrollLinkProps } from '../../types/props';
+
+
+const SmoothScrollLink: React.FC<ScrollLinkProps> = ({ to, children }) => {
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    event.preventDefault();
+    const targetElement = document.querySelector(to);
+    if (targetElement) {
+      targetElement.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <a href={to} onClick={handleClick}>
+      {children}
+    </a>
+  );
+};
+
+export default SmoothScrollLink;
diff --git a/src/pages/shop/section/intro/Intro.tsx b/src/pages/shop/section/intro/Intro.tsx
index 497499d..53bda0f 100644
--- a/src/pages/shop/section/intro/Intro.tsx
+++ b/src/pages/shop/section/intro/Intro.tsx
@@ -1,6 +1,7 @@
 import Button from "../../../../components/button";
 
 import Rocket3D from "../../../../assets/ui/Rocket.png";
+import SmoothScrollLink from "../../../../components/scrollLink";
 
 const Intro = () => {
   return (
@@ -15,7 +16,9 @@ const Intro = () => {
         <p className="text-center text-xl text-gray-600">
           سال ها تجربه پشت یک کانفیگ شماست
         </p>
-        <Button extra="max-md:!hidden">همین الان میخرم</Button>
+        <SmoothScrollLink to="#configs">
+          <Button >برو به فروشگاه</Button>
+        </SmoothScrollLink>
       </div>
       <div className="w-full h-full flex justify-center py-4 mx-auto items-center max-md:hidden">
         <img
diff --git a/src/pages/shop/section/productList/ProductList.tsx b/src/pages/shop/section/productList/ProductList.tsx
index b32573a..5e35ceb 100644
--- a/src/pages/shop/section/productList/ProductList.tsx
+++ b/src/pages/shop/section/productList/ProductList.tsx
@@ -14,10 +14,10 @@ const ProductList = () => {
     },
   });
   return (
-    <div className="relative w-full h-full max-md:mt-4 md:mt-8 ">
+    <div className="relative w-full h-full max-md:mt-4 md:mt-8 " id="configs">
       <div className="w-full h-full gap-4 md:gap-6 flex flex-col p-5 justify-center items-center">
-        <h1 className="max-md:text-lg text-center text-2xl font-bold">
-          برای انتخاب پلن مورد نظر کلیک کنید تا پلن و سرویس ها براتون نمایش داده
+        <h1 className="max-md:text-sm text-center text-2xl font-bold">
+          برای انتخاب سرویس مورد نظر کلیک کنید تا براتون نمایش داده
           شود
         </h1>
         <ButtonList
diff --git a/src/types/props.d.ts b/src/types/props.d.ts
index b0fe967..abbff3a 100644
--- a/src/types/props.d.ts
+++ b/src/types/props.d.ts
@@ -225,3 +225,8 @@ interface ProfileDetailsProps {
   error: Error | AxiosError | null;
   userTitle: string;
 }
+
+interface ScrollLinkProps {
+  to: string;
+  children: React.ReactNode;
+}