[READ-ONLY] Mirror of https://github.com/FoxxMD/multi-scrobbler. Scrobble plays from multiple sources to multiple clients
docs.multi-scrobbler.app
deezer
docker
jellyfin
koito
lastfm
listenbrainz
maloja
mopidy
mpris
music
music-assistant
plex
scrobble
self-hosted
spotify
subsonic
tautulli
youtube-music
feat(ui): Implement status indicator
+26
+26
src/client/components/StatusIndicator.tsx
+26
src/client/components/StatusIndicator.tsx
···
1
+
import React, {PropsWithChildren} from 'react';
2
+
3
+
export type StatusType = 'active' | 'warn' | 'error' | 'inactive' | string;
4
+
5
+
// must use full class names for tailwind to avoid purging
6
+
// https://github.com/tailwindlabs/tailwindcss/discussions/7745#discussioncomment-3304940
7
+
const statusToColor = (status: StatusType) => {
8
+
switch (status) {
9
+
case 'active':
10
+
return 'bg-green-500';
11
+
case 'warn':
12
+
return 'bg-yellow-500';
13
+
case 'error':
14
+
return 'bg-red-500';
15
+
case 'inactive':
16
+
default:
17
+
return 'bg-gray-500';
18
+
}
19
+
}
20
+
21
+
const StatusIndicator = (props: PropsWithChildren<{ type: StatusType }>) => {
22
+
const cn = `flex w-3 h-3 ${statusToColor(props.type)} rounded-full ml-1.5`
23
+
return <span className={cn}>{props.children}</span>;
24
+
}
25
+
26
+
export default StatusIndicator;