adding dynamic filters

src/components/AccountsTable/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { PlusCircleIcon } from "@heroicons/react/20/solid";
-import { ColumnHeadings } from "@src/lib/utils";
-import styles from '../styles.module.css';
-import PageHero from "@components/PageHero";
+//import { ColumnHeadings } from "@src/lib/utils";
+//import styles from '../styles.module.css';
+//import PageHero from "@components/PageHero";
 
 import { Suspense } from "react";
-import Loading from "@src/components/Loading/loading";
+import Loading from "@/components/Loading-Green";
 import Link from "next/link";
 
 export default async function AccountsTable( props: any ) {

src/components/Filter/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { getBBProductsCategories } from "@/db/queries/Products";
+import Link from "next/link";
+
+const Filter: React.FC<{ [key: string]: any }> = async (props: unknown) => {
+    const bbCats = getBBProductsCategories();
+
+    return (
+        <div className="mt-20">
+            <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]">
+                {(await bbCats).map((cat) => (
+                    <div className="ml-2 " key={cat.category}>
+                        <Link href={`/products/${cat.category}`} onClick={() => alert("Coming")}>
+                            {cat.category}
+                        </Link>
+                    </div>
+                ))
+                }
+            </div>
+        </div>
+    );
+};
+
+export default Filter;

src/components/Footer/index.tsx

@@ -8,6 +8,7 @@ const navigation = {
     { name: 'Uppers', href: '/Products/uppers' },
     { name: 'Optics', href: '/Products/optics' },
     { name: 'Accessories', href: '/Products/accessories' },
+    { name: 'Suppressors', href: '/Products/suppressors' },
   ],
   admin: [
     { name: 'Users', href: '/Admin/Users' },    
@@ -83,8 +84,8 @@ const navigation = {
 }
 
 export default function Footer() {
-  let newDate = new Date(); 
-  let year = newDate.getFullYear();
+  const newDate = new Date(); 
+  const year = newDate.getFullYear();
   return (
     <footer className="bg-zinc-900">
       <div className="mx-auto max-w-7xl px-6 pb-8 pt-20 sm:pt-24 lg:px-8 lg:pt-32">

src/components/Loading-Green/index.tsx

@@ -0,0 +1,9 @@
+
+const Loading = async () => {
+    return (
+        <div className="flex  justify-center pt-10 h-screen">
+            <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-green-500"></div>
+        </div>
+    )
+}
+export default Loading;

src/components/Loading/loading.tsx

@@ -1,6 +0,0 @@
-const Loading = async () => {
-    return (
-        <div className="text-center mt-14">Loading...</div>);
-}
-
-export default Loading;

src/components/admin/UsersTable/ButtonOnClick.tsx

@@ -2,7 +2,7 @@
 
 import PlusCircleIcon from "@heroicons/react/24/outline/PlusCircleIcon";
 
-export default async function ButtonOnClick(props:any) {
+export default function ButtonOnClick(props:any) {
     const handleClick = async () => {
         alert("This feature is coming soon");
      

src/components/admin/UsersTable/index.tsx

@@ -1,9 +1,10 @@
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { PlusCircleIcon } from "@heroicons/react/20/solid";
+//import { PlusCircleIcon } from "@heroicons/react/20/solid";
 
-import Image from "next/image";
+//import Image from "next/image";
 import Link from "next/link";
 import ButtonOnClick from "./ButtonOnClick";
+import { Suspense } from "react";
 
 
 export default async function UsersTable(props: any) {
@@ -11,9 +12,8 @@ export default async function UsersTable(props: any) {
   const onClick = () => {
     alert("This feature is coming soon");
 }
-  return (
-    <div className="pb-12">
-
+await new Promise((resolve) => setTimeout(resolve,1000));  return (
+    <div className="pb-12"> 
       <div className="mt-8 flow-root">
         <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
           <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
@@ -93,6 +93,7 @@ export default async function UsersTable(props: any) {
                 </tr>
               </thead>
               <tbody className=" divide-y divide-gray-200 bg-white">
+                <Suspense fallback={<div>Loading...</div>}>
                 {props.data.map((item: any) => (
                   <tr key={item.uuid}>
                     <td className="whitespace-wrap flex items-center py-4 pl-4 pr-3 text-xs font-medium text-gray-900 ">
@@ -113,15 +114,12 @@ export default async function UsersTable(props: any) {
                     </td>
                   </tr>
                 ))}
-
+                </Suspense>
               </tbody>
-
             </table>
-
           </div>
         </div>
       </div>
     </div>
-
   );
-}
+}

src/components/submit-button copy.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import { useFormStatus } from "react-dom";
-import { LoadingButton } from "@/components/loading-button";
+import { LoadingButton } from "@/components/Loading-Button";
 import type { ButtonProps } from "@/components/ui/button";
 
 const SubmitButton = forwardRef<HTMLButtonElement, ButtonProps>(

src/components/submit-button.tsx

@@ -2,7 +2,7 @@
 
 import { forwardRef } from "react";
 import { useFormStatus } from "react-dom";
-import { LoadingButton } from "@/components/loading-button";
+import { LoadingButton } from "@/components/Loading-Button";
 import type { ButtonProps } from "@/components/ui/button";
 
 const SubmitButton = forwardRef<HTMLButtonElement, ButtonProps>(