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

add more example utils to dashboard

Browse Source
This commit is contained in:
Johannes Kirschbauer
2023-08-13 12:55:22 +02:00
parent 7b79166288
commit ed9e0c1623
17 changed files with 251 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pkgs/ui/src/app/layout.tsx
View File

@@ -96,7 +96,7 @@ export default function RootLayout({
</div>
<div className="px-1">
<div className="relative flex flex-1 flex-col overflow-x-hidden">
<div className="relative flex h-full flex-1 flex-col">
<main>{children}</main>
</div>
</div>

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

@@ -1,15 +1,20 @@
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/quickActions";
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 } = props;
const { children, rowSpan = 1, sx = "" } = props;
return (
<div className="col-span-full row-span-1 border border-dashed border-slate-400 lg:col-span-1">
<div className={tw`col-span-full row-span-${rowSpan} xl:col-span-1 ${sx}`}>
{children}
</div>
);
@@ -21,9 +26,7 @@ interface DashboardPanelProps {
const DashboardPanel = (props: DashboardPanelProps) => {
const { children } = props;
return (
<div className="col-span-full row-span-1 shrink-0 border border-dashed border-slate-400 lg:col-span-2">
{children}
</div>
<div className="col-span-full row-span-1 xl:col-span-2">{children}</div>
);
};
@@ -36,10 +39,7 @@ const SplitDashboardCard = (props: SplitDashboardCardProps) => {
<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 row-span-1 border border-dashed border-slate-400"
>
<div key={idx} className="col-span-full row-span-1 ">
{row}
</div>
))}
@@ -51,19 +51,25 @@ const SplitDashboardCard = (props: SplitDashboardCardProps) => {
export default function Dashboard() {
return (
<div className="flex h-screen w-full">
<div className="grid w-full auto-rows-min grid-cols-3 gap-4">
<DashboardCard>
<div className="grid w-full auto-cols-min grid-flow-row auto-rows-min grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
<DashboardCard rowSpan={2}>
<NetworkOverview />
</DashboardCard>
<DashboardCard>
<DashboardCard rowSpan={2}>
<RecentActivity />
</DashboardCard>
<SplitDashboardCard>
<DashboardCard>
<Notifications />
</DashboardCard>
<DashboardCard>
<QuickActions />
</SplitDashboardCard>
<DashboardPanel>Panel</DashboardPanel>
<DashboardCard>Side Bar (misc)</DashboardCard>
</DashboardCard>
<DashboardPanel>
<AppOverview />
</DashboardPanel>
<DashboardCard sx={tw`xl:col-span-full 2xl:col-span-1`}>
<TaskQueue />
</DashboardCard>
</div>
</div>
);