generated from Luis/nextjs-python-web-template
62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
"use client";
|
|
import { RecentActivity } from "@/components/dashboard/activity";
|
|
import { AppOverview } from "@/components/dashboard/appOverview";
|
|
import { NetworkOverview } from "@/components/dashboard/NetworkOverview";
|
|
import { Notifications } from "@/components/dashboard/notifications";
|
|
import { QuickActions } from "@/components/dashboard/quickActions";
|
|
import { TaskQueue } from "@/components/dashboard/taskQueue";
|
|
import { tw } from "@/utils/tailwind";
|
|
|
|
interface DashboardCardProps {
|
|
children?: React.ReactNode;
|
|
rowSpan?: number;
|
|
sx?: string;
|
|
}
|
|
const DashboardCard = (props: DashboardCardProps) => {
|
|
const { children, rowSpan, sx = "" } = props;
|
|
return (
|
|
<div
|
|
className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface DashboardPanelProps {
|
|
children?: React.ReactNode;
|
|
}
|
|
const DashboardPanel = (props: DashboardPanelProps) => {
|
|
const { children } = props;
|
|
return (
|
|
<div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
|
|
);
|
|
};
|
|
|
|
export default function Dashboard() {
|
|
return (
|
|
<div className="flex h-screen w-full">
|
|
<div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
|
|
<DashboardCard rowSpan={2}>
|
|
<NetworkOverview />
|
|
</DashboardCard>
|
|
<DashboardCard rowSpan={2}>
|
|
<RecentActivity />
|
|
</DashboardCard>
|
|
<DashboardCard>
|
|
<Notifications />
|
|
</DashboardCard>
|
|
<DashboardCard>
|
|
<QuickActions />
|
|
</DashboardCard>
|
|
<DashboardPanel>
|
|
<AppOverview />
|
|
</DashboardPanel>
|
|
<DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
|
|
<TaskQueue />
|
|
</DashboardCard>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|