1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
import { ProgressBar } from '@/components/progress-bar'
import { ThemeProvider } from '@/components/theme-provider'
import { ThemeToggle } from '@/components/theme-toggle'
import { Button } from '@/components/ui/button'
import { Toaster } from '@/components/ui/toaster'
import { env } from '@/lib/env'
import type { Metadata, Viewport } from 'next'
import Image from 'next/image'
import Link from 'next/link'
import { Suspense } from 'react'
import './globals.css'
export const metadata: Metadata = {
metadataBase: new URL(env.NEXT_PUBLIC_BASE_URL),
title: {
default: 'Spliit · Share Expenses with Friends & Family',
template: '%s · Spliit',
},
description:
'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
openGraph: {
title: 'Spliit · Share Expenses with Friends & Family',
description:
'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
images: `/banner.png`,
type: 'website',
url: '/',
},
twitter: {
card: 'summary_large_image',
creator: '@scastiel',
site: '@scastiel',
images: `/banner.png`,
title: 'Spliit · Share Expenses with Friends & Family',
description:
'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
},
appleWebApp: {
capable: true,
title: 'Spliit',
},
applicationName: 'Spliit',
icons: [
{
url: '/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
url: '/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
}
export const viewport: Viewport = {
themeColor: '#047857',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className="pt-16 min-h-[100dvh] flex flex-col items-stretch bg-slate-50 bg-opacity-30 dark:bg-background">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<Suspense>
<ProgressBar />
</Suspense>
<header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm z-50">
<Link
className="flex items-center gap-2 hover:scale-105 transition-transform"
href="/"
>
<h1>
<Image
src="/logo-with-text.png"
className="m-1 h-auto w-auto"
width={(35 * 522) / 180}
height={35}
alt="Spliit"
/>
</h1>
</Link>
<div role="navigation" aria-label="Menu" className="flex">
<ul className="flex items-center text-sm">
<li>
<Button
variant="ghost"
asChild
className="-my-3 text-primary"
>
<Link href="/groups">Groups</Link>
</Button>
</li>
<li>
<ThemeToggle />
</li>
</ul>
</div>
</header>
<div className="flex-1 flex flex-col">{children}</div>
<footer className="sm:p-8 md:p-16 sm:mt-16 sm:text-sm md:text-base md:mt-32 bg-slate-50 dark:bg-card border-t p-6 mt-8 flex flex-col sm:flex-row sm:justify-between gap-4 text-xs [&_a]:underline">
<div className="flex flex-col space-y-2">
<div className="sm:text-lg font-semibold text-base flex space-x-2 items-center">
<Link className="flex items-center gap-2" href="/">
<Image
src="/logo-with-text.png"
className="m-1 h-auto w-auto"
width={(35 * 522) / 180}
height={35}
alt="Spliit"
/>
</Link>
</div>
<div className="flex flex-col space-y a--no-underline-text-white">
<span>Made in Montréal, Québec 🇨🇦</span>
<span>
Built by{' '}
<a href="https://scastiel.dev" target="_blank" rel="noopener">
Sebastien Castiel
</a>{' '}
and{' '}
<a
href="https://github.com/spliit-app/spliit/graphs/contributors"
target="_blank"
rel="noopener"
>
contributors
</a>
</span>
</div>
</div>
</footer>
<Toaster />
</ThemeProvider>
</body>
</html>
)
}
|
