58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import dynamic from "next/dynamic"
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/styles/base-sera/ui/card"
|
|
|
|
const TrafficOverviewContent = dynamic(
|
|
() => import("./traffic-overview").then((mod) => mod.TrafficOverview),
|
|
{
|
|
ssr: false,
|
|
loading: () => <TrafficOverviewFallback />,
|
|
}
|
|
)
|
|
|
|
export function TrafficOverviewDeferred({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof Card>) {
|
|
return (
|
|
<div className={className}>
|
|
<TrafficOverviewContent {...props} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TrafficOverviewFallback() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Traffic Overview</CardTitle>
|
|
<CardDescription>
|
|
Traffic for the last 30 days has increased by 12.4% compared to the
|
|
previous period.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div
|
|
aria-hidden="true"
|
|
className="flex h-82 w-full flex-col justify-end gap-6 overflow-hidden bg-muted/40 p-5"
|
|
>
|
|
<div className="h-px w-full bg-border" />
|
|
<div className="h-px w-full bg-border" />
|
|
<div className="h-px w-full bg-border" />
|
|
<div className="h-px w-full bg-border" />
|
|
<div className="h-px w-full bg-border" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|