ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

fix: accessibility and responsiveness fixes

Browse Source
This commit is contained in:
Stavros
2025-11-09 13:04:14 +02:00
parent 3e80850396
commit ffca433a43
12 changed files with 820 additions and 725 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
apps/client/app/components/status-dot.tsx
View File

@@ -3,47 +3,53 @@ import { cn } from "~/lib/utils";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
export const StatusDot = ({ status }: { status: VolumeStatus }) => {
const statusMapping = {
mounted: {
color: "bg-green-500",
colorLight: "bg-emerald-400",
animated: true,
},
unmounted: {
color: "bg-gray-500",
colorLight: "bg-gray-400",
animated: false,
},
error: {
color: "bg-red-500",
colorLight: "bg-amber-700",
animated: true,
},
unknown: {
color: "bg-yellow-500",
colorLight: "bg-yellow-400",
animated: true,
},
}[status];
const statusMapping = {
mounted: {
color: "bg-green-500",
colorLight: "bg-emerald-400",
animated: true,
},
unmounted: {
color: "bg-gray-500",
colorLight: "bg-gray-400",
animated: false,
},
error: {
color: "bg-red-500",
colorLight: "bg-amber-700",
animated: true,
},
unknown: {
color: "bg-yellow-500",
colorLight: "bg-yellow-400",
animated: true,
},
}[status];
return (
<Tooltip>
<TooltipTrigger>
<span className="relative flex size-3 mx-auto">
{statusMapping.animated && (
<span
className={cn(
"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
`${statusMapping.colorLight}`,
)}
/>
)}
<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
</span>
</TooltipTrigger>
<TooltipContent>
<p className="capitalize">{status}</p>
</TooltipContent>
</Tooltip>
);
return (
<Tooltip>
<TooltipTrigger>
<span className="relative flex size-3 mx-auto">
{statusMapping.animated && (
<span
className={cn(
"absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
`${statusMapping.colorLight}`
)}
/>
)}
<span
aria-label={status}
className={cn(
"relative inline-flex size-3 rounded-full",
`${statusMapping.color}`
)}
/>
</span>
</TooltipTrigger>
<TooltipContent>
<p className="capitalize">{status}</p>
</TooltipContent>
</Tooltip>
);
};