combined

compass/app/admin/page.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { PageLayout } from "@/components/admin/PageLayout"
+
+import { BookmarkIcon } from "@heroicons/react/24/solid"
+
+export default function Page() {
+    return (
+        <div className="min-h-screen flex flex-col">
+            {/* icon + title  */}
+            <PageLayout title="Resources" icon={<BookmarkIcon  />}  />
+        </div>
+    )
+}

compass/app/resource/page.tsx

@@ -9,7 +9,7 @@ export default function Page() {
     return (
         <div className="min-h-screen flex flex-col">
             {/* icon + title  */}
-            <div className="pt-16 px-8 pb-4 flex-grow">
+            <div className="pt-16 px-8 pb-4 flex-row">
                 <div className="mb-4 flex items-center space-x-4">
                     <Image
                         src="/logo.png"

compass/components/admin/PageLayout.tsx

@@ -1,22 +1,23 @@
-
+interface PageLayoutProps {
-interface PageLayoutProps{
+  icon: React.ReactElement;
-    icon: React.ReactElement;
+  title: string;
-    title: string;
+  // table: React.ReactElement
-    table: React.ReactElement
 }
 
-export const PageLayout: React.FC<PageLayoutProps> = ({ icon, title, table }) => {
+export const PageLayout: React.FC<PageLayoutProps> = ({ icon, title, children }) => {
-    return(
+  return (
-        <div flex-column> 
+    <div className="min-h-screen flex flex-col">
-            <div flex-row>
+            {/* icon + title  */}
-                <span className="h-5 text-gray-500 w-5">
+            <div className="pt-16 px-8 pb-4 flex-row">
-                    {icon}
+                <div className="mb-4 flex items-center space-x-4">
-                </span>
+                    <span className="w-6 h-6 text-purple-200">{icon}</span>
-                <span className="flex-grow font-medium text-xs text-gray-500">
+                    <h1 className='font-bold text-2xl text-purple-800'>{title}</h1>
-                    {title}
+                </div>
-                </span>
             </div>
-            <span> {table} </span>
+            {/* data  */}
-         </div>
+            <div>
-    );
+                {children}
-};
+            </div>
+    </div>
+  );
+};

compass/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@heroicons/react": "^2.1.1",
+        "@tanstack/react-table": "^8.15.0",
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18"
@@ -401,6 +402,37 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.15.0.tgz",
+      "integrity": "sha512-8K4RSROUtXUtfiezV6Ehl8z99axFrkQnxXi0vjWBJv3Tsm5x4EyrgXI7d2tOOMoANykKZLB6S1sGZGemoMRt7Q==",
+      "dependencies": {
+        "@tanstack/table-core": "8.14.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.14.0.tgz",
+      "integrity": "sha512-wDhpKJahGHWhmRt4RxtV3pES63CoeadljGWS/xeS9OJr1HBl2NB+OO44ht3sxDH5j5TRDAbQzC0NvSlsUfn7lQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",

compass/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.1",
+    "@tanstack/react-table": "^8.15.0",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18"