This commit is contained in:
Meliora Ho 2024-03-27 14:02:39 +00:00
parent e1d5318777
commit 01e73aa702
6 changed files with 68 additions and 20 deletions

View File

@ -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>
)
}

View File

@ -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"

View File

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

View File

@ -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",

View File

@ -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"