diff --git a/app/globals.css b/app/globals.css index dc663f2..aed7a89 100644 --- a/app/globals.css +++ b/app/globals.css @@ -29,7 +29,7 @@ body { } * { - transition: 0.6s ease-in-out all; + transition: 0.3s ease-in-out all; font-family: "Roboto", sans-serif; } diff --git a/app/layout.tsx b/app/layout.tsx index 10a23ad..13295e8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -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 { dir } from "i18next"; 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 ( {children} + ); diff --git a/components/carTypePageParts/productCard.tsx b/components/carTypePageParts/productCard.tsx index d1a3fe3..65b5dc5 100644 --- a/components/carTypePageParts/productCard.tsx +++ b/components/carTypePageParts/productCard.tsx @@ -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" /> diff --git a/components/pageParts/products.tsx b/components/pageParts/products.tsx index 56a2210..11b1703 100644 --- a/components/pageParts/products.tsx +++ b/components/pageParts/products.tsx @@ -36,14 +36,14 @@ export default function Products() { {/* product filters */} -
+
{productFilterTypes.map((item, index) => ( ))} diff --git a/components/upScroll.tsx b/components/upScroll.tsx new file mode 100644 index 0000000..93d94f8 --- /dev/null +++ b/components/upScroll.tsx @@ -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 && ( + + + + )} + + ); +}