nandi.uk
This repository has no description
semble
/
src
/
webapp
/
features
/
platforms
/
bluesky
/
components
/
externalEmbed
/
ExternalEmbed.tsx
1.9 kB
77 lines
1import { getDomain } from '@/lib/utils/link';
2import { AppBskyEmbedExternal } from '@atproto/api';
3import {
4 AspectRatio,
5 Card,
6 CardSection,
7 Group,
8 Image,
9 Stack,
10 Text,
11} from '@mantine/core';
12import type { EmbedMode } from '../../types';
13
14interface Props {
15 embed: AppBskyEmbedExternal.View;
16 mode?: EmbedMode;
17}
18
19export default function ExternalEmbed(props: Props) {
20 if (props.mode === 'card') {
21 return (
22 <Card p={'xs'} withBorder>
23 <Group gap={'xs'} wrap="nowrap">
24 {props.embed.external.thumb && (
25 <AspectRatio ratio={1 / 1}>
26 <Image
27 src={props.embed.external.thumb}
28 alt={props.embed.external.description}
29 h={50}
30 w={50}
31 radius={'sm'}
32 />
33 </AspectRatio>
34 )}
35
36 <Stack gap={0}>
37 <Text fz={'sm'} fw={500} c={'bright'} lineClamp={1}>
38 {props.embed.external.title}
39 </Text>
40 <Text fz={'sm'} fw={500} c={'gray'} lineClamp={1}>
41 {getDomain(props.embed.external.uri)}
42 </Text>
43 </Stack>
44 </Group>
45 </Card>
46 );
47 }
48 return (
49 <Card
50 p={0}
51 component="a"
52 href={props.embed.external.uri}
53 target="_blank"
54 withBorder
55 >
56 <CardSection>
57 {props.embed.external.thumb && (
58 <AspectRatio ratio={16 / 9}>
59 <Image
60 src={props.embed.external.thumb}
61 alt={props.embed.external.description}
62 />
63 </AspectRatio>
64 )}
65 </CardSection>
66
67 <Stack gap={0} p={'xs'}>
68 <Text fz={'sm'} fw={500} c={'bright'} lineClamp={1}>
69 {props.embed.external.title}
70 </Text>
71 <Text fz={'sm'} fw={500} c={'gray'} lineClamp={1}>
72 {getDomain(props.embed.external.uri)}
73 </Text>
74 </Stack>
75 </Card>
76 );
77}