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