jelaletdin/smart-electronics-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed some styles

Browse Source
This commit is contained in:
@jcarymuhammedow
2026-02-06 18:52:48 +05:00
parent f32e7538e1
commit 022c7290b4
11 changed files with 190 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
features/home/components/Carousel.tsx
View File

@@ -2,8 +2,11 @@
import Image, { type StaticImageData } from "next/image";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
type CarouselItem = {
title: string;
@@ -13,12 +16,20 @@ type CarouselItem = {
export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
return (
<section className="rounded-2xl overflow-hidden">
<section className="rounded-2xl overflow-hidden relative">
<Swiper
modules={[Autoplay]}
modules={[Autoplay, Navigation, Pagination]}
slidesPerView={1}
loop
navigation
autoplay={{ delay: 3000, disableOnInteraction: false }}
pagination={{ clickable: true }}
className="
[&_.swiper-button-next]:text-white!
[&_.swiper-button-prev]:text-white!
[&_.swiper-pagination-bullet]:bg-white!
[&_.swiper-pagination-bullet-active]:bg-white!
"
>
{items.map((item, i) => (
<SwiperSlide key={i}>

63
features/home/components/CategoryGrid.tsx
View File

@@ -22,24 +22,42 @@ export default function CategoryGrid({
}: Props) {
if (isError) {
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
<h2 className="text-xl font-semibold mb-4">{title}</h2>
<p className="text-red-600">
Failed to load categories. Please try again.
</p>
<section className="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
<h2 className="text-2xl font-bold mb-6 text-gray-900">{title}</h2>
<div className="text-center py-8">
<div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-50 mb-4">
<svg
className="w-6 h-6 text-red-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<p className="text-gray-900 font-semibold text-lg mb-2">
Failed to load categories
</p>
<p className="text-gray-500">Please refresh the page and try again</p>
</div>
</section>
);
}
if (isLoading) {
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
<h2 className="text-xl font-semibold mb-4">{title}</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{Array.from({ length: 10 }).map((_, i) => (
<div key={i} className="space-y-2">
<Skeleton className="w-full h-36 rounded-lg" />
<Skeleton className="h-4 w-full" />
<section className="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
<Skeleton className="h-9 w-56 mb-6 rounded-xl" />
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
{Array.from({ length: 12 }).map((_, i) => (
<div key={i} className="space-y-3">
<Skeleton className="w-full h-36 rounded-2xl" />
<Skeleton className="h-4 w-full rounded-lg" />
</div>
))}
</div>
@@ -48,27 +66,28 @@ export default function CategoryGrid({
}
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
<h2 className="text-xl font-semibold mb-4">{title}</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
<section className="bg-white rounded-lg shadow-sm border border-gray-100 p-2 md:p-6">
<h2 className="text-2xl font-bold mb-6 text-gray-900">{title}</h2>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
{categories?.map((cat) => (
<Link
key={cat.id}
href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
className="group"
>
<Card className="hover:shadow-md border-none shadow-none p-0 gap-2 transition-all cursor-pointer">
<div className="relative w-full h-36 overflow-hidden rounded-lg">
<Card className="border p-2 border-gray-100 hover:border-gray-900 hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-gray-50 to-white">
<div className="relative w-full h-40 overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100">
<Image
src={
cat.media[0]?.thumbnail || cat.media?.[0]?.images_400x400
cat.media[0]?.thumbnail || cat.media?.[0]?.images_800x800
}
alt={cat.name}
fill
className="object-contain"
className="object-cover transition-transform duration-500 group-hover:scale-110"
/>
</div>
<CardContent className="py-2">
<p className="text-sm font-medium text-gray-800 truncate text-center">
<CardContent className="py-4 px-3">
<p className="text-sm font-semibold text-gray-900 truncate text-center group-hover:text-gray-700 transition-colors">
{cat.name}
</p>
</CardContent>
@@ -78,4 +97,4 @@ export default function CategoryGrid({
</div>
</section>
);
}
}

51
features/home/components/ProductCard.tsx
View File

@@ -61,8 +61,8 @@ export default function ProductCard({
images,
labels = [],
price_color = "#0A0A0A",
height = 400,
width = 300,
// height = 500,
// width = 350,
button = false,
stock,
}: ProductCardProps) {
@@ -81,8 +81,8 @@ export default function ProductCard({
const [isSyncing, setIsSyncing] = useState(false);
const [showStockModal, setShowStockModal] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const [isInteracting, setIsInteracting] = useState(false);
const autoplayRef = useRef<NodeJS.Timeout | null>(null);
const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const isRequestInFlightRef = useRef<boolean>(false);
const pendingQuantityRef = useRef<number | null>(null);
@@ -103,18 +103,6 @@ export default function ProductCard({
};
}, [api]);
useEffect(() => {
if (!api || !hasMultipleImages) return;
autoplayRef.current = setInterval(() => {
api.canScrollNext() ? api.scrollNext() : api.scrollTo(0);
}, 3000);
return () => {
if (autoplayRef.current) clearInterval(autoplayRef.current);
};
}, [api, hasMultipleImages]);
useEffect(() => {
setLocalQuantity(cartItem?.product_quantity || 1);
}, [cartItem]);
@@ -272,24 +260,27 @@ export default function ProductCard({
className="flex justify-center cursor-pointer group"
>
<Card
className="relative bg-white border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 p-0 w-full overflow-hidden rounded-lg"
style={{ height, maxWidth: width }}
className="relative gap-2 bg-white border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 p-0 w-full overflow-hidden rounded-lg"
// style={{ height, maxWidth: width }}
>
{/* Image Section */}
<div className="relative w-full h-[280px] bg-gradient-to-br from-gray-50 to-gray-100 overflow-hidden">
<div className="relative w-full h-full bg-gradient-to-br from-gray-50 to-gray-100 overflow-hidden">
<Carousel
opts={{ align: "start", loop: true, watchDrag: false }}
opts={{ align: "start", loop: true, watchDrag: true }}
setApi={setApi}
className="w-full h-full"
onPointerDown={() => setIsInteracting(true)}
onPointerUp={() => setIsInteracting(false)}
onPointerCancel={() => setIsInteracting(false)}
>
<CarouselContent className="h-[280px] ml-0">
<CarouselContent className="h-auto ml-0">
{images.map((image, idx) => (
<CarouselItem key={idx} className="h-[280px] pl-0">
<div className="h-full flex items-center justify-center p-3">
<CarouselItem key={idx} className="h-auto pl-0">
<div className="h-full flex items-center justify-center p-2">
<img
src={image}
alt={`${name} - ${idx + 1}`}
className={`max-w-full max-h-full object-contain transition-transform duration-500 ${
className={`max-w-full max-h-full object-cover transition-transform duration-500 ${
isHovered ? "scale-105" : "scale-100"
}`}
draggable="false"
@@ -317,7 +308,11 @@ export default function ProductCard({
{/* Image Dots */}
{hasMultipleImages && (
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
<div
className={`absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex gap-1.5 transition-opacity duration-300 ${
isHovered || isInteracting ? "opacity-100" : "opacity-0"
}`}
>
{images.map((_, idx) => (
<button
key={idx}
@@ -369,7 +364,7 @@ export default function ProductCard({
{/* Content Section */}
<CardContent className="p-3 space-y-3">
{/* Product Name */}
<h3 className="text-gray-900 text-base font-semibold leading-tight line-clamp-2 min-h-[2.5rem]">
<h3 className="text-gray-900 text-base font-semibold leading-tight line-clamp-2">
{name}
</h3>
@@ -403,7 +398,7 @@ export default function ProductCard({
</Button>
{/* Action Buttons */}
{button && !isOutOfStock && (
<div className="pt-2 w-full">
<div className="w-full">
{!isInCart ? (
<Button
onClick={handleAddToCart}
@@ -418,7 +413,9 @@ export default function ProductCard({
) : (
<>
<ShoppingCart className="h-5 w-5" />
<span>{t("add_to_cart")}</span>
<span className="hidden md:flex">
{t("add_to_cart")}
</span>
</>
)}
</Button>

8
features/home/components/ProductGrid.tsx
View File

@@ -25,7 +25,7 @@ export default function CollectionSection({ collection, locale }: Props) {
if (isLoading) {
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
<section className="bg-white rounded-2xl shadow-sm p-2 md:p-6">
<div className="flex items-center justify-between mb-4">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-6 w-6 rounded-full" />
@@ -53,7 +53,7 @@ export default function CollectionSection({ collection, locale }: Props) {
const displayProducts = productsData?.data.slice(0, 10) || [];
return (
<section className="bg-white rounded-2xl shadow-sm p-6">
<section className="bg-white rounded-2xl shadow-sm p-2 md:p-6">
<div
className="flex items-center justify-between mb-4 cursor-pointer group"
onClick={handleTitleClick}
@@ -92,8 +92,8 @@ export default function CollectionSection({ collection, locale }: Props) {
images={allImages}
labels={[]}
price_color="#0059ff"
height={360}
width={250}
// height={450}
// width={350}
button={true}
/>
);