nandi.uk
This repository has no description
1.7 kB
56 lines
1import { AppBskyFeedDefs, AppBskyFeedPost } from '@atproto/api';
2import { ReactElement } from 'react';
3import { Group, Stack, Text, Avatar, Box } from '@mantine/core';
4import RichTextRenderer from '@/components/contentDisplay/richTextRenderer/RichTextRenderer';
5import useGetBlueskyPost from '../../lib/queries/useGetBlueskyPost';
6import PostEmbed from '../postEmbed/PostEmbed';
7import { FaBluesky } from 'react-icons/fa6';
8
9interface Props {
10 uri: string;
11 fallbackCardContent: ReactElement;
12}
13
14export default function BlueskyPost(props: Props) {
15 const { data, error } = useGetBlueskyPost({ uri: props.uri });
16
17 if (
18 !data.thread ||
19 !AppBskyFeedDefs.isThreadViewPost(data.thread) ||
20 AppBskyFeedDefs.isNotFoundPost(data.thread.post) ||
21 AppBskyFeedDefs.isBlockedPost(data.thread.post) ||
22 error
23 ) {
24 return props.fallbackCardContent;
25 }
26
27 const post = data.thread.post;
28 const record = post.record as AppBskyFeedPost.Record;
29
30 return (
31 <Stack justify="space-between" gap="xs">
32 <Group gap="xs" justify="space-between" wrap="nowrap" w={'100%'}>
33 <Group gap={'xs'} wrap="nowrap">
34 <Avatar
35 src={post.author.avatar}
36 alt={`${post.author.handle} avatar`}
37 size={'sm'}
38 radius="xl"
39 />
40
41 <Text c="bright" lineClamp={1} fw={500}>
42 {post.author.displayName || post.author.handle}
43 </Text>
44 </Group>
45
46 <FaBluesky fill="#0085ff" size={18} />
47 </Group>
48 <Stack gap={'xs'} w={'100%'}>
49 <Box>
50 <RichTextRenderer text={record.text} textProps={{ lineClamp: 3 }} />
51 </Box>
52 {post.embed && <PostEmbed embed={post.embed} mode="card" />}
53 </Stack>
54 </Stack>
55 );
56}