Skip to content

Instantly share code, notes, and snippets.

@pradhumgp
Created September 13, 2024 10:18
Show Gist options
  • Save pradhumgp/6943fee964b7a729f69236c9a8e0dc1a to your computer and use it in GitHub Desktop.
Save pradhumgp/6943fee964b7a729f69236c9a8e0dc1a to your computer and use it in GitHub Desktop.
//Styles import here
import "../Styles/Pages/Home.css";
//Styles import here
//Components import here
// import Navbar from '../Components/Navbar';
import CatalogAccordion from "../Components/Sidebar.jsx";
//Components import here
function App() {
const catalogData = [
{
name: "Product Catalog",
categories: [
{
category_name: "Category 1",
sub_categories: [
{
sub_category_name: "Sub Category 1",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 1",
sub_sub_sub_categories: [
{ name: "item 1" },
{ name: "item 2" },
{ name: "item 3" },
{ name: "item 4" },
],
},
],
},
{
sub_category_name: "Sub Category 2",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 1",
sub_sub_sub_categories: [
{ name: "item 1" },
{ name: "item 2" },
{ name: "item 3" },
{ name: "item 4" },
],
},
],
},
],
},
{
category_name: "Category 2",
sub_categories: [
{
sub_category_name: "Sub Category 2",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 2",
sub_sub_sub_categories: [
{ name: "item 5" },
{ name: "item 6" },
{ name: "item 7" },
{ name: "item 8" },
],
},
],
},
],
},
{
category_name: "Category 3",
sub_categories: [
{
sub_category_name: "Sub Category 3",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 3",
sub_sub_sub_categories: [
{ name: "item 9" },
{ name: "item 10" },
{ name: "item 11" },
{ name: "item 12" },
],
},
],
},
],
},
{
category_name: "Category 4",
sub_categories: [
{
sub_category_name: "Sub Category 4",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 4",
sub_sub_sub_categories: [
{ name: "item 13" },
{ name: "item 14" },
{ name: "item 15" },
{ name: "item 16" },
],
},
],
},
],
},
{
category_name: "Category 5",
sub_categories: [
{
sub_category_name: "Sub Category 5",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 5",
sub_sub_sub_categories: [
{ name: "item 17" },
{ name: "item 18" },
{ name: "item 19" },
{ name: "item 20" },
],
},
],
},
],
},
{
category_name: "Category 6",
sub_categories: [
{
sub_category_name: "Sub Category 6",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 6",
sub_sub_sub_categories: [
{ name: "item 21" },
{ name: "item 22" },
{ name: "item 23" },
{ name: "item 24" },
],
},
],
},
],
},
{
category_name: "Category 7",
sub_categories: [
{
sub_category_name: "Sub Category 7",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 7",
sub_sub_sub_categories: [
{ name: "item 25" },
{ name: "item 26" },
{ name: "item 27" },
{ name: "item 28" },
],
},
],
},
],
},
{
category_name: "Category 8",
sub_categories: [
{
sub_category_name: "Sub Category 8",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 8",
sub_sub_sub_categories: [
{ name: "item 29" },
{ name: "item 30" },
{ name: "item 31" },
{ name: "item 32" },
],
},
],
},
],
},
{
category_name: "Category 9",
sub_categories: [
{
sub_category_name: "Sub Category 9",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 9",
sub_sub_sub_categories: [
{ name: "item 33" },
{ name: "item 34" },
{ name: "item 35" },
{ name: "item 36" },
],
},
],
},
],
},
{
category_name: "Category 10",
sub_categories: [
{
sub_category_name: "Sub Category 10",
sub_sub_categories: [
{
sub_sub_category_name: "Sub Sub Category 10",
sub_sub_sub_categories: [
{ name: "item 37" },
{ name: "item 38" },
{ name: "item 39" },
{ name: "item 40" },
],
},
],
},
],
},
],
},
];
return (
<>
<div className="baseWrapper">
{/* <Navbar/> */}
<CatalogAccordion data={catalogData}/>
</div>
</>
);
}
export default App;
import { useState } from 'react';
// Recursive Accordion component
const CatalogAccordion = ({ data }) => {
// Recursive function to render catalog data
const RenderCatalog = (catalog) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div style={{ marginLeft: '20px' }}>
<div
style={{ cursor: 'pointer', fontWeight: 'bold' }}
onClick={() => setIsOpen(!isOpen)}
>
{catalog.name} {isOpen ? '[-]' : '[+]'}
</div>
{isOpen && catalog.categories && (
<div>
{catalog.categories.map((category, index) => (
<CategoryAccordion key={index} category={category} />
))}
</div>
)}
</div>
);
};
return (
<div>
{data.map((catalog, index) => (
<div key={index}>{RenderCatalog(catalog)}</div>
))}
</div>
);
};
// Recursive component for each category
const CategoryAccordion = ({ category }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div style={{ marginLeft: '20px' }}>
<div
style={{ cursor: 'pointer', fontWeight: 'bold' }}
onClick={() => setIsOpen(!isOpen)}
>
{category.category_name} {isOpen ? '[-]' : '[+]'}
</div>
{isOpen && category.sub_categories && (
<div>
{category.sub_categories.map((subCategory, index) => (
<SubCategoryAccordion key={index} subCategory={subCategory} />
))}
</div>
)}
</div>
);
};
// Recursive component for each sub-category
const SubCategoryAccordion = ({ subCategory }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div style={{ marginLeft: '20px' }}>
<div
style={{ cursor: 'pointer', fontWeight: 'bold' }}
onClick={() => setIsOpen(!isOpen)}
>
{subCategory.sub_category_name} {isOpen ? '[-]' : '[+]'}
</div>
{isOpen && subCategory.sub_sub_categories && (
<div>
{subCategory.sub_sub_categories.map((subSubCategory, index) => (
<SubSubCategoryAccordion key={index} subSubCategory={subSubCategory} />
))}
</div>
)}
</div>
);
};
// Recursive component for each sub-sub-category
const SubSubCategoryAccordion = ({ subSubCategory }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div style={{ marginLeft: '20px' }}>
<div
style={{ cursor: 'pointer', fontWeight: 'bold' }}
onClick={() => setIsOpen(!isOpen)}
>
{subSubCategory.sub_sub_category_name} {isOpen ? '[-]' : '[+]'}
</div>
{isOpen && subSubCategory.sub_sub_sub_categories && (
<ul>
{subSubCategory.sub_sub_sub_categories.map((item, index) => (
<li key={index}>{item.name}</li>
))}
</ul>
)}
</div>
);
};
export default CatalogAccordion;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment