feat : in intro component button andd scroll to products(configs) section(div)
This commit is contained in:
22
src/components/scrollLink/index.tsx
Normal file
22
src/components/scrollLink/index.tsx
Normal 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;
|
||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
5
src/types/props.d.ts
vendored
5
src/types/props.d.ts
vendored
@@ -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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user