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.
1.4 kB · 49 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849import React, { useState, useRef } from 'react';import { Splitter } from '@chakra-ui/react';import { Outlet} from "react-router-dom";import { LogsFetchable } from '../LogsNext.js';
const getLayoutKey = (panels: Array<{ id: string }>): string => { return panels.map((p) => p.id).join(":")}
const initialPanels: Splitter.PanelData[] = [ { id: "main", order: 0 }, { id: "logs", order: 1 },]
export const SplitLayout = () => { const [sizes, setSizes] = useState<number[]>([75, 25]); const initialLayout = getLayoutKey(initialPanels); const layoutCache = useRef<Record<string, number[]>>({ [initialLayout]: [], });
return (<> <Splitter.Root p="0" panels={[{ id: 'main', minSize: 20, order: 0, resizeBehavior: "preserve-pixel-size" }, { id: 'logs', minSize: 20, order: 1 }]}
defaultSize={sizes} orientation="vertical"
onResize={({ size, layout }) => { setSizes(size) layoutCache.current[layout] = size }} minH="90vh" > <Splitter.Panel id="main"> <Outlet /> </Splitter.Panel> <Splitter.ResizeTrigger id="main:logs" /> <Splitter.Panel borderWidth="1px" id="logs"> <LogsFetchable /> </Splitter.Panel> </Splitter.Root> </>);}