Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Story] Homepage - Responsive BlogPost component and Homepage #6

Merged
merged 5 commits into from
Jul 20, 2022
Merged

[Story] Homepage - Responsive BlogPost component and Homepage #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
80f4bef
feat: add BlogPost component
shafiranaya Jul 19, 2022
5b7d974
add props & delete antd
shafiranaya Jul 19, 2022
1781060
Merge branch 'master' of https://github.com/KATITB22/announcement-lms…
shafiranaya Jul 19, 2022
5ae31ba
change BlogPost using tailwind
shafiranaya Jul 20, 2022
e987e66
Merge branch 'master' into story/homepage
shafiranaya Jul 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 53 additions & 33 deletions src/components/BlogPost.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,61 @@
import React from 'react';
import { Box, 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;
const { title, date, author, description, imageUrl, link, tags } = props;
return (
<Stack 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>
</Stack>
<div
className="
overflow-hidden
shadow-lg
transition
duration-500
ease-in-out
transform
hover:shadow-2xl
rounded-lg
md:w-85
"
>
<img
alt={title}
src={imageUrl}
className="max-h-40 w-full object-cover"
/>
<div className="bg-white w-full p-4">
<p className="font-Body text-body font-normal mb-2">
{date} | Posted by {author}
</p>
<a href={link} className="font-Heading text-h6 font-semibold">
{title}
</a>
<p className="font-Body text-body font-normal">{description}</p>
<a
className="font-Caption text-body font-semibold hover:text-Orange"
href={link}
>
Read More
</a>
{tags ? (
<div className="flex items-center mt-2">
{tags.map((tag: string) => (
// TODO: change # to tags link
<a
href="#"
className="m-1 px-2 py-1 rounded bg-Orange text-white hover:text-black"
>
{tag}
</a>
))}
</div>
) : (
<div className="flex items-center mt-2 bg-White">
<div className="pl-2 bg-White"></div>
</div>
)}
</div>
</div>
);
};

Expand Down
107 changes: 99 additions & 8 deletions src/pages/Homepage/Homepage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,40 @@ export const listOfPosts: Post[] = [
'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.',
},
{
title: 'Post Title',
title: '0. Post Title',
date: '19 Jul 2022',
author: 'Mamet KAT ITB',
imageUrl:
'https://images.unsplash.com/photo-1542435503-956c469947f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&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.',
tags: ['sponsor', 'materi', 'oskm'],
},
{
title: '1. 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.',
tags: ['sponsor', 'materi', 'oskm'],
},
{
title: '2. 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.',
tags: ['sponsor', 'materi', 'oskm'],
},
{
title: '3. Post Title',
date: '19 Jul 2022',
author: 'Mamet KAT ITB',
imageUrl:
Expand All @@ -43,13 +76,71 @@ export const listOfPosts: Post[] = [
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.',
},
{
title: '4. 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.',
tags: ['sponsor', 'materi', 'oskm'],
},
{
title: '5. 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 lorem lorem. Ipsum odlor sit amet. Lorem lorem lorem. Ipsum odlor sit amet. Lorem lorem lorem. Ipsum odlor sit amet. Lorem lorem lorem. Ipsum odlor sit amet. 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.',
},
{
title: '6. 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.',
tags: ['sponsor', 'materi', 'oskm', 'mamet'],
},
];
const Homepage: React.FC<{}> = () => (
<>
{listOfPosts.map((item: Post) => (
<BlogPost {...item} />
))}
</>
);

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}
tags={item.tags}
/>
));
return (
<div>
<div className="py-20 bg-Yellow">
<div className="container mx-auto px-6">
<h1 className="text-4xl font-bold mb-2 text-center">
Announcement
</h1>
</div>
</div>
<div className="bg-gradient-to-b from-[#FF8952] to-[#F9DCB0] py-20">
<div className="container max-w-screen-lg min-h-screen mx-auto px-[3.75rem]">
<div className="grid justify-center xl:grid-cols-2 lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-1 gap-4">
{blogPostElements}
</div>
</div>
</div>
</div>
);
};


export default Homepage;
1 change: 1 addition & 0 deletions src/types/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export type Post = {
description: string;
imageUrl: string;
link: string; // link to detail post
tags: string[];
};

export type paragraph = string;