60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
'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>
|
|
);
|
|
} |