From 53d6422006c61ff021f1060223dedab13f7bbbd4 Mon Sep 17 00:00:00 2001
From: amirhouieh <amir@status.im>
Date: Sun, 14 May 2023 11:57:00 +0200
Subject: [PATCH] close #46

---
 src/components/Article/Footer/Article.Footer.tsx |  1 -
 src/components/Post/Post.tsx                     |  3 ++-
 src/components/PostList/PostList.tsx             | 15 ++++++++++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Article/Footer/Article.Footer.tsx b/src/components/Article/Footer/Article.Footer.tsx
index 0faa0f4..ae6eda9 100644
--- a/src/components/Article/Footer/Article.Footer.tsx
+++ b/src/components/Article/Footer/Article.Footer.tsx
@@ -31,7 +31,6 @@ const ArticleFooter = ({ data }: { data: ArticlePostData }) => {
 
 const ArticleFooterContainer = styled.div`
   margin-top: 16px;
-
   & > div:not(:first-child) > div > button {
     border-top: none;
   }
diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx
index c1af814..88965f0 100644
--- a/src/components/Post/Post.tsx
+++ b/src/components/Post/Post.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { Typography } from '@acid-info/lsd-react'
 import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
 import styled from '@emotion/styled'
@@ -124,7 +125,7 @@ export default function Post({
 
   const _thumbnail = useMemo(() => {
     if (!showImage || !coverImage) return null
-    if (postType === 'body') {
+    if (postType === PostType.BODY) {
       return <ResponsiveImage {...imageProps} data={coverImage} />
     } else {
       // TBD
diff --git a/src/components/PostList/PostList.tsx b/src/components/PostList/PostList.tsx
index d3cda6c..0d0befa 100644
--- a/src/components/PostList/PostList.tsx
+++ b/src/components/PostList/PostList.tsx
@@ -5,9 +5,15 @@ import styled from '@emotion/styled'
 import Post, { PostDataProps } from '../Post/Post'
 import { Button, Typography } from '@acid-info/lsd-react'
 
+enum Layout {
+  XXXX = 'xxxx',
+  XXXX_XX = 'xxxx_xx',
+}
+
 type Props = {
   posts: PostDataProps[]
   pageSize?: number
+  layout?: Layout
 }
 
 const getGridItemWidth = (index: number) => {
@@ -45,7 +51,14 @@ export const PostsList = (props: Props) => {
       <Grid style={{ minHeight: '500px' }}>
         {postsToShow.length > 0 ? (
           postsToShow.map((post, index) => (
-            <GridItem className="w-4" key={index}>
+            <GridItem
+              className={
+                props.layout === Layout.XXXX_XX
+                  ? getGridItemWidth(index)
+                  : 'w-4'
+              }
+              key={index}
+            >
               <PostLink href={`/article/${post.slug}`}>
                 <PostWrapper>
                   <Post data={post} />