update real time dashboard a bit

This commit is contained in:
Carl-Gerhard Lindesvärd
2024-05-03 13:06:36 +02:00
parent 61d936d75a
commit d5cc2239ed
3 changed files with 16 additions and 24 deletions

View File

@@ -135,18 +135,11 @@ interface WrapperProps {
function Wrapper({ open, children, count }: WrapperProps) {
return (
<AnimateHeight open={open}>
<div className="flex flex-col items-end md:flex-row">
<div className="md:card flex items-end max-md:mb-2 max-md:w-full max-md:justify-between md:mr-2 md:flex-col md:p-4">
<div className="text-sm max-md:mb-1">Last 30 minutes</div>
<div className="overflow-hidden text-ellipsis whitespace-nowrap text-2xl font-bold">
{count}
</div>
<div className="flex flex-col">
<div className="relative -top-2 text-center text-xs font-medium text-muted-foreground">
{count} unique vistors last 30 minutes
</div>
<div className="relative flex aspect-[5/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:gap-2">
<div className="absolute -top-3 right-0 text-xs text-muted-foreground">
NOW
</div>
{/* <div className="md:absolute top-0 left-0 md:card md:p-4 mr-2 md:bg-background/90 z-50"> */}
<div className="relative flex aspect-[6/1] max-h-[150px] w-full flex-1 items-end gap-0.5 md:aspect-[10/1] md:gap-2">
{children}
</div>
</div>

View File

@@ -192,13 +192,13 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
return (
<div className="card col-span-6 p-4">
<div className="mb-2 grid grid-cols-6 gap-2">
<div className="-mx-2 -mt-2 mb-2 grid grid-cols-6 gap-2">
{reports.map((report, index) => (
<button
key={index}
className={cn(
'col-span-3 rounded p-2 transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-sm',
index === metric && 'border-l-4 border-blue-600 bg-slate-50'
'col-span-3 rounded-lg border border-background p-2 transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-xs',
index === metric && 'border-border'
)}
onClick={() => {
setMetric(index);