initial commit

src/components/AppLayout.jsx

@@ -0,0 +1,37 @@
+// Root.jsx
+import { React, useContext, useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import Alert from '@mui/joy/Alert';
+import WarningIcon from '@mui/icons-material/Warning';
+import {JoyUIRootIsland} from './Components.jsx';
+import CustomToastContainer from '../components/ToastProvider.jsx';
+import { PrimeReactProvider } from "primereact/api";
+import { API_URL } from "../config";
+import { Player } from "./AudioPlayer.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>
+  );
+}