Luis/nextjs-python-web-template
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: some util to dashboard

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-08-12 17:11:41 +02:00
parent 9a40891f7c
commit cdef88e55e
17 changed files with 582 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
pkgs/ui/src/app/page.tsx
View File

@@ -1,10 +1,15 @@
import { RecentActivity } from "@/components/dashboard/activity";
import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
import { Notifications } from "@/components/dashboard/notifications";
import { QuickActions } from "@/components/quickActions";
interface DashboardCardProps {
children?: React.ReactNode;
}
const DashboardCard = (props: DashboardCardProps) => {
const { children } = props;
return (
<div className="col-span-full border border-dashed border-slate-400 lg:col-span-1">
<div className="col-span-full row-span-1 border border-dashed border-slate-400 lg:col-span-1">
{children}
</div>
);
@@ -16,7 +21,7 @@ interface DashboardPanelProps {
const DashboardPanel = (props: DashboardPanelProps) => {
const { children } = props;
return (
<div className="col-span-full border border-dashed border-slate-400 lg:col-span-2">
<div className="col-span-full row-span-1 shrink-0 border border-dashed border-slate-400 lg:col-span-2">
{children}
</div>
);
@@ -28,12 +33,12 @@ interface SplitDashboardCardProps {
const SplitDashboardCard = (props: SplitDashboardCardProps) => {
const { children } = props;
return (
<div className="col-span-full lg:col-span-1">
<div className="col-span-full row-span-1 lg:col-span-1">
<div className="grid h-full grid-cols-1 gap-4">
{children?.map((row, idx) => (
<div
key={idx}
className="col-span-full border border-dashed border-slate-400"
className="col-span-full row-span-1 border border-dashed border-slate-400"
>
{row}
</div>
@@ -46,12 +51,16 @@ const SplitDashboardCard = (props: SplitDashboardCardProps) => {
export default function Dashboard() {
return (
<div className="flex h-screen w-full">
<div className="grid w-full grid-cols-3 gap-4">
<DashboardCard>Current CLAN Overview</DashboardCard>
<DashboardCard>Recent Activity Log</DashboardCard>
<div className="grid w-full auto-rows-min grid-cols-3 gap-4">
<DashboardCard>
<NetworkOverview />
</DashboardCard>
<DashboardCard>
<RecentActivity />
</DashboardCard>
<SplitDashboardCard>
<div>Notifications</div>
<div>Quick Action</div>
<Notifications />
<QuickActions />
</SplitDashboardCard>
<DashboardPanel>Panel</DashboardPanel>
<DashboardCard>Side Bar (misc)</DashboardCard>