54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { Badge, Card, Group, Image, Text } from "@mantine/core";
|
|
|
|
import dayjs from "dayjs";
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|
import { Link } from "react-router-dom";
|
|
|
|
import { useContentFix } from "@/hooks/useContentFix";
|
|
|
|
dayjs.extend(relativeTime);
|
|
|
|
export function ParagraphCard({
|
|
cover,
|
|
title,
|
|
time,
|
|
author,
|
|
tags,
|
|
id,
|
|
}: Paragraph) {
|
|
const url = `/paragraph/${id}`;
|
|
cover = useContentFix(cover) ?? "";
|
|
|
|
return (
|
|
<Card withBorder radius="md" padding="lg" shadow="sm">
|
|
<Card.Section>
|
|
<Link to={url} target="_blank">
|
|
{cover && <Image src={cover} height={140} width={140} />}
|
|
</Link>
|
|
</Card.Section>
|
|
<Group justify="space-between" mt="md" mb="xs">
|
|
<Text component={Link} to={url} target="_blank">
|
|
{title}
|
|
</Text>
|
|
<Group>
|
|
{tags.map((tag, index) => (
|
|
<Badge key={index}>{tag}</Badge>
|
|
))}
|
|
</Group>
|
|
</Group>
|
|
|
|
<Group>
|
|
<Group>
|
|
<Text size="xs">{author}</Text>
|
|
</Group>
|
|
<Text size="xs" c="dimmed">
|
|
•
|
|
</Text>
|
|
<Text size="xs" c="dimmed">
|
|
{dayjs().to(dayjs(time))}
|
|
</Text>
|
|
</Group>
|
|
</Card>
|
|
);
|
|
}
|