From 047a484d2eb1096bc5fe62117c3a057e693dea2f Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sun, 1 Aug 2021 11:41:56 +0800
Subject: [PATCH] Add BasicWide layout

BasicWide layout is for templates that require more width.
---
 package.json                    |  2 +-
 src/index.ts                    |  1 +
 src/layouts/BasicWide/index.tsx | 60 +++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/BasicWide/index.tsx

diff --git a/package.json b/package.json
index b1ade7e..62802b5 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
diff --git a/src/index.ts b/src/index.ts
index 1d65244..49102c0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 export * as Basic from './layouts/Basic'
+export * as BasicWide from './layouts/BasicWide'
 export * as BasicNarrow from './layouts/BasicNarrow'
 export * as LeftSidebarWithMenu from './layouts/LeftSidebarWithMenu'
 export * as LeftSidebar from './layouts/LeftSidebar'
diff --git a/src/layouts/BasicWide/index.tsx b/src/layouts/BasicWide/index.tsx
new file mode 100644
index 0000000..d918454
--- /dev/null
+++ b/src/layouts/BasicWide/index.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react'
+import styled, { createGlobalStyle } from 'styled-components'
+import TopBar from '../../widgets/TopBar'
+import {configVar, loadConfig} from '../../utilities/helpers'
+
+const Config = createGlobalStyle({
+	...loadConfig(),
+})
+
+const ContentBase = styled('main')({
+	boxSizing: 'border-box',
+})
+
+export const ContentContainer = styled('div')({
+	padding: '0 1rem',
+	boxSizing: 'border-box',
+	margin: '0 auto',
+	maxWidth: `calc(${configVar('base-width')} * 3)`,
+	width: '100%',
+})
+
+type Props = {
+	brand?: React.ReactNode,
+	userLink?: React.ReactNode,
+	topBarCenter?: React.ReactChild,
+	topBarComponent?: React.ElementType,
+}
+
+export const Layout: React.FC<Props> = ({
+	brand,
+	userLink,
+	topBarCenter,
+	topBarComponent = 'div',
+	children,
+}) => {
+	return (
+		<>
+			<Config />
+			{
+				(
+					brand
+					|| userLink
+					|| topBarCenter
+				)
+				&& (
+					<TopBar
+						brand={brand}
+						userLink={userLink}
+						baseComponent={topBarComponent}
+					>
+						{topBarCenter}
+					</TopBar>
+				)
+			}
+			<ContentBase>
+				{children}
+			</ContentBase>
+		</>
+	)
+}