botris.social/femto-webapp
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

changes

Browse source
This commit is contained in:
john 2025-05-04 12:57:43 +02:00
parent be90a09ce4
commit 3c7c2a6957
6 changed files with 30 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/PostItem.tsx
View file

@ -1,11 +1,13 @@
import { Post } from '../model/posts/posts.ts'
import { Link } from 'react-router'
import { useEffect, useState } from 'react'
interface PostItemProps {
post: Post
index: number
}
export default function PostItem({ post }: PostItemProps) {
export default function PostItem({ post, index }: PostItemProps) {
const formattedDate = post.createdAt.toLocaleString('en-US', {
year: 'numeric',
month: 'short',
@ -14,8 +16,23 @@ export default function PostItem({ post }: PostItemProps) {
minute: '2-digit',
})
const [visible, setVisible] = useState(false)
useEffect(() => {
const timeout = setTimeout(() => setVisible(true))
return () => clearTimeout(timeout)
}, [])
const opacity = visible ? 'opacity-100' : 'opacity-0'
const delayMs = index * 100
return (
<article className="w-full p-4" key={post.postId}>
<article
className={`w-full p-4 ${opacity} transition-opacity duration-500`}
style={{ transitionDelay: `${delayMs}ms` }}
key={post.postId}
>
<div className="text-sm text-gray-500 mb-3">
<Link to={`/u/${post.authorName}`} className="text-gray-400 hover:underline mr-2">
@{post.authorName}