rumor-party-line/client/src/App.vue
2025-01-27 23:16:58 -03:00

55 lines
No EOL
1.7 KiB
Vue

<template>
<div id="app">
<dialog class="modal" ref="about">
<div class="modal-box">
<h3 class="text-lg font-bold">Rumor Party Line</h3>
<p class="py-4">Let's spread some rumors!</p>
<p class="py-1">
<small><a href="https://github.com/pedroCX486/rumor-party-line">Created by pedroCX486 - <u>GitHub Repo</u></a></small>
</p>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
</form>
</div>
</div>
</dialog>
<div class="navbar bg-base-300 rounded-box">
<div class="flex-1 px-2 lg:flex-none">
<a class="text-lg font-bold">Rumor Party Line</a>
</div>
<div class="flex flex-1 justify-end px-2">
<div class="flex items-stretch">
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost rounded-btn">Menu</div>
<ul
tabindex="0"
class="menu dropdown-content bg-base-300 rounded-box z-[1] mt-4 w-52 p-2 shadow">
<li>
<RouterLink to="/">Home</RouterLink>
</li>
<li v-if="!isProd">
<RouterLink to="/admin">Admin</RouterLink>
</li>
</ul>
</div>
<a class="btn btn-ghost rounded-btn" @click="about.showModal()">About</a>
</div>
</div>
</div>
<div class="h-screen flex items-center justify-center">
<RouterView/>
</div>
</div>
</template>
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router';
import { ref } from "vue";
const about = ref();
const isProd = ref(import.meta.env.PROD);
</script>