nandi.uk
This repository has no description
2.3 kB
83 lines
1import {
2 Container,
3 Stack,
4 Group,
5 Avatar,
6 Text,
7 Title,
8 Button,
9 Spoiler,
10 Grid,
11 GridCol,
12} from '@mantine/core';
13import { truncateText } from '@/lib/utils/text';
14import MinimalProfileHeaderContainer from '../../containers/minimalProfileHeaderContainer/MinimalProfileHeaderContainer';
15import { FaBluesky } from 'react-icons/fa6';
16import { getProfile } from '../../lib/dal';
17
18interface Props {
19 handle: string;
20}
21
22export default async function ProfileHeader(props: Props) {
23 const profile = await getProfile(props.handle);
24
25 return (
26 <Container p={0} size={'xl'}>
27 <MinimalProfileHeaderContainer
28 avatarUrl={profile.avatarUrl}
29 name={profile.name}
30 handle={profile.handle}
31 />
32 <Stack gap={'sm'} p={'xs'}>
33 <Stack gap={'xl'}>
34 <Grid gutter={'md'} align={'center'} grow>
35 <GridCol span={'auto'}>
36 <Avatar
37 src={profile.avatarUrl}
38 alt={`${profile.name}'s avatar`}
39 size={'clamp(90px, 22vw, 140px)'}
40 radius={'lg'}
41 />
42 </GridCol>
43
44 <GridCol span={{ base: 12, xs: 9 }}>
45 <Stack gap={'sm'}>
46 <Stack gap={0}>
47 <Title order={1} fz={{ base: 'h2', md: 'h1' }}>
48 {profile.name}
49 </Title>
50 <Text c="blue" fw={600} fz={{ base: 'lg', md: 'xl' }}>
51 @{profile.handle}
52 </Text>
53 </Stack>
54 {profile.description && (
55 <Spoiler
56 showLabel={'Read more'}
57 hideLabel={'See less'}
58 maxHeight={30}
59 >
60 <Text>{profile.description}</Text>
61 </Spoiler>
62 )}
63 </Stack>
64 </GridCol>
65 </Grid>
66 </Stack>
67 <Group>
68 <Button
69 component="a"
70 href={`https://bsky.app/profile/${profile.handle}`}
71 target="_blank"
72 variant="light"
73 radius={'xl'}
74 color={'gray'}
75 leftSection={<FaBluesky />}
76 >
77 {truncateText(profile.handle, 14)}
78 </Button>
79 </Group>
80 </Stack>
81 </Container>
82 );
83}