49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
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;
|
|
}
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
}
|