Added Header.vue

frontend/app.config.ts

@@ -1,10 +1,12 @@
 export default defineAppConfig({
-	nuxtIcon: {
+    nuxtIcon: {
-		size: '24px', // default <Icon> size applied
+        size: '24px', // default <Icon> size applied
-		class: 'icon', // default <Icon> class applied
+        class: 'icon', // default <Icon> class applied
-		aliases: {
+        aliases: {
-			nuxt: 'logos:nuxt-icon',
+            nuxt: 'logos:nuxt-icon',
-			loading: 'svg-spinners:90-ring-with-bg',
+            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

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 type Post = {
-  title: String
+    title: String
-  description: String | null | undefined
+    description: String | null | undefined
 }
 
 const props = defineProps<Post>()
 </script>
 
 <template>
-  <div>
+    <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">
+            <div class="h-full truncate text-xl font-bold">
-        {{ props.title }}
+                {{ props.title }}
-      </div>
+            </div>
-      <div class="h-full">
+            <div class="h-full">
-        {{ props.description }}
+                {{ props.description }}
-      </div>
+            </div>
+        </div>
     </div>
-  </div>
 </template>

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 }} -->
+        <Header />
-        <div class="flex w-full items-center justify-center">
+        <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-2 2xl:w-1/3">
+            <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>

frontend/tailwind.config.ts

@@ -1,16 +1,16 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: [],
+    content: [],
-	important: false,
+    important: false,
-	theme: {
+    theme: {
-		extend: {
+        extend: {
-			colors: {
+            colors: {
-				primary: '#000000',
+                primary: '#000000',
-				secondary: '#0c0c0d',
+                secondary: '#0c0c0d',
-				darkgray: '#18181b',
+                darkgray: '#18181b',
-				lightgray: '#27272a',
+                lightgray: '#27272a',
-				light: '#e5e7eb',
+                light: '#e5e7eb',
-			},
+            },
-		},
+        },
-	},
+    },
 }