From 2bbfdce3ca41c8b77aa1ca80c6ba55a2fd0c3aa0 Mon Sep 17 00:00:00 2001
From: rohitdasu <dasurohit123@gmail.com>
Date: Sat, 28 Jan 2023 22:02:54 +0530
Subject: [PATCH] feat: displaying project created datetime in project
 component

---
 components/Projects/Project.interface.ts |  1 +
 components/Projects/Project.tsx          | 36 ++++++++++++++++--------
 components/Projects/ProjectsList.tsx     |  1 +
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/components/Projects/Project.interface.ts b/components/Projects/Project.interface.ts
index 19845e6a..a0046b49 100644
--- a/components/Projects/Project.interface.ts
+++ b/components/Projects/Project.interface.ts
@@ -6,6 +6,7 @@ export type ProjectProps = {
   description: string;
   tags: string[];
   author: string | null;
+  createdAt: Date;
 };
 
 export interface IProject extends ProjectData {
diff --git a/components/Projects/Project.tsx b/components/Projects/Project.tsx
index d3659cb6..f8d3d595 100644
--- a/components/Projects/Project.tsx
+++ b/components/Projects/Project.tsx
@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';
 import { Button } from '@/components/Button';
 import { Typography } from '@/components/Typography';
+import moment from 'moment';
 
 export const Project = ({
   id,
@@ -12,6 +13,7 @@ export const Project = ({
   description,
   tags,
   author,
+  createdAt,
 }: ProjectProps) => {
   const router = useRouter();
   const handleContributeClick = () => {
@@ -29,18 +31,28 @@ export const Project = ({
     >
       <div className="flex h-full flex-col items-center overflow-hidden rounded-md">
         <div className="flex w-full grow flex-col gap-5 p-4 pt-4">
-          <Typography
-            as="h2"
-            fontSize="xl"
-            fontWeight="semibold"
-            className="min-w-[0] flex-1 flex-col gap-2 truncate text-gray-900 dark:text-gray-100"
-          >
-            {title}
-            <span className="flex items-center gap-1 text-sm font-light text-gray-900 dark:text-gray-100">
-              <AiOutlineUser />
-              {author}
-            </span>
-          </Typography>
+          <div className="flex flex-row items-start justify-between">
+            <Typography
+              as="h2"
+              fontSize="xl"
+              fontWeight="semibold"
+              className="min-w-[0] flex-1 flex-col gap-2 truncate text-gray-900 dark:text-gray-100"
+            >
+              {title}
+              <span className="flex items-center gap-1 text-sm font-light text-gray-900 dark:text-gray-100">
+                <AiOutlineUser />
+                {author}
+              </span>
+            </Typography>
+            <div className="flex flex-row items-center gap-1 text-gray-500 dark:text-gray-400">
+              <Typography as="span" fontSize="3xl">
+                ·
+              </Typography>
+              <Typography as="p" fontSize="sm" fontWeight="light">
+                {moment(createdAt).fromNow()}
+              </Typography>
+            </div>
+          </div>
           <Typography
             as="p"
             fontSize="sm"
diff --git a/components/Projects/ProjectsList.tsx b/components/Projects/ProjectsList.tsx
index c6c76193..aa7cb031 100644
--- a/components/Projects/ProjectsList.tsx
+++ b/components/Projects/ProjectsList.tsx
@@ -89,6 +89,7 @@ export const ProjectsList: React.FC<ProjectsListProps> = ({ selectedTags }) => {
                 title={project.title}
                 tags={project.tags}
                 author={project.author.name}
+                createdAt={project.createdAt}
               />
             ))}
           </>