[Story] Homepage - add BlogPost component

package.json

@@ -12,7 +12,10 @@
         "lint:auto": "yarn eslint ./src/** --fix --no-color && yarn prettier --write --no-color ."
     },
     "dependencies": {
-        "antd": "^4.21.6",
+        "@chakra-ui/react": "^2.2.4",
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "framer-motion": "^6.5.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.3.0"

src/components/BlogPost.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box, Center, Heading, Text, Stack, Image } from '@chakra-ui/react';
+import { Post } from '../types/types';
+
+// TODO: fix image
+const BlogPost: React.FC<Post> = (props) => {
+    const { title, date, author, description, imageUrl, link } = props;
+    return (
+        <Center className="py-6">
+            <Box
+                maxW="450px"
+                w="full"
+                overflow="hidden"
+                className="bg-LightBrown rounded-md shadow-l p-6"
+            >
+                <Box h="275px" className="-mt-6 -mx-6 mb-6 relative">
+                    <Image src={imageUrl} h="275px" w="450px" />
+                </Box>
+                <Stack>
+                    <Text className="font-Subheading text-caption font-normal">
+                        {date} | Posted by {author}
+                    </Text>
+                    <Heading className="font-Heading text-h6 font-semibold">
+                        {title}
+                    </Heading>
+                    <Text className="font-Body text-body font-normal">
+                        {description}
+                    </Text>
+                </Stack>
+                <Stack direction="row" spacing={4} className="mt-6 center">
+                    <Stack direction="column" spacing={0}>
+                        <Text className="font-Caption text-caption font-semibold">
+                            <a href={link}>Read More</a>
+                        </Text>
+                    </Stack>
+                </Stack>
+            </Box>
+        </Center>
+    );
+};
+
+export default BlogPost;

src/pages/Homepage/Homepage.tsx

@@ -1,24 +1,31 @@
 import React from 'react';
-import { HomepageProps } from '../../types/interface';
-import { useToggle } from '../../hooks/useToggle';
+import BlogPost from '../../components/BlogPost';
+import Post from '../../types/types';
 
-const Homepage: React.FC<HomepageProps> = (props) => {
-    const { text } = props;
-    const [isOn, toggle] = useToggle();
-
-    return (
-        <div
-            style={
-                isOn ? { backgroundColor: 'green' } : { backgroundColor: 'red' }
-            }
-        >
-            <p>Halo semuanya ini homepage</p>
-            <p>{text}</p>
-            <button onClick={toggle} type="button">
-                Click me
-            </button>
-        </div>
-    );
+const listOfPosts: Post[] = [
+    {
+        title: 'Post Title',
+        date: '19 Jul 2022',
+        author: 'Mamet KAT ITB',
+        imageUrl:
+            'https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
+        link: '#',
+        description:
+            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
+    },
+];
+const Homepage: React.FC<{}> = () => {
+    const blogPostElements = listOfPosts.map((item: Post) => (
+        <BlogPost
+            title={item.title}
+            date={item.date}
+            author={item.author}
+            description={item.description}
+            imageUrl={item.imageUrl}
+            link={item.link}
+        />
+    ));
+    return <>{blogPostElements}</>;
 };
 
 export default Homepage;

src/types/types.ts

@@ -1,5 +1,14 @@
+// export type Post = {
+//     name: string;
+//     detail: string;
+//     link: string;
+// };
+
 export type Post = {
-    name: string;
-    detail: string;
-    link: string;
+    title: string;
+    date: string;
+    author: string;
+    description: string;
+    imageUrl: string;
+    link: string; // link to detail post
 };

tailwind.config.js

@@ -14,6 +14,8 @@ module.exports = {
                 Orange: '#FFA06E',
                 LightOrange: '#F9D7AA',
                 Brown: '#66402C',
+                LightBrown: '#FFECD0',
+                MediumOrange: '#FFB965',
             },
             fontFamily: {
                 Heading: 'Magilio',