forked from MarySed/chakra-bookshelf
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Post.tsx
55 lines (53 loc) · 1.79 KB
/
Post.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
import { Flex, Heading, Link, Text, useColorModeValue, Avatar, Divider, Box } from '@chakra-ui/react';
import { PostWithAuthor } from 'types/types';
const Post = ({ post }: { post: PostWithAuthor }) => {
return (
<Flex
bg={useColorModeValue('white', 'gray.800')}
width="100%"
height="250px"
rounded={6}
overflow="hidden"
borderColor={useColorModeValue('base.a100', 'blackAlpha.100')}
p={{ base: 6, md: 12 }}
gridGap={8}
borderWidth={1}
transition="ease-in"
transitionDuration="0.2s"
_hover={{ boxShadow: 'lg', borderColor: 'gray.300' }}
>
<Avatar size="lg" src={post.author?.image ?? ''} display={{ base: 'none', md: 'block' }} />
<Box height="20vh" display={{ base: 'none', md: 'block' }}>
<Divider orientation="vertical" color="rainbow.pink" height="100%" />
</Box>
<Flex flex="1" flexDirection="column" justifyContent="center" overflow="hidden" height="100%">
<Heading marginY={1} as="h1" size="xl">
<Link
textDecoration="none"
_focus={{ outline: 'none' }}
_hover={{ textDecoration: 'none', textColor: 'rainbow.blue' }}
href={`/posts/${post.id}`}
>
{post.title}
</Link>
</Heading>
<Heading as="sub" color="rainbow.indigo" fontWeight="thin" size="md" mb={6}>
By {post.author?.name ?? 'Unknown author'}
</Heading>
<Text
as="p"
marginTop="2"
color={useColorModeValue('gray.700', 'gray.200')}
fontSize="md"
textOverflow="ellipsis"
whiteSpace="pre"
overflow="hidden"
maxHeight="100px"
>
{post?.content ?? ''}
</Text>
</Flex>
</Flex>
);
};
export default Post;