resolve merge conflicts

src/components/FilterTags/FilterTags.tsx

@@ -1,6 +1,5 @@
 import { Tag } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
-import { useState } from 'react'
 import { nope } from '@/utils/general.utils'
 
 type FilterTagsProps = {

src/components/FilterTags/index.ts

@@ -1 +1 @@
-export { default as FilterTags } from './HeaderTags'
+export { default as FilterTags } from './FilterTags'

src/components/Hero/Hero.tsx

@@ -4,12 +4,17 @@ import styled from '@emotion/styled'
 export default function Hero() {
   return (
     <Container>
-      <Typography genericFontFamily="serif" component="span" variant="h2">
+      <Title genericFontFamily="serif" component="span" variant="h2">
         LOGOS →{' '}
-        <Title genericFontFamily="serif" component="span" variant="h2">
+        <Title
+          style={{ whiteSpace: 'nowrap' }}
+          genericFontFamily="serif"
+          component="span"
+          variant="h2"
+        >
           PRESS ENGINE
         </Title>
-      </Typography>
+      </Title>
       <Description component="div" variant="label2">
         Blog with media written by Logos members
       </Description>
@@ -18,11 +23,22 @@ export default function Hero() {
 }
 
 const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 16px 16px 8px 16px;
+
+  @media (max-width: 768px) {
+    align-items: flex-start;
+  }
 `
 
 const Title = styled(Typography)`
-  white-space: nowrap;
+  // temporary breakpoint
+  @media (min-width: 1440px) {
+    padding-block: 16px;
+    font-size: 90px;
+  }
 `
 
 const Description = styled(Typography)`

src/components/Navbar/Navbar.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled'
-import { LogosIcon } from '../icons/LogosIcon'
 import { IconButton, Typography } from '@acid-info/lsd-react'
-import { MoonIcon } from '../icons/MoonIcon'
-import { SunIcon } from '../icons/SunIcon'
+import { LogosIcon } from '../Icons/LogosIcon'
+import { SunIcon } from '../Icons/SunIcon'
+import { MoonIcon } from '../Icons/MoonIcon'
 
 interface NavbarProps {
   isDark: boolean
@@ -12,7 +12,9 @@ interface NavbarProps {
 export default function Navbar({ isDark, toggle }: NavbarProps) {
   return (
     <Container>
-      <LogosIcon color="primary" />
+      <LogosIconContainer>
+        <LogosIcon color="primary" />
+      </LogosIconContainer>
       <Icons>
         <IconButton size="small" onClick={() => toggle()}>
           {isDark ? <SunIcon color="primary" /> : <MoonIcon color="primary" />}
@@ -38,9 +40,19 @@ const Container = styled.nav`
   z-index: 100;
 `
 
+const LogosIconContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  @media (max-width: 768px) {
+    margin-left: unset;
+  }
+`
+
 const Icons = styled.div`
   display: flex;
   align-items: center;
+  margin-left: auto;
 `
 
 const Selector = styled(IconButton)`

src/components/Post/Post.tsx

@@ -68,7 +68,7 @@ export default function Post({
           {description}
         </CustomTypography>
       ),
-    [classType, description, size],
+    [classType, description],
   )
 
   const _thumbnail = useMemo(() => {

src/components/PostContainer/PostContainer.tsx

@@ -34,8 +34,8 @@ const Container = styled.div`
   padding: 16px;
   gap: 24px;
 
+  // temporariy breakpoint
   @media (max-width: 768px) {
-    // temporariy breakpoint
     flex-direction: column;
   }
 `

src/pages/_app.tsx

@@ -5,14 +5,27 @@ import type { AppProps } from 'next/app'
 import Head from 'next/head'
 import { uiConfigs } from '@/configs/ui.configs'
 import { DefaultLayout } from '@/layouts/DefaultLayout'
+import { ReactNode } from 'react'
+import { NextComponentType, NextPageContext } from 'next'
 
-export default function App({ Component, pageProps }: AppProps) {
+type NextLayoutComponentType<P = {}> = NextComponentType<
+  NextPageContext,
+  any,
+  P
+> & {
+  getLayout?: (page: ReactNode) => ReactNode
+}
+
+type AppLayoutProps<P = {}> = AppProps & {
+  Component: NextLayoutComponentType
+}
+
+export default function App({ Component, pageProps }: AppLayoutProps) {
   const isDark = useIsDarkState().get()
 
-  //TODO: fix this
-  //@ts-ignore
   const getLayout =
-    Component.getLayout || ((page) => <DefaultLayout>{page}</DefaultLayout>)
+    Component.getLayout ||
+    ((page: ReactNode) => <DefaultLayout>{page}</DefaultLayout>)
 
   return (
     <ThemeProvider theme={isDark ? defaultThemes.dark : defaultThemes.light}>

src/pages/article/[:slug].tsx

@@ -1,5 +1,6 @@
 import { NextPage } from 'next'
 import { ArticleLayout } from '@/layouts/ArticleLayout'
+import { ReactNode } from 'react'
 
 type Props = NextPage<{}>
 
@@ -7,7 +8,7 @@ const ArticlePage = (props: Props) => {
   return <article>article</article>
 }
 
-ArticlePage.getLayout = function getLayout(page) {
+ArticlePage.getLayout = function getLayout(page: ReactNode) {
   return <ArticleLayout>{page}</ArticleLayout>
 }
 

src/utils/ui.utils.ts

@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'react'
+import { RefObject, useEffect, useRef, useState } from 'react'
 
-export const useSticky = <T>(dy: number = 0) => {
+export const useSticky = <T extends HTMLElement>(dy: number = 0) => {
   const stickyRef = useRef<T>(null)
   const [sticky, setSticky] = useState(false)
   const [offset, setOffset] = useState(0)
@@ -28,13 +28,18 @@ export const useSticky = <T>(dy: number = 0) => {
   return { stickyRef, sticky, height: sticky ? height : 0 }
 }
 
-export const useOutsideClick = (ref) => {
+export const useOutsideClick = <T extends HTMLDivElement = HTMLDivElement>(
+  ref: RefObject<T>,
+) => {
   const [isOutside, setIsOutside] = useState(false)
+
   useEffect(() => {
-    function handleClickOutside(event) {
-      setIsOutside(ref.current && !ref.current.contains(event.target))
+    function handleClickOutside(event: any) {
+      const isOutside = !!(ref.current && !ref.current.contains(event.target))
+      setIsOutside(isOutside)
     }
     document.addEventListener('mousedown', handleClickOutside)
+
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
@@ -46,7 +51,7 @@ export const useOutsideClick = (ref) => {
 export const useIsScrolling = () => {
   const [isScrolling, setIsScrolling] = useState(false)
   useEffect(() => {
-    let timeout
+    let timeout: NodeJS.Timeout
     function handleScroll() {
       setIsScrolling(true)
       clearTimeout(timeout)