update content

src/components/ExpandableThought.tsx

@@ -1,17 +1,18 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { Thought } from '@/data/creative';
-import { formatReadingTime } from '@/utils/readingTime';
+import { useState } from "react";
+import { Thought } from "@/data/creative";
+import { formatReadingTime } from "@/utils/readingTime";
+import Markdown from "react-markdown";
 
 interface ExpandableThoughtProps {
   thought: Thought;
 }
 
 const categoryColors = {
-  technology: 'bg-blue-200',
-  life: 'bg-green-200',
-  creativity: 'bg-purple-200'
+  technology: "bg-blue-200",
+  life: "bg-green-200",
+  creativity: "bg-purple-200",
 };
 
 export default function ExpandableThought({ thought }: ExpandableThoughtProps) {
@@ -19,7 +20,7 @@ export default function ExpandableThought({ thought }: ExpandableThoughtProps) {
 
   return (
     <article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
-      <div 
+      <div
         className="cursor-pointer"
         onClick={() => setIsExpanded(!isExpanded)}
       >
@@ -28,42 +29,44 @@ export default function ExpandableThought({ thought }: ExpandableThoughtProps) {
             {thought.title}
           </h2>
           <div className="text-black font-bold text-lg bg-teal-200 border-2 border-black px-3 py-1 whitespace-nowrap">
-            {isExpanded ? '▼' : '▶'}
+            {isExpanded ? "▼" : "▶"}
           </div>
         </div>
-        
+
         <p className="text-gray-600 italic mb-4">{thought.excerpt}</p>
-        
+
         <div className="flex gap-4 text-sm">
-          <span className={`${categoryColors[thought.category]} text-black px-3 py-1 border-2 border-black font-bold`}>
+          <span
+            className={`${categoryColors[thought.category]} text-black px-3 py-1 border-2 border-black font-bold`}
+          >
             {thought.category}
           </span>
           <span className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold">
             {formatReadingTime(thought.readTime)} read
           </span>
           <span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
-            {new Date(thought.createdAt).toLocaleDateString('en-US', { 
-              year: 'numeric', 
-              month: 'long', 
-              day: 'numeric' 
+            {new Date(thought.createdAt).toLocaleDateString("en-GB", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
             })}
           </span>
         </div>
       </div>
 
-      <div 
+      <div
         className={`overflow-hidden transition-all duration-500 ease-in-out ${
-          isExpanded ? 'max-h-[2000px] opacity-100 mt-6' : 'max-h-0 opacity-0'
+          isExpanded ? "max-h-[2000px] opacity-100 mt-6" : "max-h-0 opacity-0"
         }`}
       >
         <div className="border-t-2 border-black pt-6">
           <div className="prose prose-lg max-w-none">
             <div className="text-gray-800 leading-relaxed whitespace-pre-line">
-              {thought.content}
+              <Markdown>{thought.content}</Markdown>
             </div>
           </div>
         </div>
       </div>
     </article>
   );
-}
+}