From 0684ab36f2934344ff96cd6aa046df1628c5d39c Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Fri, 7 Jul 2023 08:35:44 +0800
Subject: [PATCH] Frontend: update postcard ui (color and layout)

---
 frontend/components/PostCard.vue | 63 +++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 25 deletions(-)

diff --git a/frontend/components/PostCard.vue b/frontend/components/PostCard.vue
index e16ff49..59947de 100644
--- a/frontend/components/PostCard.vue
+++ b/frontend/components/PostCard.vue
@@ -1,34 +1,47 @@
 <script setup lang="ts">
 type Post = {
-    user: {
-        name: String
-    }
-    title: String
-    description: String
-    created_at: string
+	user: {
+		name: String
+	}
+	description: String
+	created_at: string
 }
 
 const props = defineProps<Post>()
+
+const now = new Date().toLocaleDateString()
+
+const postTime = new Date(props.created_at)
+
+const displayTime = () => {
+    if (now == postTime.toLocaleDateString()) {
+        return postTime.toLocaleTimeString()
+    }
+    return postTime.toLocaleDateString()
+}
 </script>
 
 <template>
-    <div>
-        <div class="flex w-full flex-col gap-6 rounded-md border border-lightgray bg-secondary p-6">
-            <div class="flex justify-between">
-                <div class="flex h-full gap-4">
-                    <Icon name="user" />
-                    {{ props.user.name }}
-                </div>
-                <div>
-                    {{ new Date(props.created_at).toLocaleString() }}
-                </div>
-            </div>
-            <div class="h-full truncate text-xl font-bold">
-                {{ props.title }}
-            </div>
-            <div class="h-full">
-                {{ props.description }}
-            </div>
-        </div>
-    </div>
+	<div>
+		<div class="flex w-full gap-4 border border-lightgray p-6">
+			<div>
+				<Icon
+					name="user"
+					size="40" />
+			</div>
+			<div class="flex w-full flex-col gap-2">
+				<div class="flex w-full justify-between">
+					<div class="flex h-full gap-4 font-bold">
+						{{ props.user.name }}
+					</div>
+					<div>
+						{{ displayTime() }}
+					</div>
+				</div>
+				<div class="h-full whitespace-pre-line">
+					{{ props.description }}
+				</div>
+			</div>
+		</div>
+	</div>
 </template>