file name and location updayed for better be
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -1,36 +0,0 @@
|
||||
// Empty State Component
|
||||
export function EmptyState() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#1e1d1c] flex items-center justify-center px-4">
|
||||
<div className="text-center max-w-md">
|
||||
<div className="w-24 h-24 mx-auto mb-6 bg-gray-800 rounded-full flex items-center justify-center">
|
||||
<svg
|
||||
className="w-12 h-12 text-gray-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-white mb-2">
|
||||
Mahsulot topilmadi
|
||||
</h2>
|
||||
<p className="text-gray-400 mb-6">
|
||||
Siz qidirayotgan mahsulot mavjud emas yoki o'chirilgan
|
||||
</p>
|
||||
<a
|
||||
href="/products"
|
||||
className="inline-block bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition"
|
||||
>
|
||||
Mahsulotlarga qaytish
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export function Features({ features }: { features: string[] }) {
|
||||
const t = useTranslations();
|
||||
if (!features || features.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-12">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
|
||||
{t("products.features")}
|
||||
</h2>
|
||||
<div className="rounded-xl overflow-hidden border border-gray-800 shadow-xl">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="bg-linear-to-r from-stone-800 to-black/10 border-b border-gray-800">
|
||||
<th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
|
||||
{t("products.feature")}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{features.map((feature, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className={`border-b border-gray-800 last:border-b-0 transition-colors hover:bg-red-900/10 ${
|
||||
index % 2 === 0 ? "bg-[#252525]" : "bg-[#1e1e1e]"
|
||||
}`}
|
||||
>
|
||||
<td className="px-4 py-4 md:px-6 text-sm md:text-base text-gray-300">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-700 mt-1">•</span>
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
// Loading Skeleton Component
|
||||
export function LoadingSkeleton() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#1e1d1c] py-20 md:py-32 lg:py-40 px-4 md:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
|
||||
{/* Image Skeleton */}
|
||||
<div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg animate-pulse" />
|
||||
|
||||
{/* Info Skeleton */}
|
||||
<div className="flex flex-col justify-center space-y-4">
|
||||
{/* Title */}
|
||||
<div className="h-8 bg-gray-800 rounded animate-pulse w-3/4" />
|
||||
|
||||
{/* Articular */}
|
||||
<div className="h-6 bg-gray-800 rounded animate-pulse w-1/2" />
|
||||
|
||||
{/* Status */}
|
||||
<div className="h-8 bg-gray-800 rounded animate-pulse w-1/3" />
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2">
|
||||
<div className="h-4 bg-gray-800 rounded animate-pulse w-full" />
|
||||
<div className="h-4 bg-gray-800 rounded animate-pulse w-5/6" />
|
||||
<div className="h-4 bg-gray-800 rounded animate-pulse w-4/6" />
|
||||
</div>
|
||||
|
||||
{/* Price */}
|
||||
<div className="h-10 bg-gray-800 rounded animate-pulse w-32" />
|
||||
|
||||
{/* Buttons */}
|
||||
<div className="flex gap-4">
|
||||
<div className="h-12 bg-gray-800 rounded animate-pulse flex-1" />
|
||||
</div>
|
||||
|
||||
{/* Social */}
|
||||
<div className="flex gap-2">
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-10 h-10 bg-gray-800 rounded-lg animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Skeleton */}
|
||||
<div className="space-y-2">
|
||||
<div className="h-12 bg-gray-800 rounded-t-xl animate-pulse" />
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="h-16 bg-gray-800/50 rounded animate-pulse"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,154 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { usePriceModalStore } from "@/store/useProceModalStore";
|
||||
import { Check, Instagram, Send, Share2 } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
interface RightSideProps {
|
||||
id: number;
|
||||
title: string;
|
||||
articular: string;
|
||||
status: string;
|
||||
description: string;
|
||||
price: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export function RightSide({
|
||||
title,
|
||||
articular,
|
||||
status,
|
||||
description,
|
||||
price,
|
||||
id,
|
||||
image,
|
||||
}: RightSideProps) {
|
||||
const openModal = usePriceModalStore((state) => state.openModal);
|
||||
const t = useTranslations();
|
||||
const params = useParams();
|
||||
const locale = params.locale || "uz";
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleShare = async () => {
|
||||
const productUrl = `${window.location.origin}/${locale}/catalog_page/products/special_product?productId=${id}`;
|
||||
|
||||
try {
|
||||
// Modern Web Share API dan foydalanish (mobil qurilmalar uchun)
|
||||
if (navigator.share) {
|
||||
await navigator.share({
|
||||
title: title,
|
||||
text: `${title} - ${description.slice(0, 100)}...`,
|
||||
url: productUrl,
|
||||
});
|
||||
} else {
|
||||
// Desktop uchun clipboard ga copy qilish
|
||||
await navigator.clipboard.writeText(productUrl);
|
||||
setCopied(true);
|
||||
|
||||
// 2 soniyadan keyin "Copied" holatini o'chirish
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 2000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Share error:", error);
|
||||
// Fallback - clipboard ga copy qilish
|
||||
try {
|
||||
await navigator.clipboard.writeText(productUrl);
|
||||
setCopied(true);
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 2000);
|
||||
} catch (clipboardError) {
|
||||
console.error("Clipboard error:", clipboardError);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleGetPrice = () => {
|
||||
openModal({
|
||||
id,
|
||||
name: title,
|
||||
image,
|
||||
inStock: status === "Sotuvda mavjud",
|
||||
});
|
||||
};
|
||||
|
||||
// Status color logic
|
||||
const isInStock = status === "Sotuvda mavjud";
|
||||
const statusColor = isInStock
|
||||
? "bg-green-600/20 text-green-400 border border-green-600/30"
|
||||
: "bg-red-600/20 text-red-400 border border-red-600/30";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-center space-y-6">
|
||||
{/* Title */}
|
||||
<h1 className="text-xl md:text-3xl font-unbounded font-bold text-white leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
{/* Article ID */}
|
||||
<div className="flex items-center gap-2 text-sm md:text-base">
|
||||
<span className="text-gray-400">Artikul:</span>
|
||||
<span className="text-white font-semibold">{articular}</span>
|
||||
</div>
|
||||
|
||||
{/* Status Badge */}
|
||||
<div>
|
||||
<span
|
||||
className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}
|
||||
>
|
||||
{status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="border-l-4 border-red-700 pl-4">
|
||||
<p className="text-sm md:text-base text-gray-300 leading-relaxed">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Price Section */}
|
||||
<div className="bg-[#1716169f] rounded-xl p-5 space-y-6">
|
||||
{/* Action Button */}
|
||||
<button
|
||||
onClick={handleGetPrice}
|
||||
className="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-red-700/50"
|
||||
>
|
||||
{t("products.send")}
|
||||
</button>
|
||||
|
||||
{/* Social Share */}
|
||||
<div className="pt-4 border-t border-gray-800 flex items-center gap-5">
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className="flex items-center gap-3 mb-3 text-gray-400 hover:text-white transition-colors group"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-5 h-5 text-green-400" />
|
||||
<span className="text-sm text-green-400">
|
||||
{t("products.copied") || "Link nusxalandi!"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Share2 className="w-5 h-5 group-hover:scale-110 transition-transform" />
|
||||
<span className="text-sm">{t("products.share")}:</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<a
|
||||
href="https://t.me/ignum_tech"
|
||||
className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500"
|
||||
>
|
||||
<Send />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,158 +0,0 @@
|
||||
"use client";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Navigation, Pagination, Thumbs } from "swiper/modules";
|
||||
import { useState } from "react";
|
||||
import type { Swiper as SwiperType } from "swiper";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/thumbs";
|
||||
import Image from "next/image";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const navigationPrevEl = ".custom-swiper-prev";
|
||||
const navigationNextEl = ".custom-swiper-next";
|
||||
|
||||
export function SliderComp({ imgs }: { imgs: string[] }) {
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
|
||||
const t = useTranslations();
|
||||
|
||||
// Agar rasm bo'lmasa
|
||||
if (!imgs || imgs.length === 0) {
|
||||
return (
|
||||
<div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<svg
|
||||
className="w-20 h-20 text-gray-600 mx-auto mb-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
<p className="text-gray-500">{t("image_not_found")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Main Slider */}
|
||||
<div className="relative group">
|
||||
<Swiper
|
||||
modules={[Navigation, Pagination, Thumbs]}
|
||||
thumbs={{
|
||||
swiper:
|
||||
thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null,
|
||||
}}
|
||||
navigation={{
|
||||
prevEl: navigationPrevEl,
|
||||
nextEl: navigationNextEl,
|
||||
}}
|
||||
pagination={{ clickable: true }}
|
||||
loop={imgs.length > 1}
|
||||
className="w-[90%] h-96 md:h-96 rounded-lg overflow-hidden shadow-xl"
|
||||
>
|
||||
{imgs.map((image, index) => (
|
||||
<SwiperSlide
|
||||
key={index}
|
||||
className=" flex items-center justify-center"
|
||||
>
|
||||
<div className="relative w-full h-full p-4 md:p-8">
|
||||
<Image
|
||||
src={image}
|
||||
alt={`Product image ${index + 1}`}
|
||||
fill
|
||||
className="object-contain"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
priority={index === 0}
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
{imgs.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
className={`${navigationPrevEl.replace(
|
||||
".",
|
||||
"",
|
||||
)} absolute z-10 top-1/2 -translate-y-1/2 left-2 md:left-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className={`${navigationNextEl.replace(
|
||||
".",
|
||||
"",
|
||||
)} absolute z-10 top-1/2 -translate-y-1/2 right-2 md:right-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M9 5l7 7-7 7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Thumbnail Slider */}
|
||||
{imgs.length > 1 && (
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
spaceBetween={10}
|
||||
slidesPerView={4}
|
||||
breakpoints={{
|
||||
640: { slidesPerView: 5 },
|
||||
768: { slidesPerView: 6 },
|
||||
}}
|
||||
watchSlidesProgress
|
||||
className="w-full"
|
||||
>
|
||||
{imgs.map((image, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div className="relative h-20 md:h-24 bg-white rounded-lg overflow-hidden cursor-pointer border-2 border-transparent hover:border-red-700 transition">
|
||||
<Image
|
||||
src={image}
|
||||
alt={`Thumbnail ${index + 1}`}
|
||||
fill
|
||||
className="object-contain p-2"
|
||||
sizes="100px"
|
||||
/>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user