feat : in intro component button andd scroll to products(configs) section(div)

This commit is contained in:
alij
2024-06-23 16:33:10 +04:30
parent d2f6242a5b
commit 8c91e5bf14
4 changed files with 34 additions and 4 deletions

View File

@@ -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;

View File

@@ -1,6 +1,7 @@
import Button from "../../../../components/button"; import Button from "../../../../components/button";
import Rocket3D from "../../../../assets/ui/Rocket.png"; import Rocket3D from "../../../../assets/ui/Rocket.png";
import SmoothScrollLink from "../../../../components/scrollLink";
const Intro = () => { const Intro = () => {
return ( return (
@@ -15,7 +16,9 @@ const Intro = () => {
<p className="text-center text-xl text-gray-600"> <p className="text-center text-xl text-gray-600">
سال ها تجربه پشت یک کانفیگ شماست سال ها تجربه پشت یک کانفیگ شماست
</p> </p>
<Button extra="max-md:!hidden">همین الان میخرم</Button> <SmoothScrollLink to="#configs">
<Button >برو به فروشگاه</Button>
</SmoothScrollLink>
</div> </div>
<div className="w-full h-full flex justify-center py-4 mx-auto items-center max-md:hidden"> <div className="w-full h-full flex justify-center py-4 mx-auto items-center max-md:hidden">
<img <img

View File

@@ -14,10 +14,10 @@ const ProductList = () => {
}, },
}); });
return ( 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"> <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> </h1>
<ButtonList <ButtonList

View File

@@ -225,3 +225,8 @@ interface ProfileDetailsProps {
error: Error | AxiosError | null; error: Error | AxiosError | null;
userTitle: string; userTitle: string;
} }
interface ScrollLinkProps {
to: string;
children: React.ReactNode;
}