style post cards

next.config.mjs

@@ -1,4 +1,16 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'placehold.co',
+        port: '',
+        pathname: '**',
+      },
+    ],
+    dangerouslyAllowSVG: true,
+  },
+}
 
 export default nextConfig

src/app/blog/page.tsx

@@ -1,21 +1,18 @@
 import { getPostsMeta } from '@/lib/posts'
-import { siteConfig } from '@/config/site'
-import Link from 'next/link'
-function PostCard({ meta }) {
-  let { slug, title } = meta
-  return (
-    <div>
-      <Link href={`/blog/${slug}`}>{title}</Link>
-    </div>
-  )
-}
-
+import PostCard from '@/components/post-card'
 export default async function PostsList() {
   let postsMeta = await getPostsMeta()
   return (
-    <div>
+    <div className="flex flex-row flex-wrap justify-center gap-8 p-2 md:p-16">
       {postsMeta.map((meta, id) => (
-        <PostCard key={id} meta={meta} />
+        <>
+          <PostCard key={id} meta={meta} />
+          <PostCard key={id} meta={meta} />
+          <PostCard key={id} meta={meta} />
+          <PostCard key={id} meta={meta} />
+          <PostCard key={id} meta={meta} />
+          <PostCard key={id} meta={meta} />
+        </>
       ))}
     </div>
   )

src/components/post-card.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import { Card, CardHeader, CardContent, CardTitle } from './ui/card'
+import Image from 'next/image'
+import { cn } from '@/lib/utils'
+
+export default function PostCard({ meta }) {
+  let { author, slug, title, description, hero_image } = meta
+  return (
+    <>
+      <Link href={`/blog/${slug}`}>
+        <div className="flex w-[300px] flex-col gap-6 md:w-[400px] ">
+          <div className="relative aspect-[4/3]">
+            <Image
+              src={hero_image}
+              fill
+              alt={`${title} hero image`}
+              className="rounded-lg object-cover shadow-md"
+            />
+          </div>
+          <div className="gap-2">
+            <div className="text-xl font-semibold">{title}</div>
+            <div className="text-l font-light text-muted-foreground">
+              {
+                'Warning: Each child in a list should have a unique "key" prop.Warning: Each child in a list should have a unique "key" prop.Warning: Each child in a list should have a unique "key" prop'
+              }
+            </div>
+            <div className="flex flex-row justify-between text-sm">{`by ${author}`}</div>
+          </div>
+        </div>
+      </Link>
+    </>
+  )
+}

src/components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }