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
|
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 { env } from '@/lib/env'
import type { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'
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: '/public/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
url: '/public/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
}
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">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<ProgressBar />
<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">
<Link className="flex items-center gap-2" href="/">
<h1>
<Image
src="/logo-with-text.png"
className="m-1 h-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="link" asChild className="-my-3">
<Link href="/groups">Groups</Link>
</Button>
</li>
<li>
<ThemeToggle />
</li>
</ul>
</div>
</header>
{children}
<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-slate-800 border-t p-6 mt-8 flex flex-col space-y-2 text-xs [&_a]:underline">
<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"
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>
</span>
</div>
</footer>
</ThemeProvider>
</body>
</html>
)
}
|
