Add button when no widgets populate the canvas

2025-08-08 13:00:33 -07:00
parent 5df556896f
commit f2fe8b5fb2
3 changed files with 65 additions and 15 deletions
@@ -0,0 +1,28 @@
+import { Box, Heading } from '@chakra-ui/react'
+
+export default function FirstWidgetButton() {
+
+    return (
+        <Box
+            p={6}
+            m={4}
+            borderRadius="md" 
+            boxShadow="md"
+            border="2px dashed"
+            borderColor="gray.300"
+            bg="gray.50"
+            textAlign="center"
+            cursor="pointer"
+            _hover = {{
+                bg: "gray.100",
+                borderColor: "gray.400",
+                boxShadow: "lg",
+            }}
+            transition="all 0.2s ease-in-out"
+        >
+            <Heading fontWeight="bold" fontSize="xl" color="gray.700">
+                Add First Widget
+            </Heading>
+        </Box>
+    );
+}