nandi.uk
This repository has no description
2.0 kB
96 lines
1'use client';
2
3import {
4 AspectRatio,
5 Box,
6 Image,
7 Paper,
8 Stack,
9 Text,
10 Title,
11 Loader,
12 Group,
13} from '@mantine/core';
14
15export interface UrlMetadata {
16 url: string;
17 title?: string;
18 description?: string;
19 author?: string;
20 siteName?: string;
21 imageUrl?: string;
22 type?: string;
23}
24
25interface UrlMetadataDisplayProps {
26 metadata: UrlMetadata | null;
27 isLoading: boolean;
28 currentUrl: string;
29 compact?: boolean;
30}
31
32export function UrlMetadataDisplay({
33 metadata,
34 isLoading,
35 currentUrl,
36 compact = false,
37}: UrlMetadataDisplayProps) {
38 if (isLoading) {
39 return (
40 <Stack gap={0} align="center" py="md">
41 <Loader type="dots" size="sm" />
42 <Text fz="sm" fw={500} c="gray">
43 Loading page information...
44 </Text>
45 </Stack>
46 );
47 }
48
49 if (!metadata) {
50 return (
51 <Stack gap={0}>
52 <Text fz="sm" c="gray">
53 Current page:
54 </Text>
55 <Text fz="sm" truncate="end">
56 {currentUrl || 'Loading...'}
57 </Text>
58 </Stack>
59 );
60 }
61
62 return (
63 <Paper bg="gray.2" p="sm">
64 <Stack gap={compact ? 'xs' : 'sm'}>
65 {metadata.imageUrl && (
66 <AspectRatio ratio={2 / 1}>
67 <Image
68 src={metadata.imageUrl}
69 alt={metadata.title || 'Page preview'}
70 />
71 </AspectRatio>
72 )}
73 <Stack gap="xs">
74 <Stack gap={0}>
75 <Title
76 order={compact ? 4 : 3}
77 lineClamp={2}
78 fz={compact ? 'sm' : 'md'}
79 fw={500}
80 >
81 {metadata.title || 'Untitled'}
82 </Title>
83 {metadata.description && (
84 <Text fz="sm" fw={500} c="gray" lineClamp={2}>
85 {metadata.description}
86 </Text>
87 )}
88 </Stack>
89 <Text fz="xs" c="gray">
90 {metadata.siteName || new URL(currentUrl).hostname}
91 </Text>
92 </Stack>
93 </Stack>
94 </Paper>
95 );
96}