CoastalCommitsPastes/client/components/post-list/list-item.tsx

65 lines
2.6 KiB
TypeScript
Raw Normal View History

import NextLink from "next/link"
import { useEffect, useMemo, useState } from "react"
import { timeAgo } from "@lib/time-ago"
import VisibilityBadge from "../badges/visibility-badge"
import getPostPath from "@lib/get-post-path"
2022-03-26 03:24:18 -04:00
import { Link, Text, Card, Tooltip, Divider, Badge, Button } from "@geist-ui/core"
import { File, Post } from "@lib/types"
import FadeIn from "@components/fade-in"
2022-03-26 03:24:18 -04:00
import Trash from "@geist-ui/icons/trash"
import Cookies from "js-cookie"
import ExpirationBadge from "@components/badges/expiration-badge"
import CreatedAgoBadge from "@components/badges/created-ago-badge"
2022-03-09 20:11:37 -05:00
// TODO: isOwner should default to false so this can be used generically
2022-03-26 03:24:18 -04:00
const ListItem = ({ post, isOwner = true, deletePost }: { post: Post, isOwner?: boolean, deletePost: () => void }) => {
return (<FadeIn><li key={post.id}>
2022-03-09 20:11:37 -05:00
<Card style={{ overflowY: 'scroll' }}>
2022-03-24 22:25:02 -04:00
<Card.Body>
<Text h3 style={{
}}>
2022-03-24 22:25:02 -04:00
<NextLink passHref={true} href={getPostPath(post.visibility, post.id)}>
<Link color marginRight={'var(--gap)'}>
{post.title}
</Link>
</NextLink>
{isOwner && <span style={{ float: 'right' }}>
2022-03-26 03:24:18 -04:00
<Button iconRight={<Trash />} onClick={deletePost} auto />
</span>}
2022-03-24 22:25:02 -04:00
</Text>
2022-03-09 20:11:37 -05:00
<div style={{ display: 'inline-flex' }}>
<span>
<VisibilityBadge visibility={post.visibility} />
</span>
<span style={{ marginLeft: 'var(--gap)' }}>
<CreatedAgoBadge createdAt={post.createdAt} />
</span>
<span style={{ marginLeft: 'var(--gap)' }}>
<Badge type="secondary">{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Badge>
</span>
<span style={{ marginLeft: 'var(--gap)' }}>
<ExpirationBadge postExpirationDate={post.expiresAt} />
</span>
</div>
2022-03-24 22:25:02 -04:00
</Card.Body>
<Divider h="1px" my={0} />
2022-03-23 19:28:39 -04:00
<Card.Content>
{post.files.map((file: File) => {
return <div key={file.id}>
<Link color href={`${getPostPath(post.visibility, post.id)}#${file.title}`}>
{file.title || 'Untitled file'}
</Link></div>
2022-03-09 20:11:37 -05:00
})}
</Card.Content>
</Card>
</li> </FadeIn>)
2022-03-09 20:11:37 -05:00
}
export default ListItem