frontend/components/Header.vue

@@ -45,31 +45,21 @@ const userOptions: Array<UserOption> = [
 
 <template>
     <div
-		class="flex h-14 w-screen items-center justify-between bg-primary px-4">
+        class="fixed top-0 flex h-16 w-screen items-center justify-between border-b-2 border-b-lightgray bg-secondary px-4">
+        <div class="flex gap-4">
+            <Icon name="twitter" />
+            <div class="font-bold"> Twitter Clone </div>
+        </div>
         <div class="relative">
-			<Icon
-				name="user"
-				size="36"
-				ref="userIcon"
-				@click="toggleUserOptions()" />
-			<div
-				v-if="showUserOptions"
-				ref="userOptionsCard"
-				class="absolute left-0 top-8 w-max border border-lightgray bg-secondary">
-				<div
-					v-for="userOption in userOptions"
+            <Icon name="user" size="28" ref="userIcon" @click="toggleUserOptions()" />
+            <div v-if="showUserOptions" ref="userOptionsCard"
+                class="absolute right-0 top-8 w-max border border-lightgray bg-secondary">
+                <div v-for="userOption in userOptions"
                     class="w-full min-w-[120px] border border-lightgray p-4 text-center hover:bg-lightgray"
                     @click="userOption.function()">
                     {{ userOption.title }}
                 </div>
             </div>
         </div>
-		<div class="flex gap-4">
-			<Icon
-				name="twitter"
-				size="28"
-				class="text-sky-500" />
-		</div>
-		<div class="invisible h-8 w-8"></div>
     </div>
 </template>

frontend/components/PostCard.vue

@@ -3,44 +3,31 @@ type Post = {
     user: {
         name: String
     }
+    title: 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 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">
+        <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>
-						{{ displayTime() }}
+                    {{ new Date(props.created_at).toLocaleString() }}
                 </div>
             </div>
-				<div class="h-full whitespace-pre-line">
-					{{ props.description }}
+            <div class="h-full truncate text-xl font-bold">
+                {{ props.title }}
             </div>
+            <div class="h-full">
+                {{ props.description }}
             </div>
         </div>
     </div>