149 lines
3.7 KiB
TypeScript
149 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { type BlogPost, imageSrc, imageDescription } from "@/data/content";
|
|
import "../styles/blog.css";
|
|
|
|
type Props = {
|
|
post: BlogPost;
|
|
visible: boolean;
|
|
};
|
|
|
|
/** One blog post: the card in the blog list. Unlike ProjectCard, clicking
|
|
* navigates to the post instead of expanding in place. */
|
|
export default function BlogPostCard({ post, visible }: Props) {
|
|
const [hovered, setHovered] = useState(false);
|
|
|
|
function postTagsComponent() {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
gap: 8,
|
|
flexWrap: "wrap",
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
{post.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
style={{
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 11,
|
|
fontWeight: 500,
|
|
color: "var(--accent)",
|
|
padding: "3px 10px",
|
|
background: "var(--accent-bg)",
|
|
borderRadius: 4,
|
|
letterSpacing: "0.02em",
|
|
}}
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function coverImageComponent() {
|
|
const image = post.images![0];
|
|
return (
|
|
<img
|
|
src={`/${imageSrc(image)}`}
|
|
alt={imageDescription(image) ?? `${post.title} cover image`}
|
|
width={800}
|
|
height={180}
|
|
style={{
|
|
width: "100%",
|
|
borderRadius: 4,
|
|
marginBottom: 16,
|
|
objectFit: "cover",
|
|
height: 180,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={`/blog/${post.slug}`}
|
|
className="blog-post-card"
|
|
title={`Read: ${post.title}`}
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
style={{
|
|
display: "block",
|
|
width: "100%",
|
|
textDecoration: "none",
|
|
padding: 28,
|
|
overflow: "hidden",
|
|
background: hovered ? "var(--surface-hover)" : "var(--surface)",
|
|
border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
|
|
borderRadius: 8,
|
|
transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
|
|
transform: visible
|
|
? hovered
|
|
? "translateY(-3px)"
|
|
: "translateY(0)"
|
|
: "translateY(12px)",
|
|
opacity: visible ? 1 : 0,
|
|
boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
|
|
pointerEvents: "auto",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
gap: 12,
|
|
marginBottom: 12,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 18,
|
|
fontWeight: 700,
|
|
color: hovered ? "var(--accent)" : "var(--fg)",
|
|
transition: "color 0.2s",
|
|
minWidth: 0,
|
|
}}
|
|
>
|
|
{post.title}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontFamily: "var(--mono)",
|
|
fontSize: 11,
|
|
color: "var(--muted)",
|
|
padding: "2px 8px",
|
|
background: "var(--bg)",
|
|
borderRadius: 4,
|
|
border: "1px solid var(--border)",
|
|
whiteSpace: "nowrap",
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{post.date}
|
|
</div>
|
|
</div>
|
|
{postTagsComponent()}
|
|
<p
|
|
style={{
|
|
fontFamily: "var(--sans)",
|
|
fontSize: 14,
|
|
lineHeight: 1.6,
|
|
color: "var(--fg-secondary)",
|
|
margin: "0 0 16px 0",
|
|
}}
|
|
>
|
|
{post.description}
|
|
</p>
|
|
{post.images && post.images.length > 0 && coverImageComponent()}
|
|
</Link>
|
|
);
|
|
}
|