From 2ea1d33ec692598d3e5de17c0881c6b54b4b270d Mon Sep 17 00:00:00 2001
From: "tuan204.dev" <tuan204.dev@gmail.com>
Date: Fri, 23 Jun 2023 20:43:38 +0700
Subject: [PATCH] no msg

---
 src/App.tsx                                | 27 ++++++++++-----------
 src/components/SongItemTag/SongItemTag.tsx |  5 +++-
 src/contexts/MainSizeContext.tsx           | 28 ++++++++++++++++++++++
 src/pages/Home/Home.tsx                    | 11 ++++++---
 4 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 src/contexts/MainSizeContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1afa0c8..93857c9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,16 +11,13 @@ import {
 import styles from './App.module.scss'
 import Split from 'react-split'
 import './resizable.css'
-
+import { useRef } from 'react'
+import useComponentSize from './hooks/useComponentSize'
+import { MainSizeProvider } from './contexts/MainSizeContext'
 
 
 function App() {
 
-  const gutterStyle = {
-    backgroundColor: 'red',
-    width: '8px',
-    cursor: 'col-resize'
-  };
 
   return (
     <div className={styles.app}>
@@ -28,18 +25,20 @@ function App() {
         sizes={[20, 80]}
         cursor="col-resize"
         minSize={280}
-        maxSize={[600,]}
+        // maxSize={[600,]}
         gutterSize={8}
         className={styles.split}
       >
         <Sidebar />
-        <div className={styles.main}>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/search" element={<Search />} />
-            <Route path="/artist" element={<Artist />} />
-          </Routes>
-        </div>
+        <MainSizeProvider>
+          <div className={styles.main}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/search" element={<Search />} />
+              <Route path="/artist" element={<Artist />} />
+            </Routes>
+          </div>
+        </MainSizeProvider>
       </Split>
     </div>
   )
diff --git a/src/components/SongItemTag/SongItemTag.tsx b/src/components/SongItemTag/SongItemTag.tsx
index 02d49c9..693db10 100644
--- a/src/components/SongItemTag/SongItemTag.tsx
+++ b/src/components/SongItemTag/SongItemTag.tsx
@@ -1,6 +1,6 @@
 import useDominantColor from '@/hooks/useDominantColor'
 import classNames from 'classnames/bind'
-import React from 'react'
+import React, {useRef} from 'react'
 import { TbPlayerPlayFilled } from 'react-icons/tb'
 import styles from './SongItemTag.module.scss'
 
@@ -15,6 +15,9 @@ interface SongItemTagProps {
 const SongItemTag: React.FC<SongItemTagProps> = (props) => {
   const { thumbnailUrl, name, setBgColor } = props
   const color = useDominantColor(thumbnailUrl)
+
+  const songTagRef = useRef()
+
   const handleHover = (): void => {
     setBgColor(color)
   }
diff --git a/src/contexts/MainSizeContext.tsx b/src/contexts/MainSizeContext.tsx
new file mode 100644
index 0000000..730aec7
--- /dev/null
+++ b/src/contexts/MainSizeContext.tsx
@@ -0,0 +1,28 @@
+import useComponentSize from "@/hooks/useComponentSize";
+import React, { createContext, useRef } from "react";
+
+interface MainSizeProps {
+  children: React.ReactNode
+}
+
+interface MainSizeContext {
+  width: number
+  height: number
+}
+
+export const MainSizeContext = createContext({} as MainSizeContext)
+
+export const MainSizeProvider: React.FC<MainSizeProps> = ({children}) => {
+
+  const mainRef = useRef<HTMLDivElement>(null)
+
+  const size = useComponentSize(mainRef)
+
+  return (
+    <div ref={mainRef}>
+      <MainSizeContext.Provider value={{...size}}>
+        {children}
+      </MainSizeContext.Provider>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 91732b4..ba68f92 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,9 +1,10 @@
 import Greeting from '@/components/Greeting/Greeting'
 import Navbar from '@/components/Navbar/Navbar'
 import classNames from 'classnames/bind'
-import { useState, useRef } from 'react'
+import { useState, useRef, useContext } from 'react'
 import styles from './Home.module.scss'
 import useComponentSize from '@/hooks/useComponentSize'
+import { MainSizeContext } from '@/contexts/MainSizeContext'
 
 const cx = classNames.bind(styles)
 
@@ -12,9 +13,13 @@ const Home = () => {
   const [bgColor, setBgColor] = useState<string>('#c0b8c1')
   const [navOpacity, setNavOpacity] = useState<number>(0)
 
-  const homeRef = useRef<HTMLDivElement>(null);
+  const {width} = useContext(MainSizeContext)
 
-  const {width} = useComponentSize(homeRef)
+  console.log(width)
+
+  // const homeRef = useRef<HTMLDivElement>(null);
+
+  // const {width} = useComponentSize(homeRef)
 
   
 
