Merge pull request #99 from AVAnnotate/lwj/project-card-last-edited

Add last edited date to Project Card
AVAnnotate · Sep 17, 2024 · 6af0f1f · 6af0f1f
2 parents 686fac8 + 6fb1218
commit 6af0f1f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 5 deletions.
diff --git a/src/apps/Projects/ProjectsGrid/ProjectsGrid.tsx b/src/apps/Projects/ProjectsGrid/ProjectsGrid.tsx
@@ -12,7 +12,7 @@ export const ProjectsGrid = (props: ProjectsGridProps) => {
   return (
     <div className='projects-grid-container' id='grid'>
       {props.projects.map((p) => (
-        <ProjectCard project={p} lang={props.i18n.lang} key={p.project.slug} />
+        <ProjectCard project={p} i18n={props.i18n} key={p.project.slug} />
       ))}
     </div>
   );

diff --git a/src/components/ProjectCard/ProjectCard.css b/src/components/ProjectCard/ProjectCard.css
@@ -23,6 +23,14 @@
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   box-shadow: 0 2px 2px 0 var(--gray-300);
+  position: relative;
+}
+
+.project-card-last-edited {
+  position: absolute;
+  bottom: 0;
+  right: 8px;
+  padding-bottom: 3px;
 }
 
 .project-card-footer {
@@ -44,6 +52,7 @@
   overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   display: -webkit-box;
 }
 

diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -1,26 +1,34 @@
-import type { ProjectData } from '@ty/Types.ts';
+import type { ProjectData, Translations } from '@ty/Types.ts';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
 import './ProjectCard.css';
 import { Avatar } from '@components/Avatar/Avatar.tsx';
 
 type ProjectCardProps = {
   project: ProjectData;
-  lang: string;
+  i18n: Translations;
 };
 
 export const ProjectCard = (props: ProjectCardProps) => {
+  const { t, lang } = props.i18n;
+
   return (
     <div className='project-card-container'>
       <a
         className='project-card-link'
-        href={`/${props.lang}/projects/${props.project.project.github_org}+${props.project.project.slug}`}
+        href={`/${lang}/projects/${props.project.project.github_org}+${props.project.project.slug}`}
       >
         <div className='project-card-header'>
           <h3>{props.project.project.title}</h3>
           <div className='project-card-description av-body-small'>
             {props.project.project.description}
           </div>
+          <div className='project-card-last-edited av-body-small-italic'>
+            {`${t['Last Edited']} ${new Date(
+              props.project.project.updated_at ||
+                props.project.project.created_at
+            ).toLocaleDateString('en-US')}`}
+          </div>
         </div>
         <div className='project-card-footer'>
           <Tooltip.Provider delayDuration={0}>

diff --git a/src/i18n/en/projects.json b/src/i18n/en/projects.json
@@ -20,5 +20,6 @@
   "Disable Auto-Generation": "Disable Auto-Generation",
   "Re-Enable Auto-Generation": "Re-Enable Auto-Generation",
   "home": "Home",
-  "event": "Event"
+  "event": "Event",
+  "Last Edited": "Last Edited"
 }
diff --git a/src/themes/default/index.css b/src/themes/default/index.css
@@ -178,6 +178,13 @@ h3 {
   font-size: 10px;
 }
 
+.av-body-small-italic {
+  font-family: Inter;
+  font-size: 14px;
+  font-weight: 400;
+  font-style: italic;
+}
+
 p {
   margin: 0.8em 0;
   padding: 0;