Changeset 40ac7a9 for pages/+Layout.tsx


Ignore:
Timestamp:
12/24/25 16:53:37 (7 months ago)
Author:
Mihail <mihail2.naumov@…>
Branches:
main
Children:
67dfe57
Parents:
6196d60
Message:

Added frontend elements

File:
1 edited

Legend:

Unmodified
Added
Removed

  • pages/+Layout.tsx

    r6196d60 r40ac7a9  
    1 import "./Layout.css";
     1import React from 'react';
     2import Navbar from '../components/Navbar';
     3import Footer from '../components/Footer';
     4import Box from '@mui/material/Box';
     5import { ThemeProvider, createTheme } from '@mui/material/styles';
     6import CssBaseline from '@mui/material/CssBaseline';
    27
    3 import logoUrl from "../assets/logo.svg";
    4 import { Link } from "../components/Link";
     8const theme = createTheme({
     9    palette: {
     10        mode: 'dark',
     11        primary: { main: '#ff8201' },
     12        background: { default: '#121212', paper: '#1e1e1e' },
     13    },
     14});
    515
    616export default function Layout({ children }: { children: React.ReactNode }) {
    7   return (
    8     <div
    9       style={{
    10         display: "flex",
    11         maxWidth: 900,
    12         margin: "auto",
    13       }}
    14     >
    15       <Sidebar>
    16         <Logo />
    17         <Link href="/">Welcome</Link>
    18         <Link href="/todo">Todo</Link>
    19         <Link href="/star-wars">Data Fetching</Link>
    20       </Sidebar>
    21       <Content>{children}</Content>
    22     </div>
    23   );
     17    return (
     18        <ThemeProvider theme={theme}>
     19            <CssBaseline />
     20            <Box
     21                sx={{
     22                    display: 'flex',
     23                    flexDirection: 'column',
     24                    minHeight: '100vh',
     25                    bgcolor: 'background.default',
     26                    color: 'text.primary',
     27                }}
     28            >
     29                <Navbar />
     30                <Box component="main" sx={{ flexGrow: 1, py: 3 }}>
     31                    {children}
     32                </Box>
     33                <Footer />
     34            </Box>
     35        </ThemeProvider>
     36    );
    2437}
    25 
    26 function Sidebar({ children }: { children: React.ReactNode }) {
    27   return (
    28     <div
    29       id="sidebar"
    30       style={{
    31         padding: 20,
    32         flexShrink: 0,
    33         display: "flex",
    34         flexDirection: "column",
    35         lineHeight: "1.8em",
    36         borderRight: "2px solid #eee",
    37       }}
    38     >
    39       {children}
    40     </div>
    41   );
    42 }
    43 
    44 function Content({ children }: { children: React.ReactNode }) {
    45   return (
    46     <div id="page-container">
    47       <div
    48         id="page-content"
    49         style={{
    50           padding: 20,
    51           paddingBottom: 50,
    52           minHeight: "100vh",
    53         }}
    54       >
    55         {children}
    56       </div>
    57     </div>
    58   );
    59 }
    60 
    61 function Logo() {
    62   return (
    63     <div
    64       style={{
    65         marginTop: 20,
    66         marginBottom: 10,
    67       }}
    68     >
    69       <a href="/">
    70         <img src={logoUrl} height={64} width={64} alt="logo" />
    71       </a>
    72     </div>
    73   );
    74 }
Note: See TracChangeset for help on using the changeset viewer.