80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
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",
|
|
};
|
|
|
|
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">
|
|
<Link
|
|
href={`/thoughts/${thought.id}`}
|
|
className="bg-teal-200 text-black px-3 py-1 border-2 border-black font-bold hover:bg-teal-300 transition-colors"
|
|
>
|
|
Read Full Thought
|
|
</Link>
|
|
<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-GB", {
|
|
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">
|
|
<Markdown>{thought.content}</Markdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|