feat: displaying project created datetime in project component

prestidigitateur · Jan 28, 2023 · 2bbfdce · 2bbfdce
1 parent 486376a
commit 2bbfdce
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git 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
@@ -5,13 +5,15 @@ 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,
   title,
   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
@@ -89,6 +89,7 @@ export const ProjectsList: React.FC<ProjectsListProps> = ({ selectedTags }) => {
                 title={project.title}
                 tags={project.tags}
                 author={project.author.name}
+                createdAt={project.createdAt}
               />
             ))}
           </>