Something went wrong. Try again.
[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
Something went wrong. Try again.
3.6 kB · 150 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150import { Stack, HStack, Link, type LinkProps, type StackProps, type BadgeProps, Badge} from "@chakra-ui/react"import { Link as RouterLink } from "react-router";import { ExternalLinkIconRaw } from "./icons/ChakraIcons"
interface SideNavItem { title: React.ReactNode url: LinkProps["href"] | undefined external?: boolean status?: string}
interface SideNavProps { currentUrl?: string title: React.ReactNode id: string status?: string items: Array<SideNavItem>}
const SideNavItem = (props: StackProps) => { return ( <HStack py="1.5" ps="4" pe="3" rounded="sm" color="fg.muted" _hover={{ layerStyle: "fill.subtle", }} _currentPage={{ //colorPalette: "teal", fontWeight: "medium", layerStyle: "fill.subtle", }} {...props} /> )}
export const SideNav = (props: SideNavProps) => { const { title, items, currentUrl, status } = props return ( <Stack gap="2"> {title && ( <HStack ps="4" fontWeight="semibold"> {title} {status && <StatusBadge>{status}</StatusBadge>} </HStack> )} <Stack gap="1px"> {items.map((item, index) => ( <SideNavItem key={index} asChild> {item.external ? ( <Link href={item.url as string} target="_blank" rel="noopener" aria-current={item.url === currentUrl ? "page" : undefined} > {item.title} <ExternalLinkIconRaw /> {item.status && <StatusBadge>{item.status}</StatusBadge>} </Link> ) : ( <RouterLink to={{pathname: item.url!}} aria-current={(currentUrl.length <= item.url.length ? currentUrl.startsWith(item.url) : currentUrl === item.url) ? "page" : undefined} > {item.title} {item.status && <StatusBadge>{item.status}</StatusBadge>} </RouterLink> )} </SideNavItem> ))} </Stack> </Stack> )}
export const SideNavItems = (props: {items: SideNavProps[], currentUrl?: string}) => { return (<> {props.items.map((x) => <SideNav key={x.id} currentUrl={props.currentUrl} {...x}/>)} </>)}
const StatusBadge = (props: BadgeProps) => ( <Badge size="xs" textStyle="xs" variant="solid" colorPalette="teal" textTransform="capitalize" {...props} />)
export const EXTERNAL_LINKS: SideNavProps = { title: 'Links', id: 'Links', items: [ { title: 'Services Monitor', url: 'https://status.multi-scrobbler.app', external: true }, { title: 'Docs (Latest)', url: 'https://docs.multi-scrobbler.app/', external: true }, { title: 'Docs (Self-Hosted)', url: '/docs', external: true }, { title: 'Code', url: 'https://github.com/FoxxMD/multi-scrobbler', external: true } ]}
export const NAV_LINKS: SideNavProps[] = [ { title: 'Main', id: 'Main', items: [ { title: 'Dashboard', url: '/' }, { title: 'Settings', url: '/settings' } ] }, EXTERNAL_LINKS];