filters dispolaying, now need to link it to the data

This commit is contained in:
2025-02-04 23:49:48 -05:00
parent c85faffcba
commit 13429326ea
6 changed files with 304 additions and 711 deletions

949
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -9,17 +9,13 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.5", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.13.5", "@emotion/styled": "^11.14.0",
"@headlessui/react": "^2.2.0", "@headlessui/react": "^2.2.0",
"@heroicons/react": "^2.2.0", "@heroicons/react": "^2.2.0",
"@lucia-auth/adapter-drizzle": "^1.1.0", "@lucia-auth/adapter-drizzle": "^1.1.0",
"@mui/icons-material": "^6.1.7", "@mui/material": "^6.4.3",
"@mui/joy": "^5.0.0-beta.48", "@mui/x-tree-view": "^7.25.0",
"@mui/material": "^6.1.7",
"@mui/styles": "^6.1.7",
"@mui/system": "^6.1.7",
"@mui/x-data-grid": "^7.22.2",
"@oslojs/crypto": "^1.0.1", "@oslojs/crypto": "^1.0.1",
"@oslojs/encoding": "^1.1.0", "@oslojs/encoding": "^1.1.0",
"@radix-ui/react-alert-dialog": "^1.1.5", "@radix-ui/react-alert-dialog": "^1.1.5",

View File

@@ -12,7 +12,7 @@ export default function RootLayout({
<div className="flex min-h-full flex-col"> <div className="flex min-h-full flex-col">
<div className="mx-auto flex w-full max-w-7xl items-start gap-x-8 "> <div className="mx-auto flex w-full max-w-7xl items-start gap-x-8 ">
<aside className="sticky top-8 hidden w-44 shrink-0 lg:block pt-4"> <aside className="sticky top-8 hidden w[200] shrink-0 lg:block pt-4">
{/* Left column area */} {/* Left column area */}
<Filter heading="Filters"/> <Filter heading="Filters"/>
</aside> </aside>

View File

@@ -1,5 +1,5 @@
import { getSights } from "@queries/PSA"; import { getSights } from "@queries/PSA";
import styles from '../styles.module.css'; // import styles from '../styles.module.css';
import PageHero from "@components/PageHero"; import PageHero from "@components/PageHero";
import SortTable from "@components/SortTable"; import SortTable from "@components/SortTable";
import {Suspense} from "react"; import {Suspense} from "react";

View File

@@ -1,5 +1,9 @@
"use client"; "use client";
const ButtonProducts = ( props:any ) => { interface ButtonProductsProps {
category: string;
}
const ButtonProducts = (props: ButtonProductsProps) => {
const category = props.category; const category = props.category;
return ( return (
<button onClick={async () => { alert(category); return false;}} >{props.category}</button> <button onClick={async () => { alert(category); return false;}} >{props.category}</button>

View File

@@ -1,29 +1,45 @@
import React from "react"; import React from "react";
import { getBBProductsCategories } from "@/db/queries/Products"; import { getBBProductsCategories, getBBProductsSubCategories } from "@/db/queries/Products";
// import Link from "next/link"; // import Link from "next/link";
import ButtonProducts from "../ButtonProduct"; import Box from '@mui/material/Box';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
interface FilterProps { interface FilterProps {
heading: string; heading: string;
[key: string]: unknown; [key: string]: unknown;
} }
async function SubCategories(props: { cat: string; }) {
const Filter: React.FC<FilterProps> = async (props) => { const bbSubCats = await getBBProductsSubCategories(props.cat);
const bbCats = getBBProductsCategories(); return (
<>
{bbSubCats.map((subcat) => (
<TreeItem key={subcat.subcategory} itemId={subcat.subcategory} label={subcat.subcategory} />
))}
</>
);
}
async function Filter(props: FilterProps) {
const bbCats = await getBBProductsCategories();
return ( return (
<div className="mt-20"> <div className="mt-20">
<h1 className="pt-10 ml-2 font-bold">{props.heading}</h1> <h1 className="pt-10 ml-2 font-bold">{props.heading}</h1>
<div className="flex flex-col pt-2 pb-6 ml-2 rounded-r-lg text-white bg-[#334155]"> <div className="flex flex-col pt-2 pb-6 ml-2 rounded-r-lg text-white bg-[#334155]">
<Box sx={ {minHeight: 600, minWidth: 250} }>
{(await bbCats).map((cat) => ( <SimpleTreeView>
<div className="ml-2 " key={cat.category}> {bbCats.map((cat) => (
{/* <Link href={`/products/${cat.category}`}> */} <TreeItem key={cat.category} itemId={cat.category} label={cat.category}>
<ButtonProducts category={cat.category} /> {cat.category && <SubCategories cat={cat.category} />}
{/* </Link> */} </TreeItem>
</div> ))}
)) </SimpleTreeView>
} </Box>
</div> </div>
</div> </div>
); );