Header.tsx

import { ColorModeContext } from "@/app/layout";
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import { Button, Container, Grid, IconButton, useTheme } from "@mui/material";
import Image from "next/image";
import Link from "next/link";
import { useContext } from "react";
import logoSvg from "../public/logo.svg";

export default function Header() {
    const theme = useTheme();
    const colorMode = useContext(ColorModeContext);

    return (
        <Container>
            <Grid container spacing={2} height={100} sx={{ alignItems: "center" }}>
                <Grid item xs={2}>
                    <Link href="/">
                        <Image src={logoSvg} alt="GameUnity" width={50} height={50} priority />
                    </Link>
                </Grid>

                <Grid item xs={8} sx={{ justifyContent: "center", textAlign: "center" }}>
                    <Link href="/games">
                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
                            Games
                        </Button>
                    </Link>
                    <Link href="/threads">
                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
                            Threads
                        </Button>
                    </Link>
                    <Link href="/communities">
                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
                            Communities
                        </Button>
                    </Link>
                    <Link href="/blogs">
                        <Button variant="text" size="large" sx={{ borderRadius: "999px" }}>
                            Blog
                        </Button>
                    </Link>
                </Grid>

                <Grid item xs={2} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <IconButton sx={{ ml: 1 }} onClick={colorMode.toggleColorMode} color="inherit">
                        {theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
                    </IconButton>
                </Grid>
            </Grid>
        </Container>
    )
}