diff options
| author | Sebastien Castiel <sebastien@castiel.me> | 2023-12-07 16:44:01 -0500 |
|---|---|---|
| committer | Sebastien Castiel <sebastien@castiel.me> | 2023-12-07 16:44:01 -0500 |
| commit | 0b27f90fb76a2492c17a958b6dd807e6fbbf8030 (patch) | |
| tree | bfc9c0e533eb28b43bcded9c53020dc15bca1955 /src/app/layout.tsx | |
| parent | 6611e3a187e5398f686449938b7cf1ddbfcb5392 (diff) | |
Titles and navigation
Diffstat (limited to 'src/app/layout.tsx')
| -rw-r--r-- | src/app/layout.tsx | 45 |
1 files changed, 42 insertions, 3 deletions
diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 7c5afbe..894e2d0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,10 +1,36 @@ import { ProgressBar } from '@/components/progress-bar' +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 = { - title: 'Create Next App', - description: 'Generated by create next app', + metadataBase: new URL(env.NEXT_PUBLIC_BASE_URL), + title: { + default: 'Spliit · Share expenses with friends and 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 and 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 and family', + description: + 'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.', + }, } export default function RootLayout({ @@ -16,7 +42,20 @@ export default function RootLayout({ <html lang="en"> <body className=""> <ProgressBar /> - <div className="max-w-screen-md mx-auto p-4">{children}</div> + <header className="fixed top-0 left-0 right-0 flex justify-between bg-white bg-opacity-50 p-2 border-b backdrop-blur-sm"> + <Link className="flex items-center gap-2" href="/"> + <Image src="/logo.svg" width={30} height={30} alt="" /> + <h1 className="font-bold text-primary">Spliit</h1> + </Link> + <ul role="nav" className="flex items-center text-sm"> + <li> + <Button variant="link" asChild className="-my-3"> + <Link href="/groups">Groups</Link> + </Button> + </li> + </ul> + </header> + <div className="max-w-screen-md mx-auto p-4 pt-16">{children}</div> </body> </html> ) |