carType page over
This commit is contained in:
49
components/cards/innerProductcard.tsx
Normal file
49
components/cards/innerProductcard.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
"use client"
|
||||
|
||||
import { innerCardTypes } from "@/types";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Text from "../lib_components/text";
|
||||
import { useCarDetail } from "../lib_components/carDetailProvider";
|
||||
|
||||
export default function InnerProductcard({ data }: { data: innerCardTypes }) {
|
||||
const route = useParams();
|
||||
const { setDetail } = useCarDetail();
|
||||
return (
|
||||
<Link
|
||||
href={`/${route.lang}/${route.carType}/${data.name}`}
|
||||
onClick={() => setDetail(data)}
|
||||
className=" flex flex-col items-center justify-between rounded-sm hover:scale-105 hover:cursor-pointer hover:shadow-[0px_0px_5px_10px_#ebebeb]"
|
||||
>
|
||||
<div className="rounded-t-lg bg-white">
|
||||
<Image
|
||||
src={data.image}
|
||||
alt={data.name}
|
||||
width={0}
|
||||
height={200}
|
||||
className="object-fill w-full max-h-[200px] h-full rounded-t-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-[#fafafa] w-full p-2 px-4 rounded-b-lg flex flex-col items-start justify-start gap-2">
|
||||
<div className="text-xl font-semibold ">
|
||||
<Text txt={data.name} />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Text txt="hour-price" />
|
||||
{data.price?.toLocaleString("uz-UZ")}
|
||||
<Text txt="wallet" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Text txt="min-time" />
|
||||
{data.min_order_time}
|
||||
<Text txt="time" />
|
||||
</div>
|
||||
<button className="w-full p-3 bg-secondary rounded-lg text-white border-2 border-secondary hover:cursor-pointer hover:bg-white hover:text-secondary">
|
||||
<Text txt="more" />
|
||||
</button>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -3,14 +3,17 @@
|
||||
import { ProductTypes } from "@/types";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Text from "../text";
|
||||
import Text from "../lib_components/text";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
export default function ProductCard({data}:{data: ProductTypes}) {
|
||||
const {lang} = useParams();
|
||||
return (
|
||||
<Link href={`/${lang}/${data.path}`} className="h-[400px] flex flex-col items-center justify-between rounded-sm hover:scale-105 hover:cursor-pointer hover:shadow-[0px_0px_5px_10px_#ebebeb]">
|
||||
<div className="rounded-t-lg bg-white py-15 px-2" >
|
||||
export default function ProductCard({ data }: { data: ProductTypes }) {
|
||||
const { lang } = useParams();
|
||||
return (
|
||||
<Link
|
||||
href={`/${lang}/${data.path}`}
|
||||
className="h-[400px] flex flex-col items-center justify-between rounded-sm hover:scale-105 hover:cursor-pointer hover:shadow-[0px_0px_5px_10px_#ebebeb]"
|
||||
>
|
||||
<div className="rounded-t-lg bg-white py-15 px-2">
|
||||
<Image
|
||||
src={data.image}
|
||||
alt={data.truck_name}
|
||||
@@ -20,8 +23,12 @@ export default function ProductCard({data}:{data: ProductTypes}) {
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center ">
|
||||
<p><Text txt={data.truck_name}/></p>
|
||||
<p className="text-secondary"><Text txt={data.desc}/></p>
|
||||
<p>
|
||||
<Text txt={data.truck_name} />
|
||||
</p>
|
||||
<p className="text-secondary">
|
||||
<Text txt={data.desc} />
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
||||
@@ -1,24 +1,30 @@
|
||||
import { ProductTypes } from "@/types";
|
||||
import Image, { StaticImageData } from "next/image";
|
||||
import Link from "next/link";
|
||||
import Text from "../text";
|
||||
import Text from "../lib_components/text";
|
||||
|
||||
export default function SliderCard({data}:{data:ProductTypes}) {
|
||||
export default function SliderCard({ data }: { data: ProductTypes }) {
|
||||
return (
|
||||
<Link href={data.path} id="news_slider_card" className="group hover:cursor-pointer" >
|
||||
<Image
|
||||
src={data.image}
|
||||
alt="slider image"
|
||||
width={600}
|
||||
height={600}
|
||||
className="object-cover max-w-[600px] w-full h-[300px]"
|
||||
/>
|
||||
<div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
|
||||
<div className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
|
||||
<Text txt={data.truck_name}/>
|
||||
</div>
|
||||
<div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary"><Text txt={data.desc}/></div>
|
||||
<Link
|
||||
href={data.path}
|
||||
id="news_slider_card"
|
||||
className="group hover:cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src={data.image}
|
||||
alt="slider image"
|
||||
width={600}
|
||||
height={600}
|
||||
className="object-cover max-w-[600px] w-full h-[300px]"
|
||||
/>
|
||||
<div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
|
||||
<div className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid">
|
||||
<Text txt={data.truck_name} />
|
||||
</div>
|
||||
<div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary">
|
||||
<Text txt={data.desc} />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user