feat(Posts): add other blog posts section to post page

src/app/page.tsx

@@ -7,21 +7,7 @@ import { currentExperience } from '~/content/experiences'
 import { getLastFivePosts } from '~/content/posts'
 import { Image } from '~/components/image'
 import { CommandBarTriggerFull } from '~/components/command-bar'
-
-type SectionProps = {
-  id: string
-  title: string
-  children: React.ReactNode
-}
-
-function Section({ id, title, children }: SectionProps) {
-  return (
-    <div className='flex flex-col space-y-6 sm:space-y-8' id={id}>
-      <h1 className='font-bold text-2xl sm:text-3xl'>{title}</h1>
-      {children}
-    </div>
-  )
-}
+import { Section } from '~/components/section'
 
 export default function HomePage() {
   return (

src/app/posts/[slug]/page.tsx

@@ -1,7 +1,10 @@
 import { Metadata, ResolvingMetadata } from 'next'
 import { Image } from '~/components/image'
 import { MDXContent } from '~/components/mdx-content'
-import { getPostBySlug, posts } from '~/content/posts'
+import { PostCard } from '~/components/post-card'
+import { Section } from '~/components/section'
+import { Slider } from '~/components/slider'
+import { getPostBySlug, getRandomPosts, posts } from '~/content/posts'
 
 type PostPageProps = {
   params: {
@@ -65,6 +68,22 @@ export default function PostPage({ params }: PostPageProps) {
         />
       </div>
       <MDXContent code={post.body.code} />
+      <Section title='Other Blog Posts' id='blog'>
+        <Slider.Root>
+          {getRandomPosts({ count: 3, excludeSlug: post.slug }).map(
+            ({ title, url, image, description }) => (
+              <Slider.Item key={title}>
+                <PostCard
+                  url={url}
+                  image={image}
+                  title={title}
+                  description={description}
+                />
+              </Slider.Item>
+            )
+          )}
+        </Slider.Root>
+      </Section>
     </>
   )
 }

src/components/section/index.ts

@@ -0,0 +1 @@
+export { Section } from './section.component'

src/components/section/section.component.tsx

@@ -0,0 +1,10 @@
+import { SectionProps } from './section.typs'
+
+export function Section({ id, title, children }: SectionProps) {
+  return (
+    <div className='flex flex-col space-y-6 sm:space-y-8' id={id}>
+      <h1 className='font-bold text-2xl sm:text-3xl'>{title}</h1>
+      {children}
+    </div>
+  )
+}

src/components/section/section.typs.ts

@@ -0,0 +1,5 @@
+export type SectionProps = {
+  id: string
+  title: string
+  children: React.ReactNode
+}

src/content/posts.ts

@@ -11,3 +11,14 @@ export function getLastFivePosts(): Post[] {
 export function getPostBySlug(slug: string): Post | undefined {
   return posts.find(post => post.slug === slug)
 }
+
+type GetRandomPostsParams = {
+  excludeSlug: string
+  count: number
+}
+
+export function getRandomPosts({ excludeSlug, count }: GetRandomPostsParams) {
+  const filteredPosts = posts.filter(post => post.slug !== excludeSlug)
+  const randomPosts = filteredPosts.sort(() => 0.5 - Math.random())
+  return randomPosts.slice(0, count)
+}