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

2
components/ui/slider.tsx
View File

@@ -45,7 +45,7 @@ function Slider({
<SliderPrimitive.Range <SliderPrimitive.Range
data-slot="slider-range" data-slot="slider-range"
className={cn( className={cn(
"bg-[#005bff] absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" "bg-gray-900 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
)} )}
/> />
</SliderPrimitive.Track> </SliderPrimitive.Track>

4
features/cart/components/CartItemCard.tsx
View File

@@ -277,11 +277,11 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
return ( return (
<> <>
<Card className="p-6 shadow-sm border border-gray-200 rounded-2xl hover:shadow-md transition-shadow duration-200"> <Card className="p-6 shadow-sm border border-gray-200 rounded-lg hover:shadow-md transition-shadow duration-200">
<div className="flex flex-col sm:flex-row gap-6"> <div className="flex flex-col sm:flex-row gap-6">
{/* Product Image & Info */} {/* Product Image & Info */}
<div className="flex gap-4 flex-1"> <div className="flex gap-4 flex-1">
<div className="relative w-[100px] h-[133px] rounded-xl border border-gray-200 overflow-hidden shrink-0 bg-gray-50"> <div className="relative w-[200px] h-[200px] rounded-lg border border-gray-200 overflow-hidden shrink-0 bg-gray-50">
<Image <Image
src={getImageSrc()} src={getImageSrc()}
alt={item.product.name} alt={item.product.name}

99
features/category/components/CategoryFilters.tsx
View File

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider"; import { Slider } from "@/components/ui/slider";
import { RotateCcw } from "lucide-react";
import type { FilterBrand, FilterCategory } from "@/lib/types/api"; import type { FilterBrand, FilterCategory } from "@/lib/types/api";
interface FiltersData { interface FiltersData {
@@ -50,7 +51,7 @@ export default function CategoryFilters({
translations, translations,
}: CategoryFiltersProps) { }: CategoryFiltersProps) {
return ( return (
<div className="space-y-6 mb-6"> <div className="space-y-8 mb-3">
{filtersData?.categories && filtersData.categories.length > 0 && ( {filtersData?.categories && filtersData.categories.length > 0 && (
<FilterSection title={translations.category}> <FilterSection title={translations.category}>
{filtersData.categories.map((category) => ( {filtersData.categories.map((category) => (
@@ -77,27 +78,6 @@ export default function CategoryFilters({
</FilterSection> </FilterSection>
)} )}
{/* <FilterSection title={translations.sort}>
<RadioItem
name="sort"
checked={priceSort === "none"}
onChange={() => onPriceSortChange("none")}
label={translations.default}
/>
<RadioItem
name="sort"
checked={priceSort === "lowToHigh"}
onChange={() => onPriceSortChange("lowToHigh")}
label={translations.price_low_to_high}
/>
<RadioItem
name="sort"
checked={priceSort === "highToLow"}
onChange={() => onPriceSortChange("highToLow")}
label={translations.price_high_to_low}
/>
</FilterSection> */}
<PriceFilter <PriceFilter
title={translations.price} title={translations.price}
priceRange={priceRange} priceRange={priceRange}
@@ -108,7 +88,12 @@ export default function CategoryFilters({
}} }}
/> />
<Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}> <Button
variant="outline"
className="w-full rounded-[10px] cursor-pointer mb-6 h-12 font-semibold border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 gap-2"
onClick={onReset}
>
<RotateCcw className="h-4 w-4" />
{translations.reset} {translations.reset}
</Button> </Button>
</div> </div>
@@ -123,9 +108,9 @@ function FilterSection({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<div> <div className="pb-6 border-b mb-2 border-gray-100 last:border-0">
<h3 className="text-lg font-semibold mb-3">{title}</h3> <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
<div className="space-y-2">{children}</div> <div className="space-y-3">{children}</div>
</div> </div>
); );
} }
@@ -140,9 +125,15 @@ function CheckboxItem({
label: string; label: string;
}) { }) {
return ( return (
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 mb-1 transition-colors">
<Checkbox checked={checked} onCheckedChange={onCheckedChange} /> <Checkbox
<span className="text-sm">{label}</span> checked={checked}
onCheckedChange={onCheckedChange}
className="border-2 border-gray-300 data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900"
/>
<span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
{label}
</span>
</label> </label>
); );
} }
@@ -159,15 +150,17 @@ function RadioItem({
label: string; label: string;
}) { }) {
return ( return (
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors">
<input <input
type="radio" type="radio"
name={name} name={name}
checked={checked} checked={checked}
onChange={onChange} onChange={onChange}
className="w-4 h-4" className="w-4 h-4 accent-gray-900"
/> />
<span>{label}</span> <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
{label}
</span>
</label> </label>
); );
} }
@@ -184,12 +177,15 @@ function PriceFilter({
translations: { from: string; to: string }; translations: { from: string; to: string };
}) { }) {
return ( return (
<div> <div className="pb-6">
<h3 className="text-lg font-semibold mb-3">{title}</h3> <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
<div className="space-y-4"> <div className="space-y-5">
<div className="flex gap-2"> <div className="flex gap-3">
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="price-from" className="text-xs mb-1"> <Label
htmlFor="price-from"
className="text-xs font-semibold mb-2 block text-gray-700"
>
{translations.from} {translations.from}
</Label> </Label>
<Input <Input
@@ -199,11 +195,14 @@ function PriceFilter({
onChange={(e) => onChange={(e) =>
onPriceChange([parseInt(e.target.value) || 0, priceRange[1]]) onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
} }
className="rounded-lg" className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
/> />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="price-to" className="text-xs mb-1"> <Label
htmlFor="price-to"
className="text-xs font-semibold mb-2 block text-gray-700"
>
{translations.to} {translations.to}
</Label> </Label>
<Input <Input
@@ -216,19 +215,21 @@ function PriceFilter({
parseInt(e.target.value) || 10000, parseInt(e.target.value) || 10000,
]) ])
} }
className="rounded-lg" className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
/> />
</div> </div>
</div> </div>
<Slider <div className="px-1">
min={0} <Slider
max={99999} min={0}
step={100} max={99999}
value={priceRange} step={100}
onValueChange={onPriceChange} value={priceRange}
className="mt-2" onValueChange={onPriceChange}
/> className="mt-2"
/>
</div>
</div> </div>
</div> </div>
); );
} }

10
features/category/components/CategoryFiltersSheet.tsx
View File

@@ -28,7 +28,7 @@ export default function CategoryFiltersSheet({
<Sheet open={isOpen} onOpenChange={onOpenChange}> <Sheet open={isOpen} onOpenChange={onOpenChange}>
<SheetTrigger asChild> <SheetTrigger asChild>
<Button <Button
className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg cursor-pointer font-bold gap-2 z-10 shadow-lg" className=" border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 sm:hidden fixed bottom-20 right-4 rounded-[10px] cursor-pointer font-bold gap-2 z-10 shadow-lg"
size="lg" size="lg"
> >
{filterLabel} {filterLabel}
@@ -36,13 +36,13 @@ export default function CategoryFiltersSheet({
</Button> </Button>
</SheetTrigger> </SheetTrigger>
<SheetContent side="left" className="w-[290px] p-0"> <SheetContent side="left" className="w-[290px] p-0">
<SheetHeader className="p-4 border-b"> <SheetHeader className="p-4 border-b text-gray-900">
<SheetTitle>{filterLabel}</SheetTitle> <SheetTitle className="text-gray-900">{filterLabel}</SheetTitle>
<button <button
onClick={() => onOpenChange(false)} onClick={() => onOpenChange(false)}
className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100" className="absolute top-4 right-4 rounded-[10px] cursor-pointer ring-offset-background transition-opacity hover:opacity-100 text-gray-900"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4 text-gray-900" />
<span className="sr-only">{closeLabel}</span> <span className="sr-only">{closeLabel}</span>
</button> </button>
</SheetHeader> </SheetHeader>

74
features/collections/components/CollectionFilters.tsx
View File

@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider"; import { Slider } from "@/components/ui/slider";
import { RotateCcw } from "lucide-react";
import type { FilterBrand, FilterCategory } from "@/lib/types/api"; import type { FilterBrand, FilterCategory } from "@/lib/types/api";
interface FiltersData { interface FiltersData {
@@ -49,7 +50,7 @@ export default function CollectionFilters({
translations, translations,
}: CollectionFiltersProps) { }: CollectionFiltersProps) {
return ( return (
<div className="space-y-6 mb-6"> <div className="space-y-8 mb-6">
{filtersData?.categories && filtersData.categories.length > 0 && ( {filtersData?.categories && filtersData.categories.length > 0 && (
<FilterSection title={translations.category}> <FilterSection title={translations.category}>
{filtersData.categories.map((category) => ( {filtersData.categories.map((category) => (
@@ -76,7 +77,7 @@ export default function CollectionFilters({
</FilterSection> </FilterSection>
)} )}
<FilterSection title={translations.sort}> {/* <FilterSection title={translations.sort}>
<RadioItem <RadioItem
name="sort" name="sort"
checked={priceSort === "none"} checked={priceSort === "none"}
@@ -95,7 +96,7 @@ export default function CollectionFilters({
onChange={() => onPriceSortChange("highToLow")} onChange={() => onPriceSortChange("highToLow")}
label={translations.price_high_to_low} label={translations.price_high_to_low}
/> />
</FilterSection> </FilterSection> */}
<PriceFilter <PriceFilter
title={translations.price} title={translations.price}
@@ -107,7 +108,12 @@ export default function CollectionFilters({
}} }}
/> />
<Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}> <Button
variant="outline"
className="w-full rounded-[10px] cursor-pointer mb-6 h-12 font-semibold border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 gap-2"
onClick={onReset}
>
<RotateCcw className="h-4 w-4" />
{translations.reset} {translations.reset}
</Button> </Button>
</div> </div>
@@ -122,9 +128,9 @@ function FilterSection({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<div> <div className="pb-6 border-b border-gray-100 last:border-0">
<h3 className="text-lg font-semibold mb-3">{title}</h3> <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
<div className="space-y-2">{children}</div> <div className="space-y-3">{children}</div>
</div> </div>
); );
} }
@@ -139,9 +145,15 @@ function CheckboxItem({
label: string; label: string;
}) { }) {
return ( return (
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors mb-1">
<Checkbox checked={checked} onCheckedChange={onCheckedChange} /> <Checkbox
<span className="text-sm">{label}</span> checked={checked}
onCheckedChange={onCheckedChange}
className="border-2 border-gray-300 data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900"
/>
<span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
{label}
</span>
</label> </label>
); );
} }
@@ -158,15 +170,17 @@ function RadioItem({
label: string; label: string;
}) { }) {
return ( return (
<label className="flex items-center gap-2 cursor-pointer"> <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors">
<input <input
type="radio" type="radio"
name={name} name={name}
checked={checked} checked={checked}
onChange={onChange} onChange={onChange}
className="w-4 h-4" className="w-4 h-4 accent-gray-900"
/> />
<span>{label}</span> <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
{label}
</span>
</label> </label>
); );
} }
@@ -183,12 +197,12 @@ function PriceFilter({
translations: { from: string; to: string }; translations: { from: string; to: string };
}) { }) {
return ( return (
<div> <div className="pb-6">
<h3 className="text-lg font-semibold mb-3">{title}</h3> <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
<div className="space-y-4"> <div className="space-y-5">
<div className="flex gap-2"> <div className="flex gap-3">
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="price-from" className="text-xs mb-1"> <Label htmlFor="price-from" className="text-xs font-semibold mb-2 block text-gray-700">
{translations.from} {translations.from}
</Label> </Label>
<Input <Input
@@ -198,11 +212,11 @@ function PriceFilter({
onChange={(e) => onChange={(e) =>
onPriceChange([parseInt(e.target.value) || 0, priceRange[1]]) onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
} }
className="rounded-lg" className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
/> />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<Label htmlFor="price-to" className="text-xs mb-1"> <Label htmlFor="price-to" className="text-xs font-semibold mb-2 block text-gray-700">
{translations.to} {translations.to}
</Label> </Label>
<Input <Input
@@ -215,18 +229,20 @@ function PriceFilter({
parseInt(e.target.value) || 10000, parseInt(e.target.value) || 10000,
]) ])
} }
className="rounded-lg" className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
/> />
</div> </div>
</div> </div>
<Slider <div className="px-1">
min={0} <Slider
max={99999} min={0}
step={100} max={99999}
value={priceRange} step={100}
onValueChange={onPriceChange} value={priceRange}
className="mt-2" onValueChange={onPriceChange}
/> className="mt-2"
/>
</div>
</div> </div>
</div> </div>
); );

4
features/collections/components/CollectionFiltersSheet.tsx
View File

@@ -28,7 +28,7 @@ export default function CollectionFiltersSheet({
<Sheet open={isOpen} onOpenChange={onOpenChange}> <Sheet open={isOpen} onOpenChange={onOpenChange}>
<SheetTrigger asChild> <SheetTrigger asChild>
<Button <Button
className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg cursor-pointer font-bold gap-2 z-10 shadow-lg" className=" border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 sm:hidden fixed bottom-20 right-4 rounded-[10px] cursor-pointer font-bold gap-2 z-10 shadow-lg"
size="lg" size="lg"
> >
{filterLabel} {filterLabel}
@@ -37,7 +37,7 @@ export default function CollectionFiltersSheet({
</SheetTrigger> </SheetTrigger>
<SheetContent side="left" className="w-[290px] p-0"> <SheetContent side="left" className="w-[290px] p-0">
<SheetHeader className="p-4 border-b"> <SheetHeader className="p-4 border-b">
<SheetTitle>{filterLabel}</SheetTitle> <SheetTitle className="text-gray-900">{filterLabel}</SheetTitle>
<button <button
onClick={() => onOpenChange(false)} onClick={() => onOpenChange(false)}
className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100" className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100"

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

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

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

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

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

@@ -61,8 +61,8 @@ export default function ProductCard({
images, images,
labels = [], labels = [],
price_color = "#0A0A0A", price_color = "#0A0A0A",
height = 400, // height = 500,
width = 300, // width = 350,
button = false, button = false,
stock, stock,
}: ProductCardProps) { }: ProductCardProps) {
@@ -81,8 +81,8 @@ export default function ProductCard({
const [isSyncing, setIsSyncing] = useState(false); const [isSyncing, setIsSyncing] = useState(false);
const [showStockModal, setShowStockModal] = useState(false); const [showStockModal, setShowStockModal] = useState(false);
const [isHovered, setIsHovered] = 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 debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
const isRequestInFlightRef = useRef<boolean>(false); const isRequestInFlightRef = useRef<boolean>(false);
const pendingQuantityRef = useRef<number | null>(null); const pendingQuantityRef = useRef<number | null>(null);
@@ -103,18 +103,6 @@ export default function ProductCard({
}; };
}, [api]); }, [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(() => { useEffect(() => {
setLocalQuantity(cartItem?.product_quantity || 1); setLocalQuantity(cartItem?.product_quantity || 1);
}, [cartItem]); }, [cartItem]);
@@ -272,24 +260,27 @@ export default function ProductCard({
className="flex justify-center cursor-pointer group" className="flex justify-center cursor-pointer group"
> >
<Card <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" 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 }} // style={{ height, maxWidth: width }}
> >
{/* Image Section */} {/* 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 <Carousel
opts={{ align: "start", loop: true, watchDrag: false }} opts={{ align: "start", loop: true, watchDrag: true }}
setApi={setApi} setApi={setApi}
className="w-full h-full" 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) => ( {images.map((image, idx) => (
<CarouselItem key={idx} className="h-[280px] pl-0"> <CarouselItem key={idx} className="h-auto pl-0">
<div className="h-full flex items-center justify-center p-3"> <div className="h-full flex items-center justify-center p-2">
<img <img
src={image} src={image}
alt={`${name} - ${idx + 1}`} 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" isHovered ? "scale-105" : "scale-100"
}`} }`}
draggable="false" draggable="false"
@@ -317,7 +308,11 @@ export default function ProductCard({
{/* Image Dots */} {/* Image Dots */}
{hasMultipleImages && ( {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) => ( {images.map((_, idx) => (
<button <button
key={idx} key={idx}
@@ -369,7 +364,7 @@ export default function ProductCard({
{/* Content Section */} {/* Content Section */}
<CardContent className="p-3 space-y-3"> <CardContent className="p-3 space-y-3">
{/* Product Name */} {/* 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} {name}
</h3> </h3>
@@ -403,7 +398,7 @@ export default function ProductCard({
</Button> </Button>
{/* Action Buttons */} {/* Action Buttons */}
{button && !isOutOfStock && ( {button && !isOutOfStock && (
<div className="pt-2 w-full"> <div className="w-full">
{!isInCart ? ( {!isInCart ? (
<Button <Button
onClick={handleAddToCart} onClick={handleAddToCart}
@@ -418,7 +413,9 @@ export default function ProductCard({
) : ( ) : (
<> <>
<ShoppingCart className="h-5 w-5" /> <ShoppingCart className="h-5 w-5" />
<span>{t("add_to_cart")}</span> <span className="hidden md:flex">
{t("add_to_cart")}
</span>
</> </>
)} )}
</Button> </Button>

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

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

4
features/products/components/ProductPageContent.tsx
View File

@@ -534,12 +534,12 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
/> />
</div> </div>
<ProductReviewsSection {/* <ProductReviewsSection
reviews={reviews} reviews={reviews}
averageRating={averageRating} averageRating={averageRating}
isLoading={false} isLoading={false}
onWriteReview={() => setShowReviewModal(true)} onWriteReview={() => setShowReviewModal(true)}
/> /> */}
<RelatedProductsSection products={transformedRelatedProducts} /> <RelatedProductsSection products={transformedRelatedProducts} />
</div> </div>