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.9 kB · 149 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150import { Popover as ChakraPopover, IconButton, type IconButtonProps, Portal, Tooltip as ChakraTooltip, Span,} from "@chakra-ui/react"import * as React from "react"import { HiOutlineInformationCircle } from "react-icons/hi"
export interface ToggleTipProps extends ChakraPopover.RootProps { showArrow?: boolean portalled?: boolean portalRef?: React.RefObject<HTMLElement | null> content?: React.ReactNode contentProps?: ChakraPopover.ContentProps}
export const ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>( function ToggleTip(props, ref) { const { showArrow, children, portalled = true, content, contentProps, portalRef, positioning: { placement = 'top-start', ...positiongRest } = {}, ...rest } = props
return ( <ChakraPopover.Root {...rest} positioning={{ placement, gutter: 4, ...positiongRest }} > <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger> <Portal disabled={!portalled} container={portalRef}> <ChakraPopover.Positioner> <ChakraPopover.Content // width="auto" px="2" py="1" textStyle="xs" rounded="sm" ref={ref} width="auto" {...contentProps} > {showArrow && ( <ChakraPopover.Arrow> <ChakraPopover.ArrowTip /> </ChakraPopover.Arrow> )} {content} </ChakraPopover.Content> </ChakraPopover.Positioner> </Portal> </ChakraPopover.Root> ) },)
export interface InfoTipProps extends Partial<ToggleTipProps> { buttonProps?: IconButtonProps | undefined}
export const InfoTip = React.forwardRef<HTMLDivElement, InfoTipProps>( function InfoTip(props, ref) { const { children, buttonProps, ...rest } = props return ( <ToggleTip content={children} {...rest} ref={ref}> <IconButton variant="ghost" aria-label="info" size="2xs" colorPalette="gray" {...buttonProps} > <HiOutlineInformationCircle /> </IconButton> </ToggleTip> ) },)
export interface TextTipProps extends Partial<ToggleTipProps> { text: string | React.ReactNode}
export const TextTip = React.forwardRef<HTMLDivElement, TextTipProps>( (props, ref) => { const { children, text, ...rest } = props return ( <ToggleTip content={children} showArrow {...rest} ref={ref}> <Span textDecoration="underline dashed 1px" cursor="pointer">{text}</Span> </ToggleTip> ) },)
export interface TooltipProps extends ChakraTooltip.RootProps { showArrow?: boolean portalled?: boolean portalRef?: React.RefObject<HTMLElement | null> content: React.ReactNode contentProps?: ChakraTooltip.ContentProps disabled?: boolean}
export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>( function Tooltip(props, ref) { const { showArrow, children, disabled, portalled = true, content, contentProps, portalRef, ...rest } = props
if (disabled) return children
return ( <ChakraTooltip.Root {...rest}> <ChakraTooltip.Trigger asChild>{children}</ChakraTooltip.Trigger> <Portal disabled={!portalled} container={portalRef}> <ChakraTooltip.Positioner> <ChakraTooltip.Content ref={ref} {...contentProps}> {showArrow && ( <ChakraTooltip.Arrow> <ChakraTooltip.ArrowTip /> </ChakraTooltip.Arrow> )} {content} </ChakraTooltip.Content> </ChakraTooltip.Positioner> </Portal> </ChakraTooltip.Root> ) },)