products and product/slug page done
This commit is contained in:
nabijonovdavronbek619@gmail.com
27
components/pages/products/slug/features.tsx
Normal file
27
components/pages/products/slug/features.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
export function Features({ features }: { features: string[] }) {
|
||||
return (
|
||||
<table className="w-full rounded-xl overflow-hidden">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-700 bg-black">
|
||||
<th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
|
||||
Feature
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{features.map((feature, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className={` border-gray-700 transition-colors hover:bg-opacity-80 ${
|
||||
index % 2 === 0 ? "bg-[#323232]" : "bg-black/20"
|
||||
}`}
|
||||
>
|
||||
<td className="px-4 py-4 md:px-6 text-sm md:text-base text-white font-medium">
|
||||
{feature}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
112
components/pages/products/slug/rightSide.tsx
Normal file
112
components/pages/products/slug/rightSide.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
|
||||
import { Facebook } from "lucide-react";
|
||||
|
||||
const socialLinks = [
|
||||
{ name: "telegram", icon: "✈️", color: "#0088cc" },
|
||||
{ name: "facebook", icon: <Facebook />, color: "#1877F2" },
|
||||
{ name: "odnoklassniki", icon: "ok", color: "#ED7100" },
|
||||
{ name: "vkontakte", icon: "VK", color: "#0077FF" },
|
||||
{ name: "twitter", icon: "𝕏", color: "#1DA1F2" },
|
||||
{ name: "whatsapp", icon: "W", color: "#25D366" },
|
||||
];
|
||||
|
||||
interface RightSideProps {
|
||||
title: string;
|
||||
name: string;
|
||||
description: string;
|
||||
statusText: string;
|
||||
statusColor: string;
|
||||
}
|
||||
|
||||
export function RightSide({
|
||||
title,
|
||||
name,
|
||||
description,
|
||||
statusColor,
|
||||
statusText,
|
||||
}: RightSideProps) {
|
||||
return (
|
||||
<div className="flex flex-col justify-center">
|
||||
{/* Title */}
|
||||
<h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
{/* Article ID */}
|
||||
<div className="mb-3">
|
||||
<p className="text-gray-400">
|
||||
Artikul:
|
||||
<span className="text-white font-semibold">{name}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Status Badge */}
|
||||
<div className="mb-2">
|
||||
<span
|
||||
className={`inline-block py-2 rounded text-sm font-semibold ${statusColor}`}
|
||||
>
|
||||
{statusText}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* description */}
|
||||
<div className="mb-2">
|
||||
<p className="text-sm font-bold text-white mb-4 leading-tight">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Price Section */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-6">
|
||||
17.00$
|
||||
</h2>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-6">
|
||||
{/* <button
|
||||
onClick={onPriceClick}
|
||||
className="flex-1 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"
|
||||
>
|
||||
Narxni bilish
|
||||
</button> */}
|
||||
<button
|
||||
onClick={() => {}}
|
||||
className="flex-1 border-2 border-red-700 text-red-700 hover:bg-red-50 font-bold py-3 px-6 rounded-lg transition duration-300"
|
||||
>
|
||||
Xabar yuborish
|
||||
</button>
|
||||
{/* <button
|
||||
onClick={() => setIsFavorite(!isFavorite)}
|
||||
className="p-3 border-2 border-gray-600 rounded-lg hover:border-red-700 transition duration-300"
|
||||
title="Add to favorites"
|
||||
>
|
||||
<Heart
|
||||
size={24}
|
||||
className={
|
||||
isFavorite ? "fill-red-700 text-red-700" : "text-gray-600"
|
||||
}
|
||||
/>
|
||||
</button> */}
|
||||
</div>
|
||||
|
||||
{/* Social Share Icons */}
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex gap-2">
|
||||
{socialLinks.map((social) => (
|
||||
<a
|
||||
key={social.name}
|
||||
href="#"
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition duration-300 hover:scale-110"
|
||||
style={{ backgroundColor: social.color }}
|
||||
title={social.name}
|
||||
>
|
||||
{social.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
59
components/pages/products/slug/slider.tsx
Normal file
59
components/pages/products/slug/slider.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import { DATA } from "@/lib/demoData";
|
||||
|
||||
// The custom CSS selectors for navigation
|
||||
const navigationPrevEl = ".custom-swiper-prev";
|
||||
const navigationNextEl = ".custom-swiper-next";
|
||||
|
||||
export function SliderComp({ imgs }: { imgs: string[] }) {
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-center relative">
|
||||
<Swiper
|
||||
modules={[Navigation]}
|
||||
navigation={{
|
||||
// Pass the class selectors here
|
||||
prevEl: navigationPrevEl,
|
||||
nextEl: navigationNextEl,
|
||||
}}
|
||||
pagination={{ clickable: true }}
|
||||
className="w-full h-96 md:h-125 bg-white rounded-lg overflow-hidden shadow-lg"
|
||||
>
|
||||
{imgs.map((image, index) => (
|
||||
<SwiperSlide
|
||||
key={index}
|
||||
className="bg-white flex items-center justify-center"
|
||||
>
|
||||
<img
|
||||
src={image || "/placeholder.svg"}
|
||||
alt={`${DATA[0].title} - ${index + 1}`}
|
||||
className="w-full h-full object-contain p-4"
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
{/* Custom buttons */}
|
||||
<button
|
||||
className={`${navigationPrevEl.replace(
|
||||
".",
|
||||
"",
|
||||
)} absolute z-10 top-1/2 left-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center
|
||||
text-white flex items-center justify-center hover:cursor-pointer transition`}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
className={`${navigationNextEl.replace(
|
||||
".",
|
||||
"",
|
||||
)} absolute z-10 top-1/2 right-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:cursor-pointer transition `}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user