109 lines
3.7 KiB
JavaScript
109 lines
3.7 KiB
JavaScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import React, { useState, useEffect } from "react";
|
|
import { backendUrl } from "@/utils/axios";
|
|
import axios from "axios";
|
|
import Image from "next/image";
|
|
|
|
export default function SubcategoryList({ params }) {
|
|
console.log(params);
|
|
console.log(params.id);
|
|
const [subcategories, setSubcategories] = useState([]);
|
|
const [category, setCategory] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
// Fetch category details
|
|
const categoryResponse = await axios.get(
|
|
`${backendUrl}/products/category/`
|
|
);
|
|
const selectedCategory = categoryResponse.data.find(
|
|
(cat) => cat.id == params.id
|
|
);
|
|
setCategory(selectedCategory);
|
|
|
|
// Fetch subcategories for this category
|
|
const subcategoriesResponse = await axios.get(
|
|
`${backendUrl}/admins/product/subcategories/?category_id=${params.id}`
|
|
);
|
|
setSubcategories(subcategoriesResponse.data);
|
|
console.log("Selected sub category")
|
|
console.log(subcategoriesResponse.data);
|
|
// console.log(sub)
|
|
} catch (err) {
|
|
console.error("Error fetching data:", err);
|
|
setError("Failed to load subcategories. Please try again later.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchData();
|
|
}, [params.id]);
|
|
|
|
if (loading) {
|
|
return <div className="py-16 text-center">Loading subcategories...</div>;
|
|
}
|
|
|
|
if (error) {
|
|
return <div className="py-16 text-center text-red-500">{error}</div>;
|
|
}
|
|
|
|
return (
|
|
<section className="py-16 bg-gray-50">
|
|
<div className="container mx-auto px-4">
|
|
<h2 className="text-4xl font-bold text-center text-gray-800 mb-12">
|
|
Explore {category ? category.category_name : "Category"} Subcategories
|
|
</h2>
|
|
|
|
{subcategories.length === 0 ? (
|
|
<p className="text-center text-lg">
|
|
No subcategories available for this category.
|
|
</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
|
|
{subcategories.map((subcategory) => (
|
|
<div
|
|
key={subcategory.id}
|
|
className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
|
|
>
|
|
<Link href={`/category/${params.id}/subcategory/${subcategory.id}`}>
|
|
<div className="relative w-full h-64 bg-gray-200">
|
|
<Image
|
|
src={`${
|
|
subcategory?.image
|
|
? subcategory.image.startsWith("http")
|
|
? subcategory.image
|
|
: `${backendUrl}/media${
|
|
subcategory.image.startsWith("/") ? "" : "/"
|
|
}${subcategory.image}`
|
|
: "/default-subcategory.jpg"
|
|
}`}
|
|
alt={subcategory.subcategory_name}
|
|
layout="fill"
|
|
objectFit="cover"
|
|
className="rounded-t-lg"
|
|
/>
|
|
</div>
|
|
<div className="p-5">
|
|
<h3 className="text-lg font-semibold text-gray-900 mb-2 truncate">
|
|
{subcategory.subcategory_name}
|
|
</h3>
|
|
<p className="text-sm text-gray-600">
|
|
Click to view collections
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|