made asides dynamic and added public folder symlink

dailyjs/basic-call/components/App/App.js

@@ -2,11 +2,12 @@ import React, { useMemo } from 'react';
 import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
 import { useCallUI } from '@dailyjs/shared/hooks/useCallUI';
 
+import PropTypes from 'prop-types';
 import Room from '../Room';
 import { Asides } from './Asides';
 import { Modals } from './Modals';
 
-export const App = () => {
+export const App = ({ asides }) => {
   const { state, leave } = useCallState();
 
   const componentForState = useCallUI({
@@ -20,7 +21,7 @@ export const App = () => {
       <div className="app">
         {componentForState()}
         <Modals />
-        <Asides />
+        <Asides asides={asides} />
         <style jsx>{`
           color: white;
           height: 100vh;
@@ -34,8 +35,12 @@ export const App = () => {
         `}</style>
       </div>
     ),
-    [componentForState]
+    [componentForState, asides]
   );
 };
 
+App.propTypes = {
+  asides: PropTypes.arrayOf(PropTypes.func),
+};
+
 export default App;

dailyjs/basic-call/components/App/Asides.js

@@ -1,10 +1,16 @@
 import React from 'react';
-import { PeopleAside } from '@dailyjs/shared/components/Aside';
+import PropTypes from 'prop-types';
 
-export const Asides = () => (
+export const Asides = ({ asides }) => (
   <>
-    <PeopleAside />
+    {asides.map((A) => (
+      <A key={A.name} />
+    ))}
   </>
 );
 
+Asides.propTypes = {
+  asides: PropTypes.arrayOf(PropTypes.func),
+};
+
 export default Asides;

dailyjs/basic-call/pages/index.js

@@ -1,4 +1,5 @@
 import React, { useState, useCallback } from 'react';
+import { PeopleAside } from '@dailyjs/shared/components/Aside';
 import { CallProvider } from '@dailyjs/shared/contexts/CallProvider';
 import { MediaDeviceProvider } from '@dailyjs/shared/contexts/MediaDeviceProvider';
 import { ParticipantsProvider } from '@dailyjs/shared/contexts/ParticipantsProvider';
@@ -98,7 +99,7 @@ export default function Index({ domain, isConfigured = false }) {
           <TracksProvider>
             <MediaDeviceProvider>
               <WaitingRoomProvider>
-                <App />
+                <App asides={Index.asides} />
               </WaitingRoomProvider>
             </MediaDeviceProvider>
           </TracksProvider>
@@ -113,6 +114,8 @@ Index.propTypes = {
   domain: PropTypes.string,
 };
 
+Index.asides = [PeopleAside];
+
 export async function getStaticProps() {
   // Check that both domain and key env vars are set
   const isConfigured =

dailyjs/basic-call/public/public

@@ -0,0 +1 @@
+../basic-call/public

dailyjs/text-chat/public

@@ -0,0 +1 @@
+../basic-call/public