stuff...?

src/components/ui/status.tsx

@@ -0,0 +1,29 @@
+import type { ColorPalette } from "@chakra-ui/react"
+import { Status as ChakraStatus } from "@chakra-ui/react"
+import * as React from "react"
+
+type StatusValue = "success" | "error" | "warning" | "info"
+
+export interface StatusProps extends ChakraStatus.RootProps {
+  value?: StatusValue
+}
+
+const statusMap: Record<StatusValue, ColorPalette> = {
+  success: "green",
+  error: "red",
+  warning: "orange",
+  info: "blue",
+}
+
+export const Status = React.forwardRef<HTMLDivElement, StatusProps>(
+  function Status(props, ref) {
+    const { children, value = "info", ...rest } = props
+    const colorPalette = rest.colorPalette ?? statusMap[value]
+    return (
+      <ChakraStatus.Root ref={ref} {...rest} colorPalette={colorPalette}>
+        <ChakraStatus.Indicator />
+        {children}
+      </ChakraStatus.Root>
+    )
+  },
+)