Create a single-screen React TypeScript application that replicates the core functionality of Mixpanel Boards. The application should feature a drag-and-drop dashboard with resizable widgets. Use Tailwind CSS for styling. The dashboard should have the following specifications:
Layout:
Implement a 12-column grid system for widget placement.
Ensure all rows are always filled up (no empty spaces).
Use a flex-based layout to achieve dynamic resizing.
Widgets:
Create draggable and resizable widget components.
Widgets should contain placeholder text (e.g., "Widget 1", "Widget 2", etc.).
Implement a minimum width of 3 columns for each widget.
Allow horizontal resizing only (no vertical resizing of individual widgets).
Add a 20px high resize handle at the bottom of each row for vertical resizing of the entire row.
Drag and Drop Functionality:
Implement drag and drop using react-grid-layout or a similar library.
Allow widgets to be dragged between rows and within rows.
When a widget | A shadcn/ui and v0 generation - v0
