playerbar

components/playerBar.tsx

@@ -1,7 +1,17 @@
-import { Box, Flex } from '@chakra-ui/layout'
+import { Box, Flex, Text } from '@chakra-ui/layout'
 
 const PlayerBar = () => {
-  return <Box>hello</Box>
+  return (
+    <Box height="100px" width="100vw" bg="gray.900" padding="10px">
+      <Flex align="center">
+        <Box padding="20px" color="white" width="30%">
+          <Text fontSize="large">Song Name</Text>
+          <Text fontSize="sm">Artist Name</Text>
+        </Box>
+        <Box width="40%">controls</Box>
+      </Flex>
+    </Box>
+  )
 }
 
 export default PlayerBar

components/playerLayout.tsx

@@ -1,5 +1,6 @@
 import { Box } from '@chakra-ui/layout'
 import Sidebar from './sidebar'
+import PlayerBar from './playerBar'
 
 const PlayerLayout = ({ children }) => {
   return (
@@ -11,7 +12,7 @@ const PlayerLayout = ({ children }) => {
         <Box height="calc(100vh - 100px)">{children}</Box>
       </Box>
       <Box position="absolute" left="0" bottom="0">
-        player
+        <PlayerBar />
       </Box>
     </Box>
   )

lib/store.ts

@@ -0,0 +1,12 @@
+import { createStore, action } from 'easy-peasy'
+
+export const store = createStore({
+  activeSongs: [],
+  activeSong: null,
+  changeActiveSongs: action((state: any, payload) => {
+    state.activeSongs = payload
+  }),
+  changeActiveSong: action((state: any, payload) => {
+    state.activeSong = payload
+  }),
+})

pages/_app.tsx

@@ -1,6 +1,8 @@
 import { ChakraProvider, extendTheme } from '@chakra-ui/react'
+import { StoreProvider } from 'easy-peasy'
 import PlayerLayout from '../components/playerLayout'
 import 'reset-css'
+import { store } from '../lib/store'
 
 const theme = extendTheme({
   colors: {
@@ -33,13 +35,15 @@ const theme = extendTheme({
 const MyApp = ({ Component, pageProps }) => {
   return (
     <ChakraProvider theme={theme}>
-      {Component.authPage ? (
-        <Component {...pageProps} />
-      ) : (
-        <PlayerLayout>
+      <StoreProvider store={store}>
+        {Component.authPage ? (
           <Component {...pageProps} />
-        </PlayerLayout>
-      )}
+        ) : (
+          <PlayerLayout>
+            <Component {...pageProps} />
+          </PlayerLayout>
+        )}
+      </StoreProvider>
     </ChakraProvider>
   )
 }