Almost complete

src/components/ExpandableStory.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { useState } from 'react';
+import { Story } from '@/data/creative';
+import { formatReadingTime } from '@/utils/readingTime';
+
+interface ExpandableStoryProps {
+  story: Story;
+}
+
+export default function ExpandableStory({ story }: ExpandableStoryProps) {
+  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">
+            {story.title}
+          </h2>
+          <div className="text-black font-bold text-lg bg-yellow-200 border-2 border-black px-3 py-1 whitespace-nowrap">
+            {isExpanded ? '▼' : '▶'}
+          </div>
+        </div>
+        
+        <p className="text-gray-600 italic mb-4">{story.excerpt}</p>
+        
+        <div className="flex gap-4 text-sm">
+          <span className="bg-yellow-200 text-black px-3 py-1 border-2 border-black font-bold">
+            {formatReadingTime(story.readTime)} read
+          </span>
+          <span className="bg-gray-200 text-black px-3 py-1 border-2 border-black font-bold">
+            {new Date(story.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">
+              {story.content}
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}