arthur/website
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website.git synced 2026-02-02 13:17:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add modal

Browse Source
This commit is contained in:
Arthur Danjou
2023-12-14 22:15:49 +01:00
parent 12a6757df3
commit 35710a3005
1 changed files with 59 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/guestbook.vue
View File

@@ -9,6 +9,8 @@ useHead({
const { loggedIn, clear, user } = useUserSession() const { loggedIn, clear, user } = useUserSession()
const { data: messages, refresh } = useFetch<Array<GuestbookMessage>>('/api/messages', { method: 'get' }) const { data: messages, refresh } = useFetch<Array<GuestbookMessage>>('/api/messages', { method: 'get' })
const isOpen = ref(false)
const toast = useToast() const toast = useToast()
const messageContent = ref<string>('') const messageContent = ref<string>('')
async function sign() { async function sign() {
@@ -40,6 +42,7 @@ async function deleteMessage(id: number) {
if (!user.value.admin) if (!user.value.admin)
return return
isOpen.value = false
await $fetch('/api/message', { await $fetch('/api/message', {
method: 'delete', method: 'delete',
body: { body: {
@@ -63,7 +66,7 @@ async function deleteMessage(id: number) {
</script> </script>
<template> <template>
<section class="w-container lg:my-24 my-16"> <section class="w-container lg:mt-24 my-8">
<div class="max-w-2xl space-y-8 mb-16"> <div class="max-w-2xl space-y-8 mb-16">
<h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight"> <h1 class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl !leading-tight">
You want to leave a message ? You want to leave a message ?
@@ -72,18 +75,21 @@ async function deleteMessage(id: number) {
Your opinion means a lot to me. Feel free to share your impressions of my projects, explore my site, or simply leave a personalised message. Your comments are a source of inspiration and continuous improvement. Thank you for taking the time to contribute to this virtual community. I look forward to reading what you have to share! Your opinion means a lot to me. Feel free to share your impressions of my projects, explore my site, or simply leave a personalised message. Your comments are a source of inspiration and continuous improvement. Thank you for taking the time to contribute to this virtual community. I look forward to reading what you have to share!
</p> </p>
</div> </div>
<div class="my-12 flex flex-col rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"> <UButton class="mb-8" label="Want to sign my book ?" icon="i-ph-circle-wavy-question-bold" @click.prevent="isOpen = true" />
<div class="flex flex-col mb-4"> <UModal v-model="isOpen">
<UCard>
<template #header>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<UIcon name="i-ph-circle-wavy-question-bold" class="text-subtitle text-xl" /> <UIcon name="i-ph-circle-wavy-question-bold" class="text-subtitle text-xl" />
<h1 class="text-lg font-bold"> <h1 class="text-md font-bold">
Want to sign my book ? Enter just below your message to sign my book
</h1> </h1>
</div> </div>
<p class="font-sm text-subtitle"> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
Enter your message just below to sign the book.
</p>
</div> </div>
</template>
<div>
<div v-if="loggedIn" class="flex items-center justify-between gap-4"> <div v-if="loggedIn" class="flex items-center justify-between gap-4">
<div class="w-full relative flex items-center"> <div class="w-full relative flex items-center">
<input <input
@@ -123,6 +129,8 @@ async function deleteMessage(id: number) {
/> />
</div> </div>
</div> </div>
</UCard>
</UModal>
<div v-if="messages" class="columns-1 md:columns-2 lg:columns-4 gap-8 space-y-8"> <div v-if="messages" class="columns-1 md:columns-2 lg:columns-4 gap-8 space-y-8">
<div <div
v-for="message in messages" v-for="message in messages"