Davron/spestexnika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ScroolToTop icon button

Browse Source
This commit is contained in:
Davron Chetin
2025-10-14 12:23:13 +05:00
parent 1eb2ad9169
commit c4a43ddd1e
5 changed files with 60 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/globals.css
View File

@@ -29,7 +29,7 @@ body {
}
* {
transition: 0.6s ease-in-out all;
transition: 0.3s ease-in-out all;
font-family: "Roboto", sans-serif;
}

11
app/layout.tsx
View File

@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { dir } from "i18next";
import { languages } from "../i18n/settings";
import "./globals.css";
import UpScrollIcon from "@/components/upScroll";
const geistSans = Geist({
variable: "--font-geist-sans",
@@ -19,18 +19,21 @@ export const metadata: Metadata = {
description: "Generated by create next app",
};
export default function RootLayout({
children,
params
params,
}: Readonly<{
children: React.ReactNode;
params:{lang:string}
params: { lang: string };
}>) {
return (
<html lang={params.lang} dir={dir(params.lang)}>
<body>
{children}
<UpScrollIcon/>
</body>
</html>
);

1
components/carTypePageParts/productCard.tsx
View File

@@ -12,6 +12,7 @@ export default function ProductCard({data}:{data: ProductTypes}) {
src={data.image}
alt={data.truck_name}
width={200}
height={200}
className="object-contain h-auto"
/>
</div>

5
components/pageParts/products.tsx
View File

@@ -36,14 +36,14 @@ export default function Products() {
</div>
{/* product filters */}
<div className="flex flex-wrap gap-3 items-center justify-center">
<div className="flex flex-wrap gap-1 items-center justify-center mb-10 ">
{productFilterTypes.map((item, index) => (
<button
key={index}
onClick={() => setProductFilter(item.name)}
className={`${
productFilter === item.name ? "bg-secondary" : ""
} flex items-center gap-2 hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-8 py-3 text-2xl rounded-tr-full rounded-bl-full `}
} flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
>
<Text txt={item.name} />
<Image
@@ -51,6 +51,7 @@ export default function Products() {
alt="Truck images"
width={50}
height={50}
className="object-cover"
/>
</button>
))}

47
components/upScroll.tsx Normal file
View File

@@ -0,0 +1,47 @@
"use client";
import { FaArrowUp } from "react-icons/fa";
import { useEffect, useState, useCallback } from "react";
export default function UpScrollIcon() {
const [showButton, setShowButton] = useState(false);
// Scroll hodisasini boshqaruvchi funksiya
const handleScroll = useCallback(() => {
if (window.scrollY > 200) {
// 200px dan pastga tushganda tugma ko'rinadi
setShowButton(true);
} else {
setShowButton(false);
}
}, []);
useEffect(() => {
window.addEventListener("scroll", handleScroll);
// Tozalash (cleanup)
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, [handleScroll]);
// Scrollni yuqoriga olib chiqish funksiyasi
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth", // silliq ko'tarilish
});
};
return (
<>
{showButton && (
<span
onClick={scrollToTop}
className="fixed bottom-6 right-6 bg-secondary hover:bg-primary text-white p-3 rounded-full cursor-pointer shadow-lg transition"
>
<FaArrowUp size={20} />
</span>
)}
</>
);
}