rushilwiz/compass
1
0
Fork 0
mirror of https://github.com/cssgunc/compass.git synced 2025-04-10 06:10:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Reorder code

Browse Source
This commit is contained in:
Meliora Ho 2024-03-27 14:13:57 +00:00
parent 76077f271f
commit 80760c1f14
2 changed files with 52 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
compass/app/admin/page.tsx
View File

@ -1,7 +1,12 @@
"use client"; "use client";
// import Table from "@/components/Table"; // import Table from "@/components/Table";
import { ColumnDef, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table"; import {
ColumnDef,
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
} from "@tanstack/react-table";
import { useState } from "react"; import { useState } from "react";
import usersImport from "./users.json"; import usersImport from "./users.json";
@ -16,26 +21,28 @@ type User = {
program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY"; program: "DOMESTIC" | "ECONOMIC" | "COMMUNITY";
experience: number; experience: number;
group?: string; group?: string;
} };
// TODO: Example data. Remove later. import { PageLayout } from "@/components/admin/PageLayout";
import { BookmarkIcon } from "@heroicons/react/24/solid";
export default function Page() { export default function Page() {
const columnHelper = createColumnHelper<User>(); const columnHelper = createColumnHelper<User>();
const columns = [ const columns = [
columnHelper.accessor("username", { columnHelper.accessor("username", {
cell: info => info.getValue(), cell: (info) => info.getValue(),
}), }),
columnHelper.accessor("role", { columnHelper.accessor("role", {
cell: info => info.renderValue(), cell: (info) => info.renderValue(),
}), }),
columnHelper.accessor("email", { columnHelper.accessor("email", {
cell: info => info.renderValue(), cell: (info) => info.renderValue(),
}), }),
columnHelper.accessor("program", { columnHelper.accessor("program", {
cell: info => info.renderValue(), cell: (info) => info.renderValue(),
}) }),
]; ];
const [data, setData] = useState<User[]>([...usersExample]); const [data, setData] = useState<User[]>([...usersExample]);
@ -45,53 +52,40 @@ export default function Page() {
data, data,
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
}); });
return ( return (
<> <div className="min-h-screen flex flex-col">
<h1>This is example data!!</h1> {/* icon + title */}
<PageLayout title="Resources" icon={<BookmarkIcon />}>
<table> <table>
<thead> <thead>
{table.getHeaderGroups().map(headerGroup => ( {table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map(header => ( {headerGroup.headers.map((header) => (
<th key={header.id}> <th key={header.id}>
{header.isPlaceholder {header.isPlaceholder
? null ? null
: flexRender( : flexRender(
header.column.columnDef.header, header.column.columnDef.header,
header.getContext() header.getContext()
)} )}
</th> </th>
))} ))}
</tr> </tr>
))} ))}
</thead> </thead>
<tbody> <tbody>
{table.getRowModel().rows.map(row => ( {table.getRowModel().rows.map((row) => (
<tr key={row.id}> <tr key={row.id}>
{row.getVisibleCells().map(cell => ( {row.getVisibleCells().map((cell) => (
<td key={cell.id}> <td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())} {flexRender(cell.column.columnDef.cell, cell.getContext())}
</td> </td>
))} ))}
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</>); </PageLayout>
</div>
);
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>
)
} }

2
compass/components/admin/PageLayout.tsx
View File

@ -1,7 +1,7 @@
interface PageLayoutProps { interface PageLayoutProps {
icon: React.ReactElement; icon: React.ReactElement;
title: string; title: string;
// table: React.ReactElement children: React.ReactElement
} }
export const PageLayout: React.FC<PageLayoutProps> = ({ icon, title, children }) => { export const PageLayout: React.FC<PageLayoutProps> = ({ icon, title, children }) => {