card updates

packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { useHistory } from "react-router-dom";
 import Card from "../Card";
 import AudioPlayer from "components/common/AudioPlayer";
+import useTimeAgo from "hooks/useTimeAgo";
 
 interface AudioCardProps {
   data: any;
@@ -19,9 +20,15 @@ export default function AudioCard({ data, to }: AudioCardProps) {
     event.stopPropagation();
   };
 
+  const timeAgo = useTimeAgo(data.created_at);
+
   return (
     <Card padding={true} onClick={handleCardClick}>
-      <h6 className="fw-semibold text-white mb-3">{data.weight_name}</h6>
+      <div className="mb-3">
+        <h6 className="fw-semibold text-white mb-1">{data.weight_name}</h6>
+        <p className="fs-7 opacity-75">{timeAgo}</p>
+      </div>
+
       <div onClick={handleInnerClick}>
         <AudioPlayer src={data.public_bucket_path} />
       </div>

packages/fakeyou.com/src/components/common/Card/Card.scss

@@ -10,9 +10,11 @@
 
   .card-img {
     width: 100%;
-    transition: 0.2s;
+    transition: 0.4s ease;
     object-fit: cover;
     object-position: center;
+    min-height: 300px;
+    max-height: 500px;
   }
 
   .card-image-overlay {
@@ -39,8 +41,6 @@
     right: 0;
     padding: 1rem;
     color: $white;
-    font-weight: 500;
-    font-size: 1.2rem;
     text-shadow: 0 0 10px black;
   }
 
@@ -51,7 +51,7 @@
     }
 
     &:hover > .card-img {
-      transform: scale(1.04);
+      transform: scale(1.05);
     }
   }
 }

packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useHistory } from "react-router-dom";
 import Card from "../Card";
+import useTimeAgo from "hooks/useTimeAgo";
 
 interface ImageCardProps {
   data: any;
@@ -14,9 +15,7 @@ export default function ImageCard({ data, to }: ImageCardProps) {
     history.push(to);
   };
 
-  // const handleInnerClick = (event: any) => {
-  //   event.stopPropagation();
-  // };
+  const timeAgo = useTimeAgo(data.created_at);
 
   return (
     <Card padding={false} onClick={handleCardClick}>
@@ -26,8 +25,13 @@ export default function ImageCard({ data, to }: ImageCardProps) {
         className="card-img"
       />
       <div className="card-image-overlay">
-        <div className="card-image-gradient"></div>
-        <div className="card-image-overlay-text">{data.weight_name}</div>
+        <div className="card-image-gradient" />
+        <div className="card-image-overlay-text">
+          <div>
+            <h6 className="fw-semibold text-white mb-1">{data.weight_name}</h6>
+            <p className="fs-7 opacity-75">{timeAgo}</p>
+          </div>
+        </div>
       </div>
     </Card>
   );

packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/mockData.ts

@@ -6,6 +6,7 @@ const mockData = [
     public_bucket_path: "/path/to/audio.mp3",
     favorites: 150,
     liked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 2,
@@ -14,6 +15,7 @@ const mockData = [
     public_bucket_path: "/images/dummy-image.jpg",
     favorites: 200,
     liked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 3,
@@ -22,6 +24,7 @@ const mockData = [
     public_bucket_path: "/path/to/audio.mp3",
     favorites: 200,
     liked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 4,
@@ -30,14 +33,16 @@ const mockData = [
     public_bucket_path: "/path/to/audio.mp3",
     favorites: 150,
     liked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 5,
-    weight_name: "Ash Ketchum",
+    weight_name: "3D Cat",
     media_type: "image",
     public_bucket_path: "/images/dummy-image-2.jpg",
     favorites: 200,
     liked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 6,
@@ -46,6 +51,7 @@ const mockData = [
     public_bucket_path: "/path/to/image.jpg",
     favorites: 200,
     liked: false,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 7,
@@ -54,14 +60,16 @@ const mockData = [
     public_bucket_path: "/path/to/audio.mp3",
     favorites: 150,
     liked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 8,
-    weight_name: "Image Test",
+    weight_name: "Astronaut in Space",
     media_type: "image",
     public_bucket_path: "/images/dummy-image-3.jpg",
     favorites: 150,
     liked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 9,
@@ -70,6 +78,7 @@ const mockData = [
     public_bucket_path: "/path/to/audio.mp3",
     favorites: 150,
     liked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
   {
     id: 10,
@@ -78,6 +87,7 @@ const mockData = [
     public_bucket_path: "/images/dummy-image-4.jpg",
     favorites: 150,
     liked: true,
+    created_at: "2023-08-10T09:00:00.000Z",
   },
 ];