nandi.uk
This repository has no description
3.5 kB
104 lines
1import type { ConnectionWithSourceAndTarget } from '@semble/types';
2import { Card, Group, Stack, Grid, Badge, ThemeIcon } from '@mantine/core';
3import UrlCard from '@/features/cards/components/urlCard/UrlCard';
4import { IoArrowDown, IoArrowForward } from 'react-icons/io5';
5import { CONNECTION_TYPES } from '../../const/connectionTypes';
6import styles from './ConnectionCard.module.css';
7
8interface Props {
9 connection: ConnectionWithSourceAndTarget;
10 withoutBorder?: boolean;
11}
12
13export default function ConnectionCard(props: Props) {
14 const sourceUrlView = props.connection.source;
15 const targetUrlView = props.connection.target;
16
17 const content = (
18 <Grid gutter={'xs'} align="stretch">
19 {/* Source URL */}
20 <Grid.Col span={{ base: 12, sm: 'auto' }}>
21 <UrlCard
22 id={sourceUrlView.url}
23 url={sourceUrlView.url}
24 cardContent={sourceUrlView.metadata}
25 urlLibraryCount={sourceUrlView.urlLibraryCount}
26 urlIsInLibrary={sourceUrlView.urlInLibrary ?? false}
27 urlConnectionCount={sourceUrlView.urlConnectionCount ?? 0}
28 />
29 </Grid.Col>
30
31 {/* Connection Metadata */}
32 <Grid.Col span={{ base: 12, sm: 2.5 }}>
33 <Card p={0} radius={'md'} bg={'transparent'} h={'100%'}>
34 <Group justify="center" wrap="nowrap" align="center" h={'100%'}>
35 <Stack gap={0} align="center" justify="center">
36 {props.connection.connection.type &&
37 (() => {
38 const config = CONNECTION_TYPES.find(
39 (t) => t.value === props.connection.connection.type,
40 );
41 if (!config) return null;
42 const Icon = config.icon;
43 return (
44 <Stack align="center" gap={'xs'}>
45 <ThemeIcon
46 color="gray"
47 size={'sm'}
48 variant="light"
49 radius={'xl'}
50 hiddenFrom="sm"
51 >
52 <IoArrowDown />
53 </ThemeIcon>
54
55 <ThemeIcon
56 color="gray"
57 size={'sm'}
58 variant="light"
59 radius={'xl'}
60 visibleFrom="sm"
61 >
62 <IoArrowForward />
63 </ThemeIcon>
64
65 <Badge
66 size="md"
67 color="green"
68 variant="light"
69 leftSection={<Icon />}
70 >
71 {config.label}
72 </Badge>
73 </Stack>
74 );
75 })()}
76 </Stack>
77 </Group>
78 </Card>
79 </Grid.Col>
80
81 {/* Target URL */}
82 <Grid.Col span={{ base: 12, sm: 'auto' }}>
83 <UrlCard
84 id={targetUrlView.url}
85 url={targetUrlView.url}
86 cardContent={targetUrlView.metadata}
87 urlLibraryCount={targetUrlView.urlLibraryCount}
88 urlIsInLibrary={targetUrlView.urlInLibrary ?? false}
89 urlConnectionCount={targetUrlView.urlConnectionCount ?? 0}
90 />
91 </Grid.Col>
92 </Grid>
93 );
94
95 if (props.withoutBorder) {
96 return content;
97 }
98
99 return (
100 <Card p={'xs'} radius={'lg'} className={styles.root} withBorder>
101 {content}
102 </Card>
103 );
104}