remove redundant postContainer and add grid component based on figma design

src/components/Grid/Grid.tsx

@@ -0,0 +1,40 @@
+import styled from '@emotion/styled'
+
+export const Grid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(16, 1fr);
+  padding: 16px;
+  gap: 16px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 100%;
+  }
+`
+
+export const GridItem = styled.div`
+  grid-column: span 4;
+
+  &.w-1 {
+    grid-column: span 1;
+  }
+
+  &.w-2 {
+    grid-column: span 2;
+  }
+
+  &.w-3 {
+    grid-column: span 3;
+  }
+
+  &.w-4 {
+    grid-column: span 4;
+  }
+
+  &.w-8 {
+    grid-column: span 8;
+  }
+
+  @media (max-width: 768px) {
+    grid-column: span 16 !important;
+  }
+`

src/components/Post/PostsDemo.tsx

@@ -1,45 +0,0 @@
-import { useState } from 'react'
-import { PostContainer } from '../PostContainer'
-import { PostDataProps, PostProps } from './Post'
-
-type Props = {
-  posts: PostDataProps[]
-  featuredPost: PostDataProps | null
-}
-
-const PostsDemo = (props: Props) => {
-  const [posts, setPosts] = useState<PostDataProps[]>(props.posts)
-
-  return (
-    <div style={{ marginBlock: '78px' }}>
-      {/* For Demo purposes only. Use inline CSS and styled components temporarily */}
-      {/*@TODO @jinho, wht PostContainer should recive an array of postData instead of only One?*/}
-      {props.featuredPost && (
-        <PostContainer
-          title="Featured"
-          postsData={[
-            {
-              data: props.featuredPost,
-            },
-          ]}
-        />
-      )}
-      {posts.length > 0 ? (
-        <PostContainer
-          style={{ marginTop: '108px' }}
-          title="Latest Posts"
-          postsData={posts.map((post) => ({
-            appearance: {},
-            data: post,
-          }))}
-        />
-      ) : (
-        <div style={{ marginTop: '108px', textAlign: 'center' }}>
-          <h3>No Posts found!</h3>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default PostsDemo

src/components/Post/index.ts

@@ -1,3 +1,2 @@
 export { default as Post } from './Post'
-export { default as PostsDemo } from './PostsDemo'
 export type { PostProps } from './Post'

src/components/PostContainer/PostContainer.tsx

@@ -1,62 +0,0 @@
-import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
-import styled from '@emotion/styled'
-import { Post, PostProps } from '../Post'
-import { Typography } from '@acid-info/lsd-react'
-import Link from 'next/link'
-
-export type PostContainerProps = CommonProps &
-  React.HTMLAttributes<HTMLDivElement> & {
-    title?: string
-    postsData: PostProps[]
-  }
-
-export default function PostContainer({
-  title,
-  postsData,
-  ...props
-}: PostContainerProps) {
-  return (
-    <div {...props}>
-      {title && (
-        <Title variant="body1" genericFontFamily="sans-serif">
-          {title}
-        </Title>
-      )}
-      <Container>
-        {postsData.map((post, index) => (
-          <PostLink key={index} href={`/article/${post.data.remoteId}`}>
-            <PostWrapper>
-              <Post {...post} />
-            </PostWrapper>
-          </PostLink>
-        ))}
-      </Container>
-    </div>
-  )
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  padding: 16px;
-  gap: 24px;
-
-  // temporary breakpoint
-  @media (max-width: 768px) {
-    flex-direction: column;
-  }
-`
-
-const PostWrapper = styled.div`
-  padding: 16px 0;
-  border-top: 1px solid rgb(var(--lsd-theme-primary));
-  width: 100%;
-`
-
-const Title = styled(Typography)`
-  padding: 0 16px;
-`
-
-const PostLink = styled(Link)`
-  text-decoration: none;
-`

src/components/PostContainer/index.ts

@@ -1 +0,0 @@
-export { default as PostContainer } from './PostContainer'

src/components/PostList/PostList.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link'
+import { useState } from 'react'
+import { Grid, GridItem } from '../Grid/Grid'
+import styled from '@emotion/styled'
+import Post, { PostDataProps } from '../Post/Post'
+
+type Props = {
+  posts: PostDataProps[]
+}
+
+export const PostsList = (props: Props) => {
+  const [posts, setPosts] = useState<PostDataProps[]>(props.posts)
+
+  //TODO pagination
+
+  return (
+    <Grid>
+      {posts.map((post, index) => (
+        <GridItem className="w-4" key={index}>
+          <PostLink href={`/article/${post.remoteId}`}>
+            <PostWrapper>
+              <Post data={post} />
+            </PostWrapper>
+          </PostLink>
+        </GridItem>
+      ))}
+    </Grid>
+  )
+}
+
+const PostWrapper = styled.div`
+  padding: 16px 0;
+  border-top: 1px solid rgb(var(--lsd-theme-primary));
+  width: 100%;
+`
+
+const PostLink = styled(Link)`
+  text-decoration: none;
+`

src/components/Section/Section.tsx

@@ -0,0 +1,20 @@
+import { Typography } from '@acid-info/lsd-react'
+import styled from '@emotion/styled'
+import { PropsWithChildren } from 'react'
+
+type Props = PropsWithChildren<{
+  title: string
+}>
+
+export const Section = (props: any) => {
+  return (
+    <section>
+      <Title>{props.title}</Title>
+      {props.children}
+    </section>
+  )
+}
+
+const Title = styled(Typography)`
+  padding: 0 16px;
+`

src/pages/index.tsx

@@ -1,7 +1,10 @@
-import { PostDataProps } from '@/components/Post/Post'
-import PostsDemo from '@/components/Post/PostsDemo'
-import { UnbodyGoogleDoc, UnbodyImageBlock } from '@/lib/unbody/unbody.types'
 import api from '@/services/unbody.service'
+
+import Post, { PostDataProps } from '@/components/Post/Post'
+import { PostsList } from '@/components/PostList/PostList'
+import { Section } from '@/components/Section/Section'
+import { UnbodyGoogleDoc, UnbodyImageBlock } from '@/lib/unbody/unbody.types'
+
 import { ESearchStatus } from '@/types/ui.types'
 import { GetStaticProps } from 'next'
 
@@ -14,7 +17,16 @@ type Props = {
 export default function Home({ posts, featured }: Props) {
   return (
     <>
-      <PostsDemo posts={posts} featuredPost={featured} />
+      {/* For Demo purposes only. Use inline CSS and styled components temporarily */}
+      {/*@TODO @jinho, wht PostContainer should recive an array of postData instead of only One?*/}
+      {featured && (
+        <Section title={'Featured'}>
+          <Post data={featured} />
+        </Section>
+      )}
+      <Section title={'Latest posts'}>
+        <PostsList posts={posts} />
+      </Section>
     </>
   )
 }