Dashboard Grid

'use client';
 
import { Box, Grid } from '@umami/react-zen';
 
export function DashboardGrid({ children, ...props }) {
  return (
    <Grid columns="repeat(auto-fit, minmax(280px, 1fr))" gap="4" {...props}>
      {children}
    </Grid>
  );
}
 
export function DashboardCard({ children, ...props }) {
  return (
    <Box
      padding="4"
      backgroundColor="surface-raised"
      borderRadius="lg"
      border
      borderColor="muted"
      {...props}
    >
      {children}
    </Box>
  );
}
 
export function DashboardCardWide({ children, ...props }) {
  return (
    <Box
      padding="4"
      backgroundColor="surface-raised"
      borderRadius="lg"
      border
      borderColor="muted"
      style={{ gridColumn: 'span 2' }}
      {...props}
    >
      {children}
    </Box>
  );
}
 
export function DashboardCardFull({ children, ...props }) {
  return (
    <Box
      padding="4"
      backgroundColor="surface-raised"
      borderRadius="lg"
      border
      borderColor="muted"
      style={{ gridColumn: '1 / -1' }}
      {...props}
    >
      {children}
    </Box>
  );
}