streaper2/afrobiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

introduce tailwind

Browse Source
This commit is contained in:
Michael Dausmann
2023-04-20 22:13:41 +10:00
parent 8b2348f6a3
commit 857ab9f235
9 changed files with 4464 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app.vue
View File

@@ -1,7 +1,11 @@
<template>
<div>
<div class="flex flex-col min-h-screen bg-base-100">
<AppHeader />
<NuxtPage />
<div class="flex-grow">
<main>
<NuxtPage />
</main>
</div>
<AppFooter />
</div>
</template>

3
assets/css/tailwind.css Normal file
View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

3
components/AppFooter.vue
View File

@@ -1,6 +1,5 @@
<template>
<div>
<hr/>
<div class="sticky z-50 bottom-0 p-4 bg-base-200">
<span><NuxtLink to="/terms">Terms Of Service</NuxtLink></span>
<span>&nbsp;|&nbsp;<NuxtLink to="/privacy">Privacy</NuxtLink></span>
</div>

60
components/AppHeader.vue
View File

@@ -20,27 +20,47 @@
</script>
<template>
<div>
<h3>Nuxt 3 Boilerplate - To the Moon!</h3>
<div>
<span v-if="!user"><NuxtLink to="/">Nuxt 3 Boilerplate</NuxtLink>&nbsp;|&nbsp;</span>
<span><NuxtLink to="/pricing">Pricing</NuxtLink></span>
<span v-if="user">&nbsp;|&nbsp;<NuxtLink to="/dashboard">Dashboard</NuxtLink></span>
<span v-if="user">&nbsp;|&nbsp;<NuxtLink to="/account">Account</NuxtLink></span>
<span v-if="!user">&nbsp;|&nbsp;<NuxtLink to="/signin">Sign In</NuxtLink></span>
<span v-if="user">&nbsp;|&nbsp;<a href="#" @click.prevent="signout()">Sign out</a></span>
<span v-if="user">&nbsp;|&nbsp;logged in as: {{ user.email }}</span>
<div class="navbar bg-base-100">
<div class="navbar-start">
<div class="dropdown">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
<ul tabindex="0" class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<li v-if="user"><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
<li><NuxtLink to="/pricing">Pricing</NuxtLink></li>
<li v-if="!user"><NuxtLink to="/signin">Sign In</NuxtLink></li>
</ul>
</div>
<NuxtLink to="/" class="btn btn-ghost normal-case text-xl">Nuxt3 SAAS Bootstrap</NuxtLink>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li v-if="user"><NuxtLink to="/dashboard">Dashboard</NuxtLink></li>
<li><NuxtLink to="/pricing">Pricing</NuxtLink></li>
<li v-if="!user"><NuxtLink to="/signin">Sign In</NuxtLink></li>
</ul>
</div>
<div class="navbar-end" v-if="user">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
<!-- Account Switching -->
<p v-if="dbUser?.memberships && dbUser?.memberships.length > 1">
<span>Switch Account.. </span>
<button :disabled="membership.pending" v-for="membership in dbUser?.memberships" @click="accountStore.changeActiveAccount(membership.account_id)">
{{ membership.account.name }}
<span v-if="membership.pending">(pending)</span>
<span v-if="membership.account_id === activeAccountId">*</span>
</button>
</p>
<hr>
<img :src="user.user_metadata.avatar_url" />
</div>
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
<li v-if="user">{{ user.email }}</li>
<li><NuxtLink to="/account">Account</NuxtLink></li>
<li><a href="#" @click.prevent="signout()">logout</a></li>
<template v-if="dbUser?.memberships && dbUser?.memberships.length > 1">
<li>Switch Account</li>
<li v-for="membership in dbUser?.memberships" :disabled="membership.pending">
<a v-if="membership.account_id !== activeAccountId" href="#" @click="accountStore.changeActiveAccount(membership.account_id)">{{ membership.account.name }}<span v-if="membership.pending">(pending)</span></a>
</li>
</template>
</ul>
</div>
</div>
</div>
</template>

2
nuxt.config.ts
View File

@@ -7,7 +7,7 @@ export default defineNuxtConfig({
typescript: {
shim: false
},
modules: ['@nuxtjs/supabase', '@pinia/nuxt'],
modules: ['@nuxtjs/supabase', '@pinia/nuxt', '@nuxtjs/tailwindcss'],
imports: {
dirs: ['./stores'],
},

4668
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -12,7 +12,9 @@
},
"devDependencies": {
"@nuxtjs/supabase": "^0.3.1",
"@nuxtjs/tailwindcss": "^6.6.6",
"@prisma/client": "^4.9.0",
"@tailwindcss/typography": "^0.5.9",
"@types/node": "^18.15.11",
"nuxt": "^3.1.1",
"prisma": "^4.9.0",
@@ -23,6 +25,7 @@
"@pinia/nuxt": "^0.4.6",
"@trpc/client": "^10.9.0",
"@trpc/server": "^10.9.0",
"daisyui": "^2.51.5",
"generate-password-ts": "^1.6.3",
"pinia": "^2.0.30",
"stripe": "^11.12.0",

21
pages/dashboard.vue
View File

@@ -19,9 +19,22 @@
});
</script>
<template>
<div>
<h3>Notes Dashboard</h3>
<p v-for="note in notes">{{ note.note_text }} <button @click.prevent="notesStore.deleteNote(note.id)">-</button></p>
<p><input v-model="newNoteText"/><button @click.prevent="addNote()">Add</button></p>
<div class="flex flex-col">
<h1 class="text-primary text-2xl">Notes Dashboard</h1>
<div class="flex flex-wrap">
<div class="card w-96 bg-base-100 shadow-xl" v-for="note in notes">
<div class="card-body">
<p>{{ note.note_text }}</p>
<div class="card-actions justify-end">
<button class="btn btn-primary btn-sm" @click.prevent="notesStore.deleteNote(note.id)">Delete</button>
</div>
</div>
</div>
</div>
<div class="p-500">
<input type="text" class="input w-full max-w-xs" placeholder="Enter a Note" v-model="newNoteText"/>
<button @click.prevent="addNote()" class="btn btn-primary">Add</button>
</div>
</div>
</template>

13
tailwind.config.js Normal file
View File

@@ -0,0 +1,13 @@
export default {
plugins:[require("@tailwindcss/typography"), require("daisyui")],
daisyui: {
styled: true,
themes: ["acid", "night"],
base: true,
utils: true,
logs: true,
rtl: false,
prefix: "",
darkTheme: "night",
},
}