From 01e7396334a9c94ffed8f832436ca245ec38ba01 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 28 Aug 2023 19:23:13 +0330
Subject: [PATCH] fix: fix episode page layout spacing

---
 src/components/Grid/Grid.tsx        | 85 +++++++++++++++++++----------
 src/containers/EpisodeContainer.tsx | 15 ++---
 2 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
index e8c65e6..06646cb 100644
--- a/src/components/Grid/Grid.tsx
+++ b/src/components/Grid/Grid.tsx
@@ -1,47 +1,60 @@
-import { Breakpoints } from '@acid-info/lsd-react'
+import { THEME_BREAKPOINTS } from '@acid-info/lsd-react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { lsdUtils } from '../../utils/lsd.utils'
 
-export const Grid = styled.div<{
+export type GridOptions = {
   cols?: number
+}
 
-  breakpoints?: {
-    xs?: {
-      cols?: number
-    }
-    sm?: {
-      cols?: number
-    }
-    md?: {
-      cols?: number
-    }
-    lg?: {
-      cols?: number
-    }
-    xl?: {
-      cols?: number
-    }
+export type GridProps = React.HTMLProps<HTMLDivElement> &
+  GridOptions & {
+    xs?: GridOptions
+    sm?: GridOptions
+    md?: GridOptions
+    lg?: GridOptions
+    xl?: GridOptions
   }
-}>`
+
+export const Grid = styled.div<GridProps>`
   display: grid;
   grid-template-columns: repeat(${(props) => props.cols || 16}, 1fr);
   gap: 16px;
 
   ${(props) =>
-    Object.entries(props.breakpoints || {}).map(([key, bp]) =>
-      lsdUtils.responsive(
+    THEME_BREAKPOINTS.map((key) => {
+      if (!props[key]) return null
+
+      const bp = props[key] as GridItemOptions
+
+      return lsdUtils.responsive(
         props.theme,
-        key as Breakpoints,
-        'exact',
+        key,
+        'up',
       )(css`
-        ${bp.cols && `grid-template-columns: repeat(${bp.cols}, 1fr)`}
-      `),
-    )}
+        ${bp.cols &&
+        css`
+          grid-template-columns: repeat(${bp.cols}, 1fr);
+        `}
+      `)
+    })}
 `
 
-export const GridItem = styled.div`
-  grid-column: span 4;
+export type GridItemOptions = {
+  cols?: number
+}
+
+export type GridItemProps = React.HTMLProps<HTMLDivElement> &
+  GridItemOptions & {
+    xs?: GridItemOptions
+    sm?: GridItemOptions
+    md?: GridItemOptions
+    lg?: GridItemOptions
+    xl?: GridItemOptions
+  }
+
+export const GridItem = styled.div<GridItemProps>`
+  grid-column: span ${(props) => props.cols || 4};
 
   &.w-1 {
     grid-column: span 1;
@@ -74,4 +87,20 @@ export const GridItem = styled.div`
   @media (max-width: 768px) {
     grid-column: span 16 !important;
   }
+
+  ${(props) =>
+    THEME_BREAKPOINTS.map((key) => {
+      if (!props[key]) return null
+
+      const bp = props[key] as GridItemOptions
+
+      return lsdUtils.responsive(
+        props.theme,
+        key,
+        'up',
+      )(css`
+        ${bp.cols === 0 ? `display: none;` : `display: initial;`}
+        ${bp.cols && `grid-column: span ${bp.cols};`}
+      `)
+    })}
 `
diff --git a/src/containers/EpisodeContainer.tsx b/src/containers/EpisodeContainer.tsx
index 30d55e0..637f2e0 100644
--- a/src/containers/EpisodeContainer.tsx
+++ b/src/containers/EpisodeContainer.tsx
@@ -11,13 +11,17 @@ interface Props {
 const EpisodeContainer = (props: Props) => {
   const { episode, relatedEpisodes } = props
 
+  const emptyGridItem = (
+    <GridItem xs={{ cols: 0 }} sm={{ cols: 2 }} lg={{ cols: 4 }} />
+  )
+
   return (
-    <EpisodeGrid>
-      <GridItem className={'w-4'} />
-      <EpisodeBodyContainer className={'w-8'}>
+    <EpisodeGrid cols={16} xs={{ cols: 1 }} sm={{ cols: 12 }} lg={{ cols: 16 }}>
+      {emptyGridItem}
+      <EpisodeBodyContainer cols={8} xs={{ cols: 1 }} sm={{ cols: 8 }}>
         <EpisodeBody episode={episode} relatedEpisodes={relatedEpisodes} />
       </EpisodeBodyContainer>
-      <GridItem className={'w-4'} />
+      {emptyGridItem}
     </EpisodeGrid>
   )
 }
@@ -26,9 +30,6 @@ const EpisodeBodyContainer = styled(GridItem)``
 
 const EpisodeGrid = styled(Grid)`
   width: 100%;
-  @media (max-width: 768px) {
-    margin-top: 32px;
-  }
 `
 
 export default EpisodeContainer