Simple blog post

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

@@ -8,9 +8,10 @@ import { useParams } from "next/navigation";
 import { PostPreview } from "@/lib/posts";
 
 export default function BlogPost() {
-  const [post, setPost] = useState<(PostPreview & { content: string }) | null>(
-    null
-  );
+  const [post, setPost] = useState<{
+    content: string;
+    meta: PostPreview;
+  } | null>(null);
   const [mounted, setMounted] = useState(false);
   const { slug } = useParams();
 
@@ -50,7 +51,7 @@ export default function BlogPost() {
 
   return (
     <WebStuff>
-      Hero Section
+      {/* Hero Section */}
       <motion.section
         className="relative z-10 px-6 py-16 lg:py-24 max-w-4xl mx-auto"
         variants={containerVariants}
@@ -60,7 +61,7 @@ export default function BlogPost() {
         <motion.div variants={itemVariants} className="mb-4">
           <span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
             <Sparkles className="w-4 h-4" />
-            {post.category}
+            {post.meta.category}
           </span>
         </motion.div>
 
@@ -69,7 +70,7 @@ export default function BlogPost() {
           className="text-5xl lg:text-6xl font-bold mb-6"
         >
           <span className="bg-linear-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
-            {post.title}
+            {post.meta.title}
           </span>
         </motion.h1>
 
@@ -77,16 +78,16 @@ export default function BlogPost() {
           variants={itemVariants}
           className="flex flex-wrap items-center gap-4 text-sm text-slate-400 mb-8"
         >
-          <span>{post.author}</span>
+          <span>{post.meta.author}</span>
           <span>•</span>
-          <span>{new Date(post.date).toLocaleDateString()}</span>
-          {post.readingTime && (
+          <span>{new Date(post.meta.date).toLocaleDateString()}</span>
+          {post.meta.readingTime && (
             <>
               <span>•</span>
-              <span>{post.readingTime} min read</span>
+              <span>{post.meta.readingTime} min read</span>
             </>
           )}
-          {post.tags?.map((tag, idx) => (
+          {post.meta.tags?.map((tag, idx) => (
             <span
               key={idx}
               className="px-2 py-1 bg-slate-800/50 border border-slate-700 rounded-full"
@@ -97,15 +98,15 @@ export default function BlogPost() {
         </motion.div>
 
         {/* Optional Featured Image */}
-        {post.image && (
+        {post.meta.image && (
           <motion.div
             variants={itemVariants}
             className="mb-8 overflow-hidden rounded-xl"
           >
             <img
-              src={post.image}
-              alt={post.title}
-              className="w-full object-cover"
+              src={post.meta.image}
+              alt={post.meta.title}
+              className="w-full h-96 object-cover"
             />
           </motion.div>
         )}