From 0efdc4a582418b5eff576e60003c2d248c6d9d4d Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Tue, 25 Jul 2023 04:58:45 +0800
Subject: [PATCH] Frontend: added compose tweet page

---
 frontend/pages/compose/tweet.vue | 23 ++++++++
 frontend/pages/index.vue         | 96 ++++++++++++++++++++++++--------
 2 files changed, 96 insertions(+), 23 deletions(-)
 create mode 100644 frontend/pages/compose/tweet.vue

diff --git a/frontend/pages/compose/tweet.vue b/frontend/pages/compose/tweet.vue
new file mode 100644
index 0000000..ae04bad
--- /dev/null
+++ b/frontend/pages/compose/tweet.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const back = () => {
+	navigateTo('/')
+}
+</script>
+
+<template>
+	<div>
+		<div class="flex h-14 w-full items-center justify-between px-4">
+			<Icon
+				name="back"
+				@click="back()" />
+			<!-- <input type="text" /> -->
+			<div></div>
+			<button
+				class="rounded-full bg-accent px-4 py-2 text-sm font-semibold">
+				<div> Tweet </div>
+			</button>
+		</div>
+		<div></div>
+		<BottomNavigationBar />
+	</div>
+</template>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 5c39aea..9d79c65 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,45 +1,95 @@
 <script setup lang="ts">
 definePageMeta({
-    middleware: ['auth'],
+	middleware: ['auth'],
 })
 
 const posts = usePosts()
 const openCreatePostModal = ref<Boolean>(false)
+const pageType = ref<'following' | 'for you'>('for you')
 
 const getPosts = async () => {
-    await fetchPosts()
+	await fetchPosts()
 }
 
 const toggleCreatePostModal = () => {
-    openCreatePostModal.value = !openCreatePostModal.value
+	openCreatePostModal.value = !openCreatePostModal.value
+}
+
+const changePageType = (type: 'following' | 'for you') => {
+	pageType.value = type
 }
 
 const createPost = () => {
-    toggleCreatePostModal()
+	navigateTo('/compose/tweet')
+	// toggleCreatePostModal()
 }
 
 onMounted(() => {
-    getPosts()
+	getPosts()
 })
 </script>
 
 <template>
-    <div>
-        <Header />
-        <div class="mt-16 flex w-full items-center justify-center">
-            <div class="flex w-full max-w-2xl flex-col gap-4 px-4 pb-16 pt-4">
-                <div v-if="posts" v-for="post in posts">
-                    <PostCard :title="post.title" :description="post.description" :created_at="post.created_at"
-                        :user="post.user" />
-                </div>
-                <button @click="getPosts()"> More </button>
-            </div>
-        </div>
-        <button @click="createPost()"
-            class="fixed bottom-6 right-6 flex items-center justify-center gap-2 rounded-full bg-blue-500 p-4">
-            <Icon name="plus" />
-            Create Post
-        </button>
-        <ModalCreatePost v-if="openCreatePostModal" @close="toggleCreatePostModal()" />
-    </div>
+	<div>
+		<Header />
+		<div class="sticky top-0 flex bg-primary text-center">
+			<div
+				@click="changePageType('for you')"
+				class="flex w-full flex-col items-center hover:bg-white/10">
+				<div>
+					<div
+						class="py-4"
+						:class="{
+							'font-bold': pageType === 'for you',
+						}">
+						For you
+					</div>
+					<div
+						class="w-full border-2 border-sky-500"
+						:class="{
+							invisible: pageType !== 'for you',
+						}">
+					</div>
+				</div>
+			</div>
+			<div
+				@click="changePageType('following')"
+				class="flex w-full flex-col items-center hover:bg-white/10">
+				<div>
+					<div
+						class="py-4"
+						:class="{
+							'font-bold': pageType === 'following',
+						}">
+						Following
+					</div>
+					<div
+						class="w-full border-2 border-sky-500"
+						:class="{
+							invisible: pageType !== 'following',
+						}">
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="mb-16 flex w-full items-center justify-center">
+			<div class="flex w-full max-w-2xl flex-col">
+				<div
+					v-if="posts"
+					v-for="post in posts">
+					<PostCard :post="post" />
+				</div>
+				<button @click="getPosts()">More</button>
+			</div>
+		</div>
+		<button
+			@click="createPost()"
+			class="fixed bottom-16 right-6 flex items-center justify-center gap-2 rounded-full bg-sky-500 p-4">
+			<Icon name="mdi:feather" />
+		</button>
+		<ModalCreatePost
+			v-if="openCreatePostModal"
+			@close="toggleCreatePostModal()" />
+		<BottomNavigationBar />
+	</div>
 </template>