feat: create content layout with emotion

inertia/components/layouts/_base_layout.tsx

@@ -0,0 +1,14 @@
+import { Global, ThemeProvider } from '@emotion/react';
+import { ReactNode } from 'react';
+import documentStyle from '~/styles/document';
+import { cssReset } from '~/styles/reset';
+import { theme } from '~/styles/theme';
+
+export default function BaseLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      <Global styles={[cssReset, documentStyle]} />
+    </>
+  );
+}

inertia/components/layouts/content_layout.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { ReactNode } from 'react';
+import Navbar from '../navbar/navbar';
+import BaseLayout from './_base_layout';
+
+const ContentLayoutStyle = styled.div(({ theme }) => ({
+  height: 'auto',
+  width: theme.media.small_desktop,
+  maxWidth: '100%',
+  padding: '1em',
+}));
+
+const ContentLayout = ({ children }: { children: ReactNode }) => (
+  <BaseLayout>
+    <ContentLayoutStyle>
+      <Navbar />
+      <main>{children}</main>
+    </ContentLayoutStyle>
+  </BaseLayout>
+);
+
+export default ContentLayout;