Skip to content

Instantly share code, notes, and snippets.

@Daltonic
Last active August 22, 2024 09:47
Sia VidTv Layout
// 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