From 496f7833775549e51276c2ae3ab583df44d7ac29 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Tue, 19 Jan 2021 00:46:01 +0100
Subject: [PATCH] Update card styles

---
 components/Card.tsx | 42 ++++++++++++++++++++++++++++++++----------
 pages/index.tsx     | 16 ++++++++++------
 2 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/components/Card.tsx b/components/Card.tsx
index 18f65d1..43f1255 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -1,17 +1,19 @@
 import { FC, useContext } from 'react';
 import { DarkModeContext } from '../components/DarkMode';
 import styled from 'styled-components';
+import Image from 'next/image';
 
 interface Props {
 	title: string;
 	description: string;
+	image?: string;
 	tags?: string[];
 	onClick?: () => void;
 }
 
 const StyledCard = styled.div<{ dark: boolean }>`
 	cursor: pointer;
-	padding: 1rem;
+	padding: 1rem 0rem;
 	width: 100%;
 	display: grid;
 	align-items: center;
@@ -20,7 +22,7 @@ const StyledCard = styled.div<{ dark: boolean }>`
 	transition: box-shadow 250ms ease-in-out, color 0ms ease-in-out;
 
 	@media (max-width: 768px) {
-		padding: 0.5rem;
+		padding: 0.5rem 0rem;
 	}
 
 	&:hover {
@@ -29,6 +31,25 @@ const StyledCard = styled.div<{ dark: boolean }>`
 		box-shadow: ${({ dark }) => !dark && '5px 2px 26px 6px rgba(21, 115, 202, 0.30)'};
 	}
 
+	div {
+		display: grid;
+		row-gap: 0.5rem;
+	}
+
+	h3,
+	p,
+	.tags-wrapper {
+		padding: 0rem 1rem;
+
+		@media (max-width: 768px) {
+			padding: 0rem 0.5rem;
+		}
+	}
+
+	h3 {
+		font-size: 1.3rem;
+	}
+
 	.tags-wrapper {
 		display: flex;
 		flex-direction: row;
@@ -36,26 +57,27 @@ const StyledCard = styled.div<{ dark: boolean }>`
 		flex-wrap: wrap;
 	}
 
-	h3 {
-		font-size: 1.3rem;
-	}
-
 	span {
 		font-size: 0.7rem;
 	}
 `;
 
-const Card: FC<Props> = ({ title, description, tags, onClick }) => {
+const Card: FC<Props> = ({ title, description, image, tags, onClick }) => {
 	const { dark } = useContext(DarkModeContext);
 
 	return (
 		<StyledCard dark={dark} onClick={onClick}>
 			<div>
 				<h3>{title}</h3>
+				{image && (
+					<Image src={image} className='image' width='auto' height='auto' layout='responsive' />
+				)}
 				<p>{description}</p>
-				<div className='tags-wrapper'>
-					{tags && tags.map((tag, index) => <span key={index}>#{tag}&nbsp;</span>)}
-				</div>
+				{tags && (
+					<div className='tags-wrapper'>
+						{tags && tags.map((tag, index) => <span key={index}>#{tag}&nbsp;</span>)}
+					</div>
+				)}
 			</div>
 		</StyledCard>
 	);
diff --git a/pages/index.tsx b/pages/index.tsx
index 23dedc9..1fa993d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -106,9 +106,11 @@ const Index: FC<Props> = ({ blogPosts, portfolioProjects }) => {
 					<div className='portfolio'>
 						<div className='projects-wrapper'>
 							{portfolioProjects.length !== 0 ? (
-								portfolioProjects.map(({ slug, ...rest }) => (
-									<Card {...rest} key={slug} onClick={() => router.push(`/portfolio/${slug}`)} />
-								))
+								portfolioProjects
+									.slice(0, 3)
+									.map(({ slug, ...rest }) => (
+										<Card {...rest} key={slug} onClick={() => router.push(`/portfolio/${slug}`)} />
+									))
 							) : (
 								<h4>Nothing for now</h4>
 							)}
@@ -121,9 +123,11 @@ const Index: FC<Props> = ({ blogPosts, portfolioProjects }) => {
 					<div className='blog'>
 						<div className='articles-wrapper'>
 							{blogPosts.length !== 0 ? (
-								blogPosts.map(({ slug, ...rest }) => (
-									<Card {...rest} key={slug} onClick={() => router.push(`/blog/${slug}`)} />
-								))
+								blogPosts
+									.slice(0, 3)
+									.map(({ slug, ...rest }) => (
+										<Card {...rest} key={slug} onClick={() => router.push(`/blog/${slug}`)} />
+									))
 							) : (
 								<h4>Nothing for now</h4>
 							)}