Rewrote turborepo. Hopefully this is a bit more clean & easy to understand for me.

packages/ui/src/status-message.tsx

@@ -0,0 +1,58 @@
+import { type ComponentProps } from "react";
+import { cn } from "@/lib/utils";
+
+type Message = { success: string } | { error: string } | { message: string };
+
+type StatusMessageProps = {
+  message: Message;
+  containerProps?: ComponentProps<"div">;
+  textProps?: ComponentProps<"div">;
+};
+
+export const StatusMessage = ({
+  message,
+  containerProps,
+  textProps,
+}: StatusMessageProps) => {
+  return (
+    <div className="flex w-full flex-col items-center">
+      {"success" in message && (
+        <div
+          {...containerProps}
+          className={cn(
+            "flex w-11/12 flex-col items-center rounded-md p-2",
+            "border-2 bg-green-700/20 dark:bg-green-500/20",
+            "border-green-700/50 dark:border-green-500/50",
+            containerProps?.className,
+          )}
+        >
+          <p {...textProps}>{message.success}</p>
+        </div>
+      )}
+      {"error" in message && (
+        <div
+          {...containerProps}
+          className={cn(
+            "flex w-11/12 flex-col items-center rounded-md p-2",
+            "bg-destructive/20 border-destructive/80 border-2",
+            containerProps?.className,
+          )}
+        >
+          <p {...textProps}>{message.error}</p>
+        </div>
+      )}
+      {"message" in message && (
+        <div
+          {...containerProps}
+          className={cn(
+            "flex w-11/12 flex-col items-center rounded-md p-2",
+            "bg-accent/20 border-primary/80 border-2",
+            containerProps?.className,
+          )}
+        >
+          <p {...textProps}>{message.message}</p>
+        </div>
+      )}
+    </div>
+  );
+};