Header
import React from 'react';
import { Box, Heading, Flex, Button, Link, useColorModeValue } from '@chakra-ui/react';
// Here we have used react-icons package for the icons
import { FaGithub } from 'react-icons/fa';
const Header = () => {
const [show, setShow] = React.useState(false);
const handleToggle = () => setShow(!show);
return (
<Box as="nav" bg="teal.500">
<Flex
as="nav"
align="center"
justifyContent="space-between"
wrap="wrap"
padding="1.5rem"
bg="teal.500"
color="white"
maxWidth="1200px"
mx="auto"
my="auto"
>
<Flex align="center" mr={5}>
<Heading as="h1" size="lg" letterSpacing={'-.1rem'} color="gray.600">
Blog
</Heading>
</Flex>
<Box
display={['block', 'none', 'none', 'none']}
onClick={handleToggle}
cursor="pointer"
p={3}
bg={useColorModeValue('gray.300', 'gray.600')}
rounded="md"
>
<svg fill="white" width="12px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</Box>
<Box
display={[show ? 'block' : 'none', 'flex', 'flex', 'flex']}
width={['full', 'auto', 'auto', 'auto']}
alignItems="center"
flexGrow={1}
>
<Box>
<Heading fontSize="20px">
<Link to="#">New</Link>
</Heading>
</Box>
<Box ml={[0, 3, 3, 3]}>
<Heading fontSize="20px">
<Link to="#">List</Link>
</Heading>
</Box>
</Box>
<Box display={['none', 'block', 'block', 'block']} mt={[4, 0, 0, 0]}>
<Link
href="https://github.com/MA-Ahmad/reactBlog"
isExternal
style={{ textDecoration: 'none' }}
>
<Button leftIcon={FaGithub} bg="transparent" border="1px" rounded="md">
View Source
</Button>
</Link>
</Box>
</Flex>
</Box>
);
};
export default Header;
Blog Card
import React from 'react';
import { Box, Badge, SimpleGrid, Container, Image, Link, Text } from '@chakra-ui/react';
const dataList = [
{
id: 1,
title: 'Rails ActiveAdmin',
authorName: 'Ali',
content: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`
},
{
id: 2,
title: 'Rails ActiveAdmin',
authorName: 'Ali',
content: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`
},
{
id: 3,
title: 'Rails ActiveAdmin',
authorName: 'Ali',
content: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`
}
];
const BlogCards = () => {
return (
<Container maxWidth="1200px" mx="auto" my="auto" p={10}>
<SimpleGrid columns={[1, 2, 3]} spacing="15px">
{dataList.map((blog) => {
return (
<Box position="relative" key={blog.id}>
<Box fontSize="sm" position="absolute" right="5px" margin="5px" zIndex="1">
<Badge rounded="full" p="2px 8px" colorScheme="red" as="button">
Delete
</Badge>
</Box>
<Link to="#">
<Box
borderWidth="1px"
shadow="md"
rounded="lg"
overflow="hidden"
position="relative"
>
<Image src={'https://bit.ly/2Z4KKcF'} alt="Blog image" />
<Box p="6">
<Box d="flex" alignItems="baseline">
<Box
fontWeight="semibold"
as="h2"
letterSpacing="wide"
textTransform="uppercase"
ml="2"
>
{blog.title}
</Box>
</Box>
<Box>
<Box color="gray.600" fontSize="sm">
<Badge rounded="full" px="2" colorScheme="teal">
{blog.authorName}
</Badge>
</Box>
</Box>
<Text
mt="1"
fontWeight="semibold"
lineHeight="tight"
color="gray.600"
fontSize="sm"
noOfLines={3}
>
{blog.content}
</Text>
</Box>
</Box>
</Link>
</Box>
);
})}
</SimpleGrid>
</Container>
);
};
export default BlogCards;
Blog Form
import React from 'react';
import {
Container,
Box,
Flex,
FormControl,
FormLabel,
Input,
Stack,
Textarea,
Button
} from '@chakra-ui/react';
const BlogForm = () => {
return (
<Container maxWidth="1200px" mx="auto" my="auto" p={6} height={'100%'}>
<Flex alignItems="center" justifyContent="center" flexDirection="column">
<Box p={5} shadow="md" borderWidth="1px" rounded="md" width={['100%', '70%', '50%']}>
<Stack isInline spacing={8} align="center">
<form style={{ width: '100%' }}>
<Box paddingBottom={3}>
<FormControl>
<FormLabel htmlFor="title">Title</FormLabel>
<Input id="title" placeholder="Title" />
</FormControl>
</Box>
<Box paddingBottom={3}>
<FormControl>
<FormLabel htmlFor="authorName">Name</FormLabel>
<Input id="authorName" placeholder="Author Name" />
</FormControl>
</Box>
<Box paddingBottom={5}>
<FormLabel htmlFor="content">Content</FormLabel>
<Textarea height={'20vh'} name="content" />
</Box>
<Button
mt={4}
variantColor="teal"
type="submit"
float="right"
rounded="md"
onClick={(e) => e.preventDefault()}
>
Create
</Button>
</form>
</Stack>
</Box>
</Flex>
</Container>
);
};
export default BlogForm;
