Skip to content

Commit 572eb4d

Browse files
HugoRCDHugoRCD
committed
up
1 parent 4d16611 commit 572eb4d

File tree

21 files changed

+1167
-1158
lines changed

21 files changed

+1167
-1158
lines changed

‎app/app.config.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
export default defineAppConfig({
22
ui: {
3-
primary: 'sky',
4-
gray: 'cool',
3+
colors: {
4+
primary: 'green',
5+
neutral: 'slate'
6+
},
57
button: {
68
rounded: 'rounded-full',
79
default: {

‎app/app.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,11 @@ useSeoMeta({
2626
</script>
2727

2828
<template>
29-
<div>
29+
<UApp>
3030
<NuxtLoadingIndicator />
3131

3232
<NuxtLayout>
3333
<NuxtPage />
3434
</NuxtLayout>
35-
36-
<UNotifications />
37-
</div>
35+
</UApp>
3836
</template>

‎app/assets/css/main.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@import "tailwindcss";
2+
@import "@nuxt/ui-pro";
3+
4+
@theme {
5+
--font-sans: 'Public Sans', sans-serif;
6+
7+
--color-green-50: #EFFDF5;
8+
--color-green-100: #D9FBE8;
9+
--color-green-200: #B3F5D1;
10+
--color-green-300: #75EDAE;
11+
--color-green-400: #00DC82;
12+
--color-green-500: #00C16A;
13+
--color-green-600: #00A155;
14+
--color-green-700: #007F45;
15+
--color-green-800: #016538;
16+
--color-green-900: #0A5331;
17+
--color-green-950: #052E16;
18+
}

‎app/components/AppFooter.vue‎

Lines changed: 40 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
const links = [{
2+
const columns = [{
33
label: 'Resources',
44
children: [{
55
label: 'Help center'
@@ -42,52 +42,49 @@ const loading = ref(false)
4242
function onSubmit() {
4343
loading.value = true
4444
45-
setTimeout(() => {
46-
toast.add({
47-
title: 'Subscribed!',
48-
description: 'You\'ve been subscribed to our newsletter.'
49-
})
50-
51-
loading.value = false
52-
}, 1000)
45+
toast.add({
46+
title: 'Subscribed!',
47+
description: 'You\'ve been subscribed to our newsletter.'
48+
})
5349
}
5450
</script>
5551

5652
<template>
57-
<UFooter>
53+
<USeparator
54+
icon="i-simple-icons-nuxtdotjs"
55+
class="h-px"
56+
/>
57+
<UFooter :ui="{ top: 'border-b border-[var(--ui-border)]' }">
5858
<template #top>
59-
<UFooterColumns :links="links">
60-
<template #right>
61-
<form @submit.prevent="onSubmit">
62-
<UFormGroup
63-
label="Subscribe to our newsletter"
64-
:ui="{ container: 'mt-3' }"
65-
>
66-
<UInput
67-
v-model="email"
68-
type="email"
69-
placeholder="Enter your email"
70-
:ui="{ icon: { trailing: { pointer: '' } } }"
71-
required
72-
size="xl"
73-
autocomplete="off"
74-
class="max-w-sm"
75-
input-class="rounded-full"
59+
<UContainer>
60+
<UFooterColumns :columns="columns">
61+
<template #right>
62+
<form @submit.prevent="onSubmit">
63+
<UFormField
64+
name="email"
65+
label="Subscribe to our newsletter"
66+
size="lg"
7667
>
77-
<template #trailing>
78-
<UButton
79-
type="submit"
80-
size="xs"
81-
color="primary"
82-
:label="loading ? 'Subscribing' : 'Subscribe'"
83-
:loading="loading"
84-
/>
85-
</template>
86-
</UInput>
87-
</UFormGroup>
88-
</form>
89-
</template>
90-
</UFooterColumns>
68+
<UInput
69+
v-model="email"
70+
type="email"
71+
class="w-full"
72+
placeholder="Enter your email"
73+
>
74+
<template #trailing>
75+
<UButton
76+
type="submit"
77+
size="xs"
78+
color="neutral"
79+
label="Subscribe"
80+
/>
81+
</template>
82+
</UInput>
83+
</UFormField>
84+
</form>
85+
</template>
86+
</UFooterColumns>
87+
</UContainer>
9188
</template>
9289

9390
<template #left>
@@ -100,11 +97,11 @@ function onSubmit() {
10097
<UColorModeButton size="sm" />
10198

10299
<UButton
103-
to="https://github.com/nuxt-ui-pro/saas"
100+
to="https://github.com/nuxt-ui-pro/landing"
104101
target="_blank"
105102
icon="i-simple-icons-github"
106103
aria-label="GitHub"
107-
color="gray"
104+
color="neutral"
108105
variant="ghost"
109106
/>
110107
</template>

‎app/components/AppHeader.vue‎

Lines changed: 37 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { NavItem } from '@nuxt/content'
33
44
const navigation = inject<Ref<NavItem[]>>('navigation', ref([]))
55
6-
const links = [{
6+
const items = [{
77
label: 'Docs',
88
to: '/docs'
99
}, {
@@ -16,35 +16,55 @@ const links = [{
1616
</script>
1717

1818
<template>
19-
<UHeader :links="links">
20-
<template #logo>
21-
Nuxt UI Pro <UBadge
22-
label="SaaS"
23-
variant="subtle"
24-
class="mb-0.5"
25-
/>
19+
<UHeader>
20+
<template #left>
21+
<NuxtLink to="/">
22+
<LogoPro class="w-auto h-6 shrink-0" />
23+
</NuxtLink>
24+
<TemplateMenu />
2625
</template>
2726

27+
<UNavigationMenu
28+
:items="items"
29+
variant="link"
30+
/>
31+
2832
<template #right>
33+
<UColorModeButton />
2934
<UButton
3035
label="Sign in"
31-
color="gray"
36+
color="neutral"
3237
to="/login"
3338
/>
3439
<UButton
3540
label="Sign up"
36-
icon="i-heroicons-arrow-right-20-solid"
37-
trailing
38-
color="black"
39-
to="/signup"
41+
color="neutral"
42+
variant="ghost"
43+
trailing-icon="i-lucide-arrow-right"
4044
class="hidden lg:flex"
4145
/>
4246
</template>
4347

44-
<template #panel>
45-
<UNavigationTree
46-
:links="mapContentNavigation(navigation)"
47-
default-open
48+
<template #content>
49+
<UNavigationMenu
50+
:items="items"
51+
orientation="vertical"
52+
class="-mx-2.5"
53+
/>
54+
55+
<USeparator class="my-6" />
56+
57+
<UButton
58+
label="Sign in"
59+
color="neutral"
60+
block
61+
class="mb-3"
62+
/>
63+
<UButton
64+
label="Sign up"
65+
color="neutral"
66+
variant="subtle"
67+
block
4868
/>
4969
</template>
5070
</UHeader>

‎app/components/ImagePlaceholder.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<div class="bg-gray-900/5 dark:bg-white/5 ring-1 ring-inset ring-gray-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4">
3-
<div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-gray-900/10 dark:border-white/10">
2+
<div class="bg-neutral-900/5 dark:bg-white/5 ring-1 ring-inset ring-neutral-900/10 dark:ring-white/10 rounded-xl lg:-m-4 p-4">
3+
<div class="aspect-w-16 aspect-h-9 rounded-lg relative overflow-hidden border border-dashed border-neutral-900/10 dark:border-white/10">
44
<svg
5-
class="absolute inset-0 h-full w-full stroke-gray-900/10 dark:stroke-white/10"
5+
class="absolute inset-0 h-full w-full stroke-neutral-900/10 dark:stroke-white/10"
66
fill="none"
77
>
88
<defs>

‎app/components/TemplateMenu.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<UDropdownMenu
3+
v-slot="{ open }"
4+
:modal="false"
5+
:items="[{
6+
label: `Starter`,
7+
to: 'https://starter-template.nuxt.dev/'
8+
}, {
9+
label: `Landing`,
10+
to: 'https://landing-template.nuxt.dev/'
11+
}, {
12+
label: `Docs`,
13+
to: 'https://docs-template.nuxt.dev/'
14+
}, {
15+
label: `SaaS`,
16+
to: 'https://saas-template.nuxt.dev/',
17+
checked: true,
18+
type: 'checkbox'
19+
}, {
20+
label: `Dashboard`,
21+
to: 'https://dashboard-template.nuxt.dev/'
22+
}]"
23+
:ui="{ content: 'w-(--reka-dropdown-menu-trigger-width) min-w-0' }"
24+
size="xs"
25+
>
26+
<UButton
27+
label="Saas"
28+
variant="subtle"
29+
trailing-icon="i-lucide-chevron-down"
30+
size="xs"
31+
class="-mb-[6px] font-semibold rounded-full truncate"
32+
:class="[open && 'bg-[var(--ui-primary)]/15 ']"
33+
:ui="{
34+
trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
35+
}"
36+
/>
37+
</UDropdownMenu>
38+
</template>

‎app/error.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ provide('navigation', navigation)
3333
<UMain>
3434
<UContainer>
3535
<UPage>
36-
<UPageError :error="error" />
36+
<UError :error="error" />
3737
</UPage>
3838
</UContainer>
3939
</UMain>
@@ -47,6 +47,6 @@ provide('navigation', navigation)
4747
/>
4848
</ClientOnly>
4949

50-
<UNotifications />
50+
<UToaster />
5151
</div>
5252
</template>

‎app/layouts/auth.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
useHead({
33
bodyAttrs: {
4-
class: 'dark:bg-gray-950'
4+
class: 'dark:bg-neutral-950'
55
}
66
})
77
</script>
@@ -14,7 +14,7 @@ useHead({
1414
icon="i-heroicons-home"
1515
label="Home"
1616
to="/"
17-
color="black"
17+
color="neutral"
1818
class="absolute top-4"
1919
/>
2020

‎app/pages/blog/[slug].vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@ if (post.value.image?.src) {
5757
v-for="(author, index) in post.authors"
5858
:key="index"
5959
:to="author.to"
60-
color="white"
60+
color="neutral"
61+
variant="subtle"
6162
target="_blank"
6263
size="sm"
6364
>

0 commit comments

Comments
 (0)