-
-
Notifications
You must be signed in to change notification settings - Fork 19
/
AuthorCard.tsx
95 lines (91 loc) · 2.63 KB
/
AuthorCard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import {
Heading,
Avatar,
Box,
Center,
Image,
Flex,
Text,
Stack,
Button,
useColorModeValue
} from '@chakra-ui/react'
import NextLink from 'next/link'
import { useRouter } from 'next/router'
export default function AuthorCard({ author }: any) {
const router = useRouter()
return (
<Center py={6}>
<Box
w={'full'}
h={'full'}
bg={useColorModeValue('white', 'gray.800')}
boxShadow={'2xl'}
rounded={'md'}
overflow={'hidden'}
>
<Image
h={'120px'}
w={'full'}
src={
'https://images.unsplash.com/photo-1612865547334-09cb8cb455da?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80'
}
alt=""
objectFit={'cover'}
/>
<Flex justify={'center'} mt={-12}>
<Avatar
size={'xl'}
src={`/authors/${author.data.image}`}
name={author.data.name}
css={{
border: '2px solid white'
}}
/>
</Flex>
<Box p={6}>
<Stack spacing={0} align={'center'} mb={5}>
<Heading fontSize={'2xl'} fontWeight={500} mb={2} textAlign="center">
{author.data.name}
</Heading>
<Text color={'gray.500'} textAlign="center">
{author.content}
</Text>
</Stack>
{/* <Stack direction={"row"} justify={"center"} spacing={6}>
<Stack spacing={0} align={"center"}>
<Text fontWeight={600}>23k</Text>
<Text fontSize={"sm"} color={"gray.500"}>
Followers
</Text>
</Stack>
<Stack spacing={0} align={"center"}>
<Text fontWeight={600}>23k</Text>
<Text fontSize={"sm"} color={"gray.500"}>
Followers
</Text>
</Stack>
</Stack> */}
<NextLink href={`/authors/${author.filePath.replace('.mdx', '')}`} passHref>
<Button
w={'full'}
mt={8}
bg={useColorModeValue('#151f21', 'gray.900')}
color={'white'}
rounded={'md'}
_hover={{
transform: 'translateY(-2px)',
boxShadow: 'lg'
}}
onClick={() => {
router.push('/authors/[author]', `/authors/${author.filePath.replace('.mdx', '')}`)
}}
>
View {author.data.name.split(' ')[0]}'s Articles
</Button>
</NextLink>
</Box>
</Box>
</Center>
)
}