nandi.uk
This repository has no description
1.4 kB
57 lines
1import NavbarToggle from '@/components/navigation/NavbarToggle';
2import {
3 Group,
4 Avatar,
5 Stack,
6 Title,
7 Text,
8 Container,
9 ActionIcon,
10} from '@mantine/core';
11import Link from 'next/link';
12import { IoSearch } from 'react-icons/io5';
13
14interface Props {
15 avatarUrl?: string;
16 name: string;
17 handle: string;
18}
19
20export default function MinimalProfileHeader(props: Props) {
21 return (
22 <Container p={'xs'} size={'xl'} mx={0}>
23 <Group justify="space-between" wrap="nowrap">
24 <Group gap={'sm'} wrap="nowrap">
25 <Avatar
26 src={props.avatarUrl?.replace('avatar', 'avatar_thumbnail')}
27 alt={`${props.name}'s avatar`}
28 size={'md'}
29 />
30
31 <Stack gap={0}>
32 <Title order={1} fz={'sm'} c={'bright'} lineClamp={1}>
33 {props.name}
34 </Title>
35 <Text c="gray" fw={600} fz={'sm'} lineClamp={1}>
36 @{props.handle}
37 </Text>
38 </Stack>
39 </Group>
40
41 <Group gap={'xs'}>
42 <ActionIcon
43 component={Link}
44 href={`/search/cards?handle=${props.handle}`}
45 variant="light"
46 color="gray"
47 size={'lg'}
48 radius={'xl'}
49 >
50 <IoSearch />
51 </ActionIcon>
52 <NavbarToggle />
53 </Group>
54 </Group>
55 </Container>
56 );
57}