import React, {ReactNode} from 'react';
import {NavLink, Outlet} from "react-router-dom";

type LayoutProps = {
    children?: ReactNode
}

const Layout = ({children}: LayoutProps) => {

    const style: React.CSSProperties = {
        display: 'flex',
        height: 'calc(100vh - 50px)',
        width: '70vw',
        alignItems: 'center',
        justifyContent: 'center',
        margin: 'auto',
        flexWrap: 'wrap'

    }

    return (
        <>

            <nav id="sidebar"
                 style={{
                     height: '50px',
                     margin: 'auto',
                     width: '500px',
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
                     gap: '20px 20px'
                 }}>
                <NavLink
                    to="selects"
                >
                    SELECTS
                </NavLink>
                <NavLink
                    to="buttons"
                >
                    buttons
                </NavLink>
                <NavLink
                    to="form"
                >
                    Form
                </NavLink>
                <NavLink
                    to="svg-library"
                >
                    SVGS
                </NavLink>
                <NavLink
                    to="typographies"
                >
                    TYPOGRAPHIES
                </NavLink>
                <NavLink
                    to="grid"
                >
                    GRIDD
                </NavLink>

            </nav>

            <div style={style}>

                <Outlet/>


            </div>
        </>
    );
}

export default Layout;