ligun and sogup
This commit is contained in:
parent
b6633d6f25
commit
4573048a47
24 changed files with 482 additions and 226 deletions
69
src/feed/PostItem.tsx
Normal file
69
src/feed/PostItem.tsx
Normal file
|
@ -0,0 +1,69 @@
|
|||
import { Post, PostMedia } from './models/posts/posts.ts'
|
||||
import { Link } from 'react-router'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
interface PostItemProps {
|
||||
post: Post
|
||||
}
|
||||
|
||||
export default function PostItem({ post }: PostItemProps) {
|
||||
const formattedDate = post.createdAt.toLocaleString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
|
||||
const [visible, setVisible] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => setVisible(true))
|
||||
return () => {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const opacity = visible ? 'opacity-100' : 'opacity-0'
|
||||
|
||||
return (
|
||||
<article className={`w-full p-4 ${opacity} transition-opacity duration-500`} 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}
|
||||
</Link>
|
||||
• {formattedDate}
|
||||
</div>
|
||||
|
||||
<div className="text-gray-800 mb-4 whitespace-pre-wrap">{post.content}</div>
|
||||
|
||||
{post.media.length > 0 && (
|
||||
<div className="grid gap-4 grid-cols-1">
|
||||
{post.media.map((media) => (
|
||||
<PostMediaItem key={media.url.toString()} media={media} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
interface PostMediaProps {
|
||||
media: PostMedia
|
||||
}
|
||||
|
||||
function PostMediaItem({ media }: PostMediaProps) {
|
||||
const url = media.url.toString()
|
||||
const width = media.width ?? undefined
|
||||
const height = media.height ?? undefined
|
||||
return (
|
||||
<img
|
||||
width={width}
|
||||
height={height}
|
||||
src={url}
|
||||
alt="todo sry :("
|
||||
className="w-full h-auto"
|
||||
loading="lazy"
|
||||
/>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue