feat: implement post container component

src/components/Post/PostsDemo.tsx

@@ -1,4 +1,5 @@
-import Post, { PostProps } from './Post'
+import { PostContainer } from '../PostContainer'
+import { PostProps } from './Post'
 
 const postsData: PostProps[] = [
   {
@@ -18,7 +19,7 @@ const postsData: PostProps[] = [
     tags: ['Privacy', 'Security', 'Liberty'],
   },
   {
-    aspectRatio: 'portrait', // different aspect ratio
+    aspectRatio: 'portrait', // different aspect ratio - portrait
     imageUrl:
       'https://images.pexels.com/photos/4992820/pexels-photo-4992820.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
     date: new Date(),
@@ -56,31 +57,67 @@ const postsData: PostProps[] = [
     description:
       'We built a pedal-powered generator and controller, which is practical to use as an energy source and exercise machine in a household -- and which you can integrate into a solar PV',
   },
+  {
+    showImage: false, // without image
+    classType: 'article',
+    date: new Date(),
+    title: 'Satoshi breaks their silence: Inside the mind of the OG anon',
+    description:
+      "Bitcoin's creator reveals their feelings on privacy, CBDCs and their favorite NFT collection in an unprecedented interview with Acid.info",
+    author: 'Jason Freeman',
+    tags: ['Privacy', 'Security', 'Liberty'],
+  },
+  {
+    aspectRatio: 'square', // square
+    imageUrl:
+      'https://images.pexels.com/photos/6477673/pexels-photo-6477673.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+    date: new Date(),
+    title: 'How to Build a Practical Household Bike Generator',
+    description:
+      'We built a pedal-powered generator and controller, which is practical to use as an energy source and exercise machine in a household -- and which you can integrate into a solar PV',
+    author: 'Jason Freeman',
+    tags: ['Privacy', 'Security', 'Liberty'],
+  },
+  {
+    // featured
+    imageUrl:
+      'https://images.pexels.com/photos/6227715/pexels-photo-6227715.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
+    date: new Date(),
+    title: 'How to Build a Practical Household Bike Generator',
+    description:
+      'We built a pedal-powered generator and controller, which is practical to use as an energy source and exercise machine in a household -- and which you can integrate into a solar PV',
+    author: 'Jason Freeman',
+    tags: ['Privacy', 'Security', 'Liberty'],
+  },
 ]
 
 const PostsDemo = () => {
   return (
     <div style={{ marginTop: '78px' }}>
       {/* For Demo purposes only. Use inline CSS and styled components temporarily */}
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          padding: '16px',
-          gap: '24px',
-        }}
-      >
-        {postsData.map((post, index) => (
-          <div
-            style={{
-              padding: '16px 0',
-              borderTop: '1px solid rgb(var(--lsd-theme-primary))',
-            }}
-          >
-            <Post key={index} {...post} />
-          </div>
-        ))}
-      </div>
+      <PostContainer title="Featured" postsData={[postsData[7]]} />
+      <PostContainer
+        style={{ marginTop: '108px' }}
+        title="Latest Posts"
+        postsData={[postsData[3], postsData[0], postsData[3], postsData[2]]}
+      />
+      <PostContainer
+        style={{ marginTop: '16px' }}
+        postsData={[postsData[3], postsData[5]]}
+      />
+      <PostContainer
+        style={{ marginTop: '16px' }}
+        postsData={[postsData[1], postsData[5], postsData[5], postsData[6]]}
+      />
+      <PostContainer
+        style={{ marginTop: '108px' }}
+        title="Podcasts"
+        postsData={[postsData[2], postsData[2]]}
+      />
+      <PostContainer
+        style={{ marginTop: '16px', paddingBottom: '108px' }}
+        postsData={[postsData[2], postsData[2], postsData[2], postsData[2]]}
+      />
     </div>
   )
 }

src/components/Post/index.ts

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

src/components/PostContainer/PostContainer.tsx

@@ -0,0 +1,51 @@
+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'
+
+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) => (
+          <PostWrapper key={index}>
+            <Post {...post} />
+          </PostWrapper>
+        ))}
+      </Container>
+    </div>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 16px;
+  gap: 24px;
+
+  @media (max-width: 768px) {
+    // temporariy breakpoint
+    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;
+`

src/components/PostContainer/index.ts

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