Leaflet Blog in Deno Fresh
knotbin.com
1"use client";
2
3import { useEffect, useRef, useState } from "preact/hooks";
4import { ComWhtwndBlogEntry } from "npm:@atcute/whitewind";
5
6import { cx } from "../lib/cx.ts";
7
8import { PostInfo } from "./post-info.tsx";
9import { Title } from "./typography.tsx";
10
11export function PostListItem({
12 post,
13 rkey,
14}: {
15 post: ComWhtwndBlogEntry.Main;
16 rkey: string;
17}) {
18 const [isHovered, setIsHovered] = useState(false);
19 const [isLeaving, setIsLeaving] = useState(false);
20 const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
21
22 // Clean up any timeouts on unmount
23 useEffect(() => {
24 return () => {
25 if (timeoutRef.current) {
26 clearTimeout(timeoutRef.current);
27 }
28 };
29 }, []);
30
31 const handleMouseEnter = () => {
32 if (timeoutRef.current) {
33 clearTimeout(timeoutRef.current);
34 }
35 setIsLeaving(false);
36 setIsHovered(true);
37 };
38
39 const handleMouseLeave = () => {
40 setIsLeaving(true);
41 timeoutRef.current = setTimeout(() => {
42 setIsHovered(false);
43 setIsLeaving(false);
44 }, 300); // Match animation duration
45 };
46
47 return (
48 <>
49 {isHovered && (
50 <div
51 className={cx(
52 "fixed inset-0 pointer-events-none z-0",
53 isLeaving ? "animate-fade-out" : "animate-fade-in",
54 )}
55 >
56 <div className="h-full w-full pt-[120px] flex items-center overflow-hidden">
57 <div className="whitespace-nowrap animate-marquee font-serif font-medium uppercase leading-[0.8] text-[20vw] opacity-[0.015] -rotate-12 absolute left-0">
58 {Array(8).fill(post.title).join(" · ")}
59 </div>
60 </div>
61 </div>
62 )}
63 <a
64 href={`/post/${rkey}`}
65 className="w-full group block"
66 onMouseEnter={handleMouseEnter}
67 onMouseLeave={handleMouseLeave}
68 >
69 <article className="w-full flex flex-row border-b items-stretch relative transition-colors duration-300 ease-[cubic-bezier(0.33,0,0.67,1)] backdrop-blur-sm hover:bg-slate-700/5 dark:hover:bg-slate-200/10">
70 <div className="w-1.5 diagonal-pattern shrink-0 opacity-20 group-hover:opacity-100 transition-opacity duration-300 ease-[cubic-bezier(0.33,0,0.67,1)]" />
71 <div className="flex-1 py-2 px-4 z-10 relative w-full">
72 <Title className="text-lg w-full" level="h3">
73 {post.title}
74 </Title>
75 <PostInfo
76 content={post.content}
77 createdAt={post.createdAt}
78 className="text-xs mt-1 w-full"
79 />
80 <div className="grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.33,0,0.67,1)] grid-rows-[0fr] group-hover:grid-rows-[1fr] opacity-0 group-hover:opacity-100 mt-2">
81 <div className="overflow-hidden">
82 <p className="text-sm line-clamp-3 break-words">
83 {post.content.substring(0, 280)}
84 </p>
85 </div>
86 </div>
87 </div>
88 </article>
89 </a>
90 </>
91 );
92}