Draggable Dashboard

import DraggableDashboard, { DraggableWrapper } from "@/components/draggable-dashboard"

export default function MyDashboard() {
  return (
      <div className="w-full max-w-4xl mx-auto">
        <DraggableDashboard
          showLockToggle={true}
          showHandles={true}
          gridCols={3}
          gap={4}
          defaultLocked={false}
          persistenceKey="my-dashboard"
        >
            <DraggableWrapper id="revenue" gridSize={{ cols: 1, rows: 1 }}>
              <RevenueCard />
            </DraggableWrapper>

            <DraggableWrapper id="users" gridSize={{ cols: 1, rows: 1 }}>
              <UsersCard />
            </DraggableWrapper>

            <DraggableWrapper id="sales" gridSize={{ cols: 1, rows: 1 }}>
              <SalesCard />
            </DraggableWrapper>

            <DraggableWrapper id="performance" gridSize={{ cols: 1, rows: 1 }}>
              <PerformanceCard />
            </DraggableWrapper>

            <DraggableWrapper id="chart" gridSize={{ cols: 2, rows: 1 }}>
              <SimpleChart />
            </DraggableWrapper>
        </DraggableDashboard>
    </div>
  )

}