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

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

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