45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo, type CSSProperties } from 'react';
|
|
import {
|
|
packDashboardCells,
|
|
packedCellClassName,
|
|
TODAY_DASHBOARD_GRID_CLASS,
|
|
type TodayDashboardCell,
|
|
} from '@/components/today/today-dashboard-layout';
|
|
|
|
interface TodayDashboardGridProps {
|
|
cells: TodayDashboardCell[];
|
|
loading?: boolean;
|
|
}
|
|
|
|
export function TodayDashboardGrid({ cells, loading = false }: TodayDashboardGridProps) {
|
|
const packed = useMemo(() => packDashboardCells(cells), [cells]);
|
|
|
|
if (packed.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`${TODAY_DASHBOARD_GRID_CLASS} ${loading ? 'opacity-70 transition-opacity' : ''}`}
|
|
style={{ gridAutoRows: 'var(--today-grid-unit, 5.75rem)' }}
|
|
>
|
|
{packed.map((cell) => (
|
|
<div
|
|
key={cell.id}
|
|
className={`today-dashboard-cell ${packedCellClassName(cell.layout)}`}
|
|
style={
|
|
{
|
|
'--today-gc': cell.gridColumn,
|
|
'--today-gr': cell.gridRow,
|
|
} as CSSProperties
|
|
}
|
|
>
|
|
<div className="flex h-full min-h-0 flex-1 flex-col">{cell.content}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|