codey.lol/src/components/AppLayout.jsx

// Root.jsx
import { toast } from 'react-toastify';
import { API_URL } from '../config';
import { Player } from './AudioPlayer.jsx';
import { JoyUIRootIsland } from './Components.jsx';
import { PrimeReactProvider } from "primereact/api";
import Alert from '@mui/joy/Alert';
import WarningIcon from '@mui/icons-material/Warning';
import CustomToastContainer from '../components/ToastProvider.jsx';
import LyricSearch from './LyricSearch.jsx';


export default function Root({child}) {
  window.toast = toast;
  window.API_URL = API_URL;
  const theme = document.documentElement.getAttribute("data-theme")
  // console.log(opts.children);
  return (
    <PrimeReactProvider>
    <CustomToastContainer
    theme={theme}
    newestOnTop={true}
    closeOnClick={true}/>
    <JoyUIRootIsland>
    <Alert
        startDecorator={<WarningIcon />}
        variant="soft"
        color="danger">
          Work in progress... bugs are to be expected.
        </Alert>
    {child == "LyricSearch" && (<LyricSearch client:only="react" />)}
    {child == "Player" && (<Player client:only="react"></Player>)}
    </JoyUIRootIsland>
    </PrimeReactProvider>
  );
}