nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
platforms
/
bluesky
/
components
/
blueskyMentionPost
/
BlueskyMentionPost.tsx
2.6 kB
86 lines
1'use client';
2
3import RichTextRenderer from '@/components/contentDisplay/richTextRenderer/RichTextRenderer';
4import {
5 Anchor,
6 Avatar,
7 Box,
8 Card,
9 Group,
10 Stack,
11 Text,
12 Tooltip,
13} from '@mantine/core';
14import { PostView } from '@semble/types';
15import { FaBluesky } from 'react-icons/fa6';
16import PostEmbed from '../postEmbed/PostEmbed';
17import styles from './BlueskyMentionPost.module.css';
18import { AppBskyFeedPost } from '@atproto/api';
19import { useRouter } from 'next/navigation';
20import { MouseEvent } from 'react';
21import { getPostRkeyFromUri } from '../../lib/utils/link';
22
23interface Props {
24 post: PostView;
25}
26
27export default function BlueskyMentionPost(props: Props) {
28 const record = props.post.record as AppBskyFeedPost.Record;
29 const router = useRouter();
30
31 const handleNavigateToPost = (e: MouseEvent<HTMLElement>) => {
32 e.stopPropagation();
33
34 router.push(
35 `/url?id=https://bsky.app/profile/${props.post.author.did}/post/${getPostRkeyFromUri(props.post.uri)}`,
36 );
37 };
38
39 return (
40 <Card
41 component={'article'}
42 radius={'lg'}
43 p={'sm'}
44 flex={1}
45 h={'100%'}
46 withBorder
47 className={styles.root}
48 onClick={handleNavigateToPost}
49 >
50 <Stack justify="space-between" gap={'sm'} flex={1}>
51 <Stack justify="space-between" gap="xs">
52 <Group gap="xs" justify="space-between" wrap="nowrap" w={'100%'}>
53 <Group gap={'xs'} wrap="nowrap">
54 <Avatar
55 src={props.post.author.avatar?.replace(
56 'avatar',
57 'avatar_thumbnail',
58 )}
59 alt={`${props.post.author.handle} avatar`}
60 size={'sm'}
61 radius="xl"
62 />
63
64 <Text c="bright" lineClamp={1} fw={500}>
65 {props.post.author.displayName || props.post.author.handle}
66 </Text>
67 </Group>
68 <Tooltip label="View on Bluesky">
69 <Anchor
70 href={`https://bsky.app/profile/${props.post.author.did}/post/${getPostRkeyFromUri(props.post.uri)}`}
71 target="_blank"
72 onClick={(e) => e.stopPropagation()}
73 >
74 <FaBluesky fill="#0085ff" size={18} />
75 </Anchor>
76 </Tooltip>
77 </Group>
78 <Stack gap={'xs'} w={'100%'}>
79 {<Box>{<RichTextRenderer text={record.text} />}</Box>}
80 {props.post.embed && <PostEmbed embed={props.post.embed} />}
81 </Stack>
82 </Stack>
83 </Stack>
84 </Card>
85 );
86}