.

app/components/custom-ui/online-status.tsx

@@ -1,19 +1,47 @@
-import { Circle, CircleMinus, Moon } from "lucide-react";
+import { Circle, MinusCircle, Moon } from "lucide-react";
+import { cn } from "~/lib/utils"; // Assuming you have a cn utility
+
+// Define status type for better type safety if used elsewhere
+export type UserStatusType = "online" | "dnd" | "idle" | "offline";
+
+interface OnlineStatusProps extends React.ComponentProps<"div"> {
+    status: UserStatusType;
+}
+
+export function OnlineStatus({ status, className, ...rest }: OnlineStatusProps) {
+    const statusTitle = status.charAt(0).toUpperCase() + status.slice(1);
+
+    let statusIndicatorIcon: React.ReactNode = null;
+
+    switch (status) {
+        case "online":
+            statusIndicatorIcon = <Circle className="size-full fill-emerald-500 stroke-none" />;
+            break;
+        case "dnd":
+            statusIndicatorIcon = (
+                <MinusCircle className="size-full fill-red-500 stroke-background" strokeWidth={2.5} />
+            );
+            break;
+        case "idle":
+            statusIndicatorIcon = <Moon className="size-full fill-amber-400 stroke-amber-400" />;
+            break;
+        case "offline":
+            statusIndicatorIcon = <Circle className="size-full fill-transparent stroke-gray-500 stroke-[4px]" />;
+            break;
+    }
 
-export function OnlineStatus({
-    status,
-    ...props
-}: React.ComponentProps<"div"> & {
-    status: "online" | "dnd" | "idle" | "offline";
-}) {
     return (
-        <div className="relative">
-            <div {...props}></div>
-            <div className="absolute bottom-0 right-0 bg-background rounded-full p-0.5 size-1/2">
-                {status === "online" && <Circle className="size-full stroke-emerald-400 fill-emerald-400" />}
-                {status === "dnd" && <CircleMinus className="size-full stroke-red-400 stroke-3" />}
-                {status === "idle" && <Moon className="size-full stroke-amber-400 fill-amber-400" />}
-                {status === "offline" && <Circle className="size-full stroke-gray-400 stroke-3" />}
+        <div className="relative inline-block align-middle">
+            <div className={className} {...rest} />
+            <div
+                title={statusTitle}
+                className={cn(
+                    "absolute bottom-0 right-0 flex items-center justify-center",
+                    "rounded-full bg-background",
+                    "size-1/2 p-0.5",
+                )}
+            >
+                {statusIndicatorIcon}
             </div>
         </div>
     );