frontend/components/Header.vue

@@ -4,72 +4,62 @@ const userIcon = ref()
 const showUserOptions = ref<Boolean>(false)
 
 const toggleUserOptions = () => {
-	showUserOptions.value = !showUserOptions.value
+    showUserOptions.value = !showUserOptions.value
 }
 
 onClickOutside(
-	userOptionsCard,
+    userOptionsCard,
-	() => {
+    () => {
-		toggleUserOptions()
+        toggleUserOptions()
-	},
+    },
-	{ ignore: [userIcon] }
+    { ignore: [userIcon] }
 )
 
 const logout = async () => {
-	await userLogout()
+    await userLogout()
-	useRouter().push('/login')
+    useRouter().push('/login')
 }
 
 type UserOption = {
-	title: string
+    title: string
-	function: () => void
+    function: () => void
 }
 
 const userOptions: Array<UserOption> = [
-	{
+    {
-		title: 'Github',
+        title: 'Github',
-		function: () => {
+        function: () => {
-			openUrl('https://github.com/TZGyn')
+            openUrl('https://github.com/TZGyn')
-			toggleUserOptions()
+            toggleUserOptions()
-		},
+        },
-	},
+    },
-	{
+    {
-		title: 'Log Out',
+        title: 'Log Out',
-		function: async () => {
+        function: async () => {
-			await logout()
+            await logout()
-			toggleUserOptions()
+            toggleUserOptions()
-		},
+        },
-	},
+    },
 ]
 </script>
 
 <template>
-	<div
+    <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="relative">
+        <div class="flex gap-4">
-			<Icon
+            <Icon name="twitter" />
-				name="user"
+            <div class="font-bold"> Twitter Clone </div>
-				size="36"
+        </div>
-				ref="userIcon"
+        <div class="relative">
-				@click="toggleUserOptions()" />
+            <Icon name="user" size="28" ref="userIcon" @click="toggleUserOptions()" />
-			<div
+            <div v-if="showUserOptions" ref="userOptionsCard"
-				v-if="showUserOptions"
+                class="absolute right-0 top-8 w-max border border-lightgray bg-secondary">
-				ref="userOptionsCard"
+                <div v-for="userOption in userOptions"
-				class="absolute left-0 top-8 w-max border border-lightgray bg-secondary">
+                    class="w-full min-w-[120px] border border-lightgray p-4 text-center hover:bg-lightgray"
-				<div
+                    @click="userOption.function()">
-					v-for="userOption in userOptions"
+                    {{ userOption.title }}
-					class="w-full min-w-[120px] border border-lightgray p-4 text-center hover:bg-lightgray"
+                </div>
-					@click="userOption.function()">
+            </div>
-					{{ userOption.title }}
+        </div>
-				</div>
+    </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

@@ -1,47 +1,34 @@
 <script setup lang="ts">
 type Post = {
-	user: {
+    user: {
-		name: String
+        name: String
-	}
+    }
-	description: String
+    title: String
-	created_at: 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>
-		<div class="flex w-full gap-4 border border-lightgray p-6">
+        <div class="flex w-full flex-col gap-6 rounded-md border border-lightgray bg-secondary p-6">
-			<div>
+            <div class="flex justify-between">
-				<Icon
+                <div class="flex h-full gap-4">
-					name="user"
+                    <Icon name="user" />
-					size="40" />
+                    {{ props.user.name }}
-			</div>
+                </div>
-			<div class="flex w-full flex-col gap-2">
+                <div>
-				<div class="flex w-full justify-between">
+                    {{ new Date(props.created_at).toLocaleString() }}
-					<div class="flex h-full gap-4 font-bold">
+                </div>
-						{{ props.user.name }}
+            </div>
-					</div>
+            <div class="h-full truncate text-xl font-bold">
-					<div>
+                {{ props.title }}
-						{{ displayTime() }}
+            </div>
-					</div>
+            <div class="h-full">
-				</div>
+                {{ props.description }}
-				<div class="h-full whitespace-pre-line">
+            </div>
-					{{ props.description }}
+        </div>
-				</div>
+    </div>
-			</div>
-		</div>
-	</div>
 </template>