Compare commits
No commits in common. 'd70b2e49d3ce5d58dafad18327336958bf0d863e' and 'c80c794002dc08f4ef25879f742bed174a808042' have entirely different histories.
d70b2e49d3
...
c80c794002
@ -1,40 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
type Navigation = {
|
|
||||||
path: string
|
|
||||||
icon: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const options: Navigation[] = [
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
icon: 'home',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
icon: 'search',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
icon: 'bell',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
icon: 'mail',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
class="fixed bottom-0 flex w-full justify-between gap-6 border border-lightgray bg-primary px-8 py-2">
|
|
||||||
<div
|
|
||||||
v-for="option in options"
|
|
||||||
@click="navigateTo(option.path)">
|
|
||||||
<Icon
|
|
||||||
:name="option.icon"
|
|
||||||
size="32" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,95 +1,45 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
middleware: ['auth'],
|
middleware: ['auth'],
|
||||||
})
|
})
|
||||||
|
|
||||||
const posts = usePosts()
|
const posts = usePosts()
|
||||||
const openCreatePostModal = ref<Boolean>(false)
|
const openCreatePostModal = ref<Boolean>(false)
|
||||||
const pageType = ref<'following' | 'for you'>('for you')
|
|
||||||
|
|
||||||
const getPosts = async () => {
|
const getPosts = async () => {
|
||||||
await fetchPosts()
|
await fetchPosts()
|
||||||
}
|
}
|
||||||
|
|
||||||
const toggleCreatePostModal = () => {
|
const toggleCreatePostModal = () => {
|
||||||
openCreatePostModal.value = !openCreatePostModal.value
|
openCreatePostModal.value = !openCreatePostModal.value
|
||||||
}
|
|
||||||
|
|
||||||
const changePageType = (type: 'following' | 'for you') => {
|
|
||||||
pageType.value = type
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const createPost = () => {
|
const createPost = () => {
|
||||||
navigateTo('/compose/tweet')
|
toggleCreatePostModal()
|
||||||
// toggleCreatePostModal()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getPosts()
|
getPosts()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Header />
|
<Header />
|
||||||
<div class="sticky top-0 flex bg-primary text-center">
|
<div class="mt-16 flex w-full items-center justify-center">
|
||||||
<div
|
<div class="flex w-full max-w-2xl flex-col gap-4 px-4 pb-16 pt-4">
|
||||||
@click="changePageType('for you')"
|
<div v-if="posts" v-for="post in posts">
|
||||||
class="flex w-full flex-col items-center hover:bg-white/10">
|
<PostCard :title="post.title" :description="post.description" :created_at="post.created_at"
|
||||||
<div>
|
:user="post.user" />
|
||||||
<div
|
</div>
|
||||||
class="py-4"
|
<button @click="getPosts()"> More </button>
|
||||||
:class="{
|
</div>
|
||||||
'font-bold': pageType === 'for you',
|
</div>
|
||||||
}">
|
<button @click="createPost()"
|
||||||
For you
|
class="fixed bottom-6 right-6 flex items-center justify-center gap-2 rounded-full bg-blue-500 p-4">
|
||||||
</div>
|
<Icon name="plus" />
|
||||||
<div
|
Create Post
|
||||||
class="w-full border-2 border-sky-500"
|
</button>
|
||||||
:class="{
|
<ModalCreatePost v-if="openCreatePostModal" @close="toggleCreatePostModal()" />
|
||||||
invisible: pageType !== 'for you',
|
</div>
|
||||||
}">
|
|
||||||
</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>
|
</template>
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
definePageMeta({
|
|
||||||
middleware: ['auth'],
|
|
||||||
})
|
|
||||||
|
|
||||||
const user = useUser()
|
|
||||||
|
|
||||||
const deleteUser = async () => {
|
|
||||||
await userDelete()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<button @click="deleteUser()">Delete Account</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
Loading…
Reference in New Issue