I'll create a dashboard similar to the screenshot that shows an overview of your cluster status across different cloud platforms. This will include status indicators, filtering by region, and a clean tabular layout.
This cluster status dashboard includes:
Status Indicators - Visual indicators for:
You can enhance this dashboard in several ways:
The dashboard uses shadcn/ui components and Tailwind CSS for styling, making it easy to customize to match your brand or preferences.
Create a Next.js dashboard page that shows the status of clusters across multiple cloud platforms. The dashboard should look similar to a service status page with the following features:
1. Header section with:
- Title "Cluster Status Dashboard"
- Subtitle "Up-to-the-minute cluster availability and performance information"
- Login button in the top right corner
2. Filter tabs for different cloud platforms:
- All Regions
- AWS
- Azure
- GCP
- IBM Cloud
- Oracle Cloud
3. Current date and time display in the format "Wednesday, March 5, 2025 1:25 PM GMT-0800"
4. Main table with:
- Rows representing different clusters (Production Web, Production API, Database, Staging, etc.)
- Columns for "Current Status" and the last 14 days (with dates as headers)
- Alternating row background colors for better readability
- Status indicators in each cell:
* Green checkmark for "Normal" status
* Yellow/amber triangle for "Degraded" status
* Red circle for "Disrupted" status
5. Legend at the bottom explaining the status indicators
6. Responsive design that works on both desktop and mobile
Use shadcn/ui components and Tailwind CSS for styling. For demonstration purposes, generate random status data that's mostly "Normal" (about 90%), with some "Degraded" (about 7%) and "Disrupted" (about 3%) statuses.
The page should be interactive with the region tabs working to filter the view (though for the demo, you can just have it change the active tab without actually filtering data).
Make sure the table is horizontally scrollable on mobile devices to accommodate all the date columns.This prompt provides Cursor with all the necessary details to generate a dashboard similar to the one I created. It specifies the layout, components, styling requirements, and even the data distribution for the status indicators.
You can copy this prompt and paste it into Cursor to have it generate the code for your dashboard. Feel free to modify any specific requirements before submitting it to Cursor.