/layout.tsx Secret
Last active
August 22, 2024 09:47
Sia VidTv Layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Step 1: Import necessary modules and components | |
import type { Metadata } from 'next' | |
import { Inter } from 'next/font/google' | |
import './globals.css' // Global styles | |
import 'react-toastify/dist/ReactToastify.css' // Toast notifications styles | |
import 'react-loading-skeleton/dist/skeleton.css' // Skeleton loader styles | |
import Header from './components/layout/Header' // Header component | |
import Footer from './components/layout/Footer' // Footer component | |
import { cookieToInitialState } from 'wagmi' // Convert cookie to initial state | |
import { config } from '@/config' // Wagmi configuration | |
import { headers } from 'next/headers' // Next.js headers | |
import Web3ModalProvider from '@/context' // Web3 modal provider | |
import { ToastContainer } from 'react-toastify' // Toast notifications container | |
// Step 2: Create Inter font instance | |
const inter = Inter({ subsets: ['latin'] }) | |
// Step 3: Define metadata for the application | |
export const metadata: Metadata = { | |
title: 'VidTv', // Application title | |
description: 'Stream video directly from the Sia blockchain', // Application description | |
} | |
// Step 4: Define the root layout component | |
export default function RootLayout({ | |
children, // Application children | |
}: Readonly<{ | |
children: React.ReactNode | |
}>) { | |
// Step 5: Convert cookie to initial state for Web3 modal | |
const initialState = cookieToInitialState(config, headers().get('cookie')) | |
// Step 6: Return the application layout | |
return ( | |
<html lang="en"> | |
<body className={inter.className}> | |
<Web3ModalProvider initialState={initialState}> | |
<div className="flex flex-col h-[100vh]"> | |
<Header /> {/* Step 7: Render Header component */} | |
<main className="flex-grow mt-16 p-4 sm:p-8 max-w-7xl sm:mx-auto w-full"> | |
{children} {/* Step 8: Render application children */} | |
</main> | |
<Footer /> {/* Step 9: Render Footer component */} | |
</div> | |
<ToastContainer | |
position="bottom-center" // Step 10: Configure toast notifications | |
autoClose={5000} // Auto-close delay | |
hideProgressBar={false} // Show progress bar | |
newestOnTop={false} // New notifications on top | |
closeOnClick // Close on click | |
rtl={false} // Right-to-left layout | |
pauseOnFocusLoss // Pause on focus loss | |
draggable // Draggable notifications | |
pauseOnHover // Pause on hover | |
theme="dark" // Dark theme | |
/> | |
</Web3ModalProvider> | |
</body> | |
</html> | |
) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment