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

added mobile category page

Browse Source
This commit is contained in:
Jelaletdin12
2026-03-22 20:45:18 +05:00
parent 5f30e81557
commit 96321ffcf5
6 changed files with 91 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import type { Category } from "@/lib/types/api";
import { Skeleton } from "@/components/ui/skeleton";
import { ChevronRight } from "lucide-react";
type Props = {
categories: Category[] | undefined;
@@ -11,6 +12,7 @@ type Props = {
isError: boolean;
locale: string;
title: string;
showAllOnMobile?: boolean;
};
export default function CategoryGrid({
@@ -19,6 +21,7 @@ export default function CategoryGrid({
isError,
locale,
title,
showAllOnMobile = false,
}: Props) {
if (isError) {
return (
@@ -55,7 +58,7 @@ export default function CategoryGrid({
<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 ${i >= 2 ? "hidden sm:block" : ""}`}>
<div key={i} className={`space-y-3 ${!showAllOnMobile && i >= 2 ? "hidden sm:block" : ""}`}>
<Skeleton className="w-full h-36 rounded-2xl" />
<Skeleton className="h-4 w-full rounded-lg" />
</div>
@@ -67,15 +70,25 @@ export default function CategoryGrid({
return (
<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="flex items-center justify-between mb-6">
<h2 className="text-2xl font-bold text-gray-900">{title}</h2>
{!showAllOnMobile && (
<Link
href={`/${locale}/categories`}
className="sm:hidden flex items-center justify-center p-2 rounded-full hover:bg-gray-100 transition-colors text-gray-500"
>
<ChevronRight className="w-6 h-6" />
</Link>
)}
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
{categories?.map((cat, index) => (
<Link
key={cat.id}
href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
className={`group ${index >= 2 ? "hidden sm:block" : ""}`}
className={`group ${!showAllOnMobile && index >= 2 ? "hidden sm:block" : ""}`}
>
<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">
<Card className="border p-2 gap-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={
@@ -87,7 +100,7 @@ export default function CategoryGrid({
/>
</div>
<CardContent className="py-4 px-3">
<p className="text-sm font-semibold text-gray-900 text-center group-hover:text-gray-700 transition-colors">
<p className="text-sm min-h-[40px] font-semibold text-gray-900 text-center group-hover:text-gray-700 transition-colors">
{cat.name}
</p>
</CardContent>

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

@@ -377,7 +377,7 @@ export default function ProductCard({
</h3>
{/* Price */}
<div className="flex-col flex md:flex-row items-baseline gap-1">
<div className="flex-col flex md:flex-row items-baseline gap-1 min-h-[52px]">
<p
className="text-xl font-bold tracking-tight"
style={{ color: price_color }}