feat(ux): fix header on top

mateusfg7 · Oct 3, 2022 · 83f2551 · 83f2551
1 parent 04f5714
commit 83f2551
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -8,7 +8,12 @@ import { Footer } from '../components/Footer'
 import soundList from '../sounds.json'
 import { useBackgroundStore } from '../stores/BackgroundStore'
 
-import { Container, SoundContainer, SoundGrid } from '../styles/pages/index'
+import {
+  Container,
+  Main,
+  SoundContainer,
+  SoundGrid
+} from '../styles/pages/index'
 
 const Home: React.FC = () => {
   const background = useBackgroundStore(set => set.background)
@@ -20,19 +25,21 @@ const Home: React.FC = () => {
       </Head>
 
       <Header />
-      <SoundContainer>
-        <SoundGrid>
-          {soundList.map(sound => (
-            <Sound
-              key={sound.name}
-              name={sound.name}
-              iconFile={sound.iconFile}
-              audioFile={sound.audioFile}
-            />
-          ))}
-        </SoundGrid>
-      </SoundContainer>
-      <Footer />
+      <Main>
+        <SoundContainer>
+          <SoundGrid>
+            {soundList.map(sound => (
+              <Sound
+                key={sound.name}
+                name={sound.name}
+                iconFile={sound.iconFile}
+                audioFile={sound.audioFile}
+              />
+            ))}
+          </SoundGrid>
+        </SoundContainer>
+        <Footer />
+      </Main>
     </Container>
   )
 }

diff --git a/src/styles/pages/index.ts b/src/styles/pages/index.ts
@@ -20,6 +20,12 @@ export const Container = tw.div<ContainerProps>`
 
   ${p => backgroundClasses[p.$background]}
 `
+
+// export const Main = tw.div``
+export const Main = tw.div`
+  h-[85vh] overflow-scroll
+`
+
 export const SoundContainer = tw.div`
   flex justify-center items-center
   min-h-[85vh]