102 lines
3.4 KiB
TypeScript
102 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* PostCard — renders one post in the public feed and the /u/me feed.
|
|
*
|
|
* • Caption in serif (locked, can't be edited)
|
|
* • Image grid (max 5; collapses to one column on the cheap)
|
|
* • "Source" link back to the page the quote came from
|
|
* • Optional onDelete callback shown only when the owner is viewing
|
|
*
|
|
* The source link always lands the user on the original passage with `?hl=`
|
|
* highlighting. If the stored source_url already carries `?hl=` we use it
|
|
* verbatim; otherwise we synthesise one from the post's caption so older
|
|
* posts (or imported data) still scroll to + highlight the text on click.
|
|
*/
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { Trash2, ExternalLink } from "lucide-react";
|
|
import type { Post } from "@/lib/social";
|
|
import { displaySourceLabel } from "@/lib/source-reference";
|
|
import { appendHighlight, hasHighlight } from "@/lib/text-highlight";
|
|
import { PostActionsFooter } from "./post-actions-footer";
|
|
|
|
export function PostCard({
|
|
post,
|
|
onDelete,
|
|
}: {
|
|
post: Post;
|
|
onDelete?: (id: string) => void;
|
|
}) {
|
|
const sourceHref =
|
|
hasHighlight(post.source_url) || !post.caption
|
|
? post.source_url
|
|
: appendHighlight(post.source_url, post.caption);
|
|
|
|
return (
|
|
<article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5">
|
|
<p className="font-[family-name:var(--font-title)] text-lg text-foreground leading-relaxed">
|
|
“{post.caption}”
|
|
</p>
|
|
|
|
{post.images && post.images.length > 0 ? (
|
|
<div
|
|
className={`mt-4 grid gap-2 ${
|
|
post.images.length === 1
|
|
? "grid-cols-1"
|
|
: post.images.length === 2
|
|
? "grid-cols-2"
|
|
: "grid-cols-3"
|
|
}`}
|
|
>
|
|
{post.images.map((img) => (
|
|
<div
|
|
key={img.id}
|
|
className="relative aspect-square rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10"
|
|
>
|
|
<Image
|
|
src={img.url}
|
|
alt=""
|
|
fill
|
|
sizes="(max-width: 640px) 30vw, 200px"
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
|
|
<Link
|
|
href={sourceHref}
|
|
className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
|
|
>
|
|
<ExternalLink className="size-3" />
|
|
{displaySourceLabel(post.source_url, post.source_title)}
|
|
</Link>
|
|
<div className="flex items-center gap-3">
|
|
<span>{new Date(post.created_at).toLocaleDateString()}</span>
|
|
{onDelete ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => onDelete(post.id)}
|
|
className="inline-flex items-center gap-1 text-muted-foreground hover:text-destructive transition-colors"
|
|
aria-label="Delete post"
|
|
>
|
|
<Trash2 className="size-3.5" />
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action footer — like / comment / reshare on the left, add to
|
|
collection on the right. */}
|
|
<div className="mt-3 pt-2 border-t border-border">
|
|
<PostActionsFooter post={post} />
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|