feat: login & home

src/components/Layout/Layout.tsx

@@ -0,0 +1,36 @@
+import React, { FC, PropsWithChildren } from 'react'
+import styled from 'styled-components'
+import { Header, HeaderProps } from './Header'
+import { Footer } from './Footer'
+import { Outlet } from 'react-router-dom'
+
+const StyledSection = styled.section`
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+`
+
+const StyledHeader = styled(Header)`
+  flex: 0 0 auto;
+`
+
+const StyledFooter = styled(Footer)`
+  flex: 0 0 auto;
+`
+
+const StyledMain = styled.main`
+  flex: auto;
+`
+
+export const Layout: FC<PropsWithChildren<Omit<HeaderProps, 'className'>>> = ({ children, ...headerProps }) => {
+	return (
+		<StyledSection>
+			<StyledHeader {...headerProps} />
+			<StyledMain>
+				<Outlet />
+				{children}
+			</StyledMain>
+			<StyledFooter />
+		</StyledSection>
+	)
+}