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; font-family: "Roboto", sans-serif;
} }

13
app/layout.tsx
View File

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

1
components/carTypePageParts/productCard.tsx
View File

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

5
components/pageParts/products.tsx
View File

@@ -36,14 +36,14 @@ export default function Products() {
</div> </div>
{/* product filters */} {/* 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) => ( {productFilterTypes.map((item, index) => (
<button <button
key={index} key={index}
onClick={() => setProductFilter(item.name)} onClick={() => setProductFilter(item.name)}
className={`${ className={`${
productFilter === item.name ? "bg-secondary" : "" 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} /> <Text txt={item.name} />
<Image <Image
@@ -51,6 +51,7 @@ export default function Products() {
alt="Truck images" alt="Truck images"
width={50} width={50}
height={50} height={50}
className="object-cover"
/> />
</button> </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>
)}
</>
);
}