Added Header.vue

frontend/app.config.ts

@@ -5,6 +5,8 @@ export default defineAppConfig({
         aliases: {
             nuxt: 'logos:nuxt-icon',
             loading: 'svg-spinners:90-ring-with-bg',
+            twitter: 'logos:twitter',
+            github: 'mdi:github',
         },
     },
 })

frontend/components/Header.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const openUrl = (url: string) => {
+    window.open(url, '_blank')
+}
+</script>
+
+<template>
+    <div
+        class="bg-secondary border-b-lightgray fixed top-0 flex h-16 w-screen items-center justify-between border-b-2 px-4">
+        <div class="flex gap-4">
+            <Icon name="twitter" />
+            <div class="font-bold"> Twitter Clone </div>
+        </div>
+        <div>
+            <Icon name="github" @click="openUrl('https://github.com/TZGyn/twitter-clone')" />
+        </div>
+    </div>
+</template>

frontend/components/PostCard.vue

@@ -9,7 +9,7 @@ const props = defineProps<Post>()
 
 <template>
     <div>
-    <div class="flex w-full flex-col gap-6 bg-secondary p-6">
+        <div class="flex w-full flex-col gap-6 rounded-md border border-lightgray bg-secondary p-6">
             <div class="h-full truncate text-xl font-bold">
                 {{ props.title }}
             </div>

frontend/pages/index.vue

@@ -4,6 +4,7 @@ definePageMeta({
 })
 
 import { z } from 'zod'
+
 type Posts = z.infer<typeof PostsValidator>
 
 const posts = ref<Posts>([])
@@ -29,6 +30,11 @@ const getPosts = async () => {
     lastPost.value = posts.value[posts.value.length - 1].sequence
 }
 
+const logout = async () => {
+    await userLogout()
+    useRouter().push('/login')
+}
+
 onMounted(() => {
     getPosts()
 })
@@ -36,9 +42,9 @@ onMounted(() => {
 
 <template>
     <div>
-        <!-- {{ posts }} -->
-        <div class="flex w-full items-center justify-center">
-            <div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-2 2xl:w-1/3">
+        <Header />
+        <div class="mt-16 flex w-full items-center justify-center">
+            <div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-4 2xl:w-1/3">
                 <div v-if="posts" v-for="post in posts">
                     <PostCard :title="post.title" :description="post.description" />
                 </div>