layout redesign
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { deletePost } from '../../lib/api';
|
||||
|
||||
interface Post {
|
||||
slug: string;
|
||||
@@ -12,6 +13,7 @@ interface Post {
|
||||
|
||||
interface Props {
|
||||
posts: Post[];
|
||||
isAdmin?: boolean;
|
||||
}
|
||||
|
||||
function formatSlug(slug: string) {
|
||||
@@ -30,178 +32,154 @@ function formatDate(date: string) {
|
||||
});
|
||||
}
|
||||
|
||||
export default function PostList({ posts }: Props) {
|
||||
const [query, setQuery] = useState('');
|
||||
const [activeTags, setActiveTags] = useState<Set<string>>(new Set());
|
||||
export default function PostList({ posts: initialPosts, isAdmin = false }: Props) {
|
||||
const [posts, setPosts] = useState(initialPosts);
|
||||
const [deleting, setDeleting] = useState<string | null>(null);
|
||||
|
||||
const allTags = useMemo(() => {
|
||||
const set = new Set<string>();
|
||||
for (const p of posts) for (const t of p.tags || []) set.add(t);
|
||||
return Array.from(set).sort((a, b) => a.localeCompare(b));
|
||||
}, [posts]);
|
||||
async function handleDelete(slug: string, title: string) {
|
||||
if (deleting) return;
|
||||
if (!window.confirm(`Delete "${title}"? This cannot be undone.`)) return;
|
||||
setDeleting(slug);
|
||||
try {
|
||||
await deletePost(slug);
|
||||
setPosts(p => p.filter(x => x.slug !== slug));
|
||||
} catch (e) {
|
||||
window.alert(`Failed to delete: ${e instanceof Error ? e.message : 'unknown error'}`);
|
||||
} finally {
|
||||
setDeleting(null);
|
||||
}
|
||||
}
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
return posts.filter(p => {
|
||||
if (activeTags.size > 0) {
|
||||
for (const t of activeTags) if (!p.tags?.includes(t)) return false;
|
||||
}
|
||||
if (!q) return true;
|
||||
const hay = `${p.title || formatSlug(p.slug)} ${p.excerpt || ''}`.toLowerCase();
|
||||
return hay.includes(q);
|
||||
});
|
||||
}, [posts, query, activeTags]);
|
||||
|
||||
function toggleTag(tag: string) {
|
||||
setActiveTags(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(tag)) next.delete(tag);
|
||||
else next.add(tag);
|
||||
return next;
|
||||
});
|
||||
if (posts.length === 0) {
|
||||
return (
|
||||
<div className="glass p-8 md:p-12 text-center text-sm md:text-base text-subtext1">
|
||||
No posts yet.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="glass px-4 py-3 md:px-5 md:py-4 flex flex-col gap-3 md:gap-4">
|
||||
<div className="relative">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-subtext0 pointer-events-none"
|
||||
aria-hidden="true"
|
||||
<div className="flex flex-col space-y-6">
|
||||
{posts.map(post => {
|
||||
const displayTitle = post.title || formatSlug(post.slug);
|
||||
const isDeleting = deleting === post.slug;
|
||||
return (
|
||||
<article
|
||||
key={post.slug}
|
||||
className={`glass p-5 md:p-8 transition-all hover:bg-surface0/80 group relative ${
|
||||
isDeleting ? 'opacity-50 pointer-events-none' : ''
|
||||
}`}
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.3-4.3" />
|
||||
</svg>
|
||||
<input
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={e => setQuery(e.target.value)}
|
||||
placeholder="Search posts…"
|
||||
aria-label="Search posts"
|
||||
className="w-full bg-crust border border-surface1 rounded-lg pl-9 pr-3 py-2 text-sm md:text-base text-text placeholder:text-subtext0 focus:outline-none focus:border-mauve transition-colors"
|
||||
/>
|
||||
</div>
|
||||
{allTags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allTags.map(tag => {
|
||||
const active = activeTags.has(tag);
|
||||
return (
|
||||
<button
|
||||
key={tag}
|
||||
type="button"
|
||||
onClick={() => toggleTag(tag)}
|
||||
className={`text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-full border transition-colors ${
|
||||
active
|
||||
? 'bg-mauve/20 text-mauve border-mauve/30'
|
||||
: 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
|
||||
}`}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{activeTags.size > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTags(new Set())}
|
||||
className="text-[10px] uppercase tracking-wider px-2.5 py-1 rounded-full border border-transparent text-subtext0 hover:text-red transition-colors"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{filtered.length === 0 ? (
|
||||
<div className="glass p-8 md:p-12 text-center text-sm md:text-base text-subtext1">
|
||||
No posts match.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col space-y-6">
|
||||
{filtered.map(post => {
|
||||
const displayTitle = post.title || formatSlug(post.slug);
|
||||
return (
|
||||
<article
|
||||
key={post.slug}
|
||||
className="glass p-5 md:p-8 transition-colors hover:bg-surface0/80 group"
|
||||
>
|
||||
<a href={`/posts/${encodeURIComponent(post.slug)}`} className="block">
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 mb-2 text-xs text-subtext0">
|
||||
<time dateTime={post.date}>{formatDate(post.date)}</time>
|
||||
<a href={`/posts/${encodeURIComponent(post.slug)}`} className="block">
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-6">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 mb-2 text-xs text-subtext0">
|
||||
<time dateTime={post.date}>{formatDate(post.date)}</time>
|
||||
<span className="opacity-50">·</span>
|
||||
<span>{post.reading_time} min read</span>
|
||||
{post.draft && (
|
||||
<>
|
||||
<span className="opacity-50">·</span>
|
||||
<span>{post.reading_time} min read</span>
|
||||
{post.draft && (
|
||||
<>
|
||||
<span className="opacity-50">·</span>
|
||||
<span className="text-peach uppercase tracking-wide font-semibold">
|
||||
Draft
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-xl md:text-2xl font-semibold text-lavender group-hover:text-mauve transition-colors mb-2">
|
||||
{displayTitle}
|
||||
</h2>
|
||||
<p className="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-2">
|
||||
{post.excerpt || `Read more about ${displayTitle}...`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="m12 5 7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-peach uppercase tracking-wide font-semibold">
|
||||
Draft
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-xl md:text-2xl font-semibold text-lavender group-hover:text-mauve transition-colors mb-2 pr-20">
|
||||
{displayTitle}
|
||||
</h2>
|
||||
<p className="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-2">
|
||||
{post.excerpt || `Read more about ${displayTitle}...`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M5 12h14" />
|
||||
<path d="m12 5 7 7-7 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{post.tags.map(tag => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full bg-surface0 text-subtext0 border border-surface1"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isAdmin && (
|
||||
<div className="absolute top-4 right-4 md:top-5 md:right-5 flex items-center gap-1.5">
|
||||
<a
|
||||
href={`/admin/editor?edit=${encodeURIComponent(post.slug)}`}
|
||||
onClick={e => e.stopPropagation()}
|
||||
title="Edit post"
|
||||
aria-label={`Edit ${displayTitle}`}
|
||||
className="p-1.5 rounded-md bg-surface0/80 hover:bg-blue/20 text-subtext0 hover:text-blue border border-surface1 transition-colors"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
|
||||
<path d="m15 5 4 4" />
|
||||
</svg>
|
||||
</a>
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-3">
|
||||
{post.tags.map(tag => {
|
||||
const active = activeTags.has(tag);
|
||||
return (
|
||||
<button
|
||||
key={tag}
|
||||
type="button"
|
||||
onClick={() => toggleTag(tag)}
|
||||
className={`text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border transition-colors ${
|
||||
active
|
||||
? 'bg-mauve/20 text-mauve border-mauve/30'
|
||||
: 'bg-surface0 text-subtext0 border-surface1 hover:text-text'
|
||||
}`}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => { e.preventDefault(); e.stopPropagation(); handleDelete(post.slug, displayTitle); }}
|
||||
disabled={isDeleting}
|
||||
title="Delete post"
|
||||
aria-label={`Delete ${displayTitle}`}
|
||||
className="p-1.5 rounded-md bg-surface0/80 hover:bg-red/20 text-subtext0 hover:text-red border border-surface1 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M3 6h18" />
|
||||
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
||||
<path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
|
||||
<line x1="10" x2="10" y1="11" y2="17" />
|
||||
<line x1="14" x2="14" y1="11" y2="17" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user