bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-26 17:11:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: change main layout with added theme provider

Browse source
This commit is contained in:
Bart van der Braak 2023-06-14 03:50:07 +02:00
parent 623b64cfee
commit 959ebcf37f
2 changed files with 82 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
app/layout.tsx
View file

@ -1,21 +1,79 @@
import './globals.css'
import { Inter } from 'next/font/google'
import { Inter, Fjalla_One } from "next/font/google";
const inter = Inter({ subsets: ['latin'] })
import { ThemeProvider } from "@/components/theme-provider";
import "tailwindcss/tailwind.css";
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
import { Metadata } from "next";
export const metadata: Metadata = {
title: {
default: "hellob.art",
template: "%s | hellob.art",
},
description: "a simple portfolio made by bart van der braak",
metadataBase: new URL("https://hellob.art"),
openGraph: {
title: "hellob.art",
description: "a simple portfolio made by bart van der braak",
url: "https://hellob.art",
siteName: "hellob.art",
locale: "en-US",
type: "website",
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
"max-video-preview": -1,
"max-image-preview": "large",
"max-snippet": -1,
},
},
twitter: {
title: "hellob.art",
card: "summary_large_image",
},
icons: {
shortcut: "/favicon.png",
},
};
interface RootLayoutProps {
children: React.ReactNode;
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
const fjallaOne = Fjalla_One({
subsets: ["latin"],
weight: "400",
variable: "--font-fjalla-one",
});
interface RootLayoutProps {
children: React.ReactNode;
}
export default async function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
<>
<html
lang="en"
suppressHydrationWarning
className={[inter.variable, fjallaOne.variable].join(" ")}
>
<head />
<body className="min-h-screen antialiased">
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
{children}
</ThemeProvider>
</body>
</html>
</>
);
}

9
components/theme-provider.tsx Normal file
View file

@ -0,0 +1,9 @@
"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}