Almost complete

src/components/ExpandableThought.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useState } from 'react';
+import { Thought } from '@/data/creative';
+import { formatReadingTime } from '@/utils/readingTime';
+
+interface ExpandableThoughtProps {
+  thought: Thought;
+}
+
+const categoryColors = {
+  technology: 'bg-blue-200',
+  life: 'bg-green-200',
+  creativity: 'bg-purple-200'
+};
+
+export default function ExpandableThought({ thought }: ExpandableThoughtProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  return (
+    <article className="bg-white border-4 border-black rounded-none p-8 shadow-brutal">
+      <div 
+        className="cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div className="flex justify-between items-start mb-4">
+          <h2 className="text-2xl font-bold text-gray-900 uppercase flex-1 pr-4">
+            {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 ? '▼' : '▶'}
+          </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`}>
+            {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' 
+            })}
+          </span>
+        </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'
+        }`}
+      >
+        <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}
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}