From fff52ecbd5a9159c697d8eb038060ca4ddbb94c5 Mon Sep 17 00:00:00 2001
From: Kielx <kiel66@gmail.com>
Date: Mon, 16 May 2022 22:57:42 +0200
Subject: [PATCH] Merge postcard with minipostcard

---
 components/PostCard.tsx | 65 +++++++++++++++++++++++++++++------------
 pages/index.tsx         | 11 +++----
 2 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/components/PostCard.tsx b/components/PostCard.tsx
index dcffd4b..560f15c 100644
--- a/components/PostCard.tsx
+++ b/components/PostCard.tsx
@@ -4,7 +4,14 @@ import Link from 'next/link'
 import { useInView } from 'react-intersection-observer'
 import LazyLoad from 'react-lazyload'
 
+export enum Size {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+}
+
 type Props = {
+  size: Size
   slug: string
   coverImage: string
   placeholder: string
@@ -14,7 +21,7 @@ type Props = {
   keywords: string[]
 }
 
-const Post: React.FC<Props> = ({
+export const PostCard: React.FC<Props> = ({
   slug,
   coverImage,
   placeholder,
@@ -22,6 +29,7 @@ const Post: React.FC<Props> = ({
   excerpt,
   date,
   keywords,
+  size,
 }) => {
   const { ref, inView, entry } = useInView({
     /* Optional options */
@@ -32,6 +40,24 @@ const Post: React.FC<Props> = ({
   // Check if component is in default view
   const [initialView, setInitialView] = useState(true)
 
+  const linkClasses = {
+    small: `${
+      inView && !initialView && 'animate__fadeInUp animate__faster'
+    } animate__animated Post group relative col-span-12  cursor-pointer rounded-lg bg-white shadow transition-all hover:shadow-md md:col-span-4`,
+    medium: `${
+      inView && !initialView && 'animate__fadeInUp animate__faster'
+    } animate__animated Post group relative col-span-12  cursor-pointer rounded-lg bg-white shadow transition-all hover:shadow-md md:col-span-6`,
+    large: `Post group mainCard relative col-span-12  mx-auto  -mt-6 flex w-full cursor-pointer flex-wrap rounded-lg bg-white shadow transition-all hover:shadow-md md:col-span-12 md:flex-nowrap`,
+  }
+
+  const cardClasses = {
+    small: 'hidden h-40 w-full overflow-hidden  rounded-t-lg md:flex',
+    medium:
+      'flex h-40 w-full  overflow-hidden rounded-t-lg xs:h-[204px] md:h-[187px] xl:h-[266px]',
+    large:
+      ' mb-4 flex min-h-[30vh] w-full overflow-hidden rounded-t-lg  md:mb-0 md:h-auto md:min-h-[10vh] md:w-1/2 md:rounded-l-lg md:rounded-r-none',
+  }
+
   useEffect(() => {
     // If component is rendered to DOM and is not in the view, set initialView to false
     if (entry && !inView) {
@@ -42,15 +68,8 @@ const Post: React.FC<Props> = ({
   // Then in main function we check which posts are in view and toggle fadeIn animation class for that are not
   return (
     <Link href={`/posts/${slug}`} passHref>
-      <a
-        href="replace"
-        ref={ref}
-        className={`${
-          inView && !initialView && 'animate__fadeInUp animate__faster'
-        } animate__animated Post group relative col-span-12  cursor-pointer rounded-lg bg-white shadow transition-all hover:shadow-md md:col-span-6`}
-        key={slug}
-      >
-        <div className="flex h-40 w-full  overflow-hidden rounded-t-lg xs:h-[204px] md:h-[187px] xl:h-[266px]">
+      <a href="replace" ref={ref} className={linkClasses[size]} key={slug}>
+        <div className={cardClasses[size]}>
           <div className="cardImageContainer animate__animated animate__fadeIn animate__faster relative w-full">
             {coverImage.match(/.webm/) ? (
               <LazyLoad height="200">
@@ -72,7 +91,14 @@ const Post: React.FC<Props> = ({
                 layout="fill"
                 objectFit="contain"
                 objectPosition="center"
-                sizes="33vw"
+                sizes={`${
+                  // eslint-disable-next-line no-nested-ternary
+                  size === 'small'
+                    ? '25vw'
+                    : size === 'medium'
+                    ? '33vw'
+                    : '100vw'
+                }`}
               />
             )}
             <div className="overlay" />
@@ -80,16 +106,21 @@ const Post: React.FC<Props> = ({
         </div>
 
         <div className="flex flex-col rounded-lg p-4 shadow-none">
-          <h3 className=" text-start text-md font-extrabold text-primary transition-all hover:text-[#222] md:text-left md:text-xl">
+          <h3
+            className={`text-start text-md font-extrabold text-primary transition-all hover:text-[#222] md:text-left ${
+              size !== 'small' && 'md:text-xl'
+            }`}
+          >
             {title}
           </h3>
           <p className="text-xs text-secondary  transition-all group-hover:text-secondary">
             {date.split('-').reverse().join('-')}
           </p>
-
-          <p className="pt-2 text-xs text-secondary transition-all line-clamp-3 group-hover:text-secondary md:text-sm  lg:pt-4">
-            {excerpt}
-          </p>
+          {size !== 'small' && (
+            <p className="pt-2 text-xs text-secondary transition-all line-clamp-3 group-hover:text-secondary md:text-sm  lg:pt-4">
+              {excerpt}
+            </p>
+          )}
 
           <div className="flex flex-wrap pt-2">
             {keywords?.map((keyword) => (
@@ -106,5 +137,3 @@ const Post: React.FC<Props> = ({
     </Link>
   )
 }
-
-export default Post
diff --git a/pages/index.tsx b/pages/index.tsx
index dd47ac3..1468d4f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,9 +6,7 @@ import { getPlaiceholder } from 'plaiceholder'
 import fs from 'fs'
 import path from 'path'
 import matter from 'gray-matter'
-import MainPost from '../components/MainPostCard'
-import PostCard from '../components/PostCard'
-import MiniPostCard from '../components/MiniPostCard'
+import { Size, PostCard } from '../components/PostCard'
 import Head from '../components/Head'
 import Header from '../components/Header'
 import Hero from '../components/Hero'
@@ -83,7 +81,8 @@ const Home: NextPage<Props> = ({ postsCardsList, projectsCardsList }) => {
           {postsCardsList.map((post, index) => {
             if (index < 1) {
               return (
-                <MainPost
+                <PostCard
+                  size={Size.large}
                   key={post.slug}
                   slug={post.slug}
                   {...post.frontmatter}
@@ -93,6 +92,7 @@ const Home: NextPage<Props> = ({ postsCardsList, projectsCardsList }) => {
             if (index < 3) {
               return (
                 <PostCard
+                  size={Size.medium}
                   key={post.slug}
                   slug={post.slug}
                   {...post.frontmatter}
@@ -101,7 +101,8 @@ const Home: NextPage<Props> = ({ postsCardsList, projectsCardsList }) => {
             }
             if (index < 6) {
               return (
-                <MiniPostCard
+                <PostCard
+                  size={Size.small}
                   key={post.slug}
                   slug={post.slug}
                   {...post.frontmatter}