add padding config to layout

WebmasterCamp · Jul 15, 2023 · b8b489d · b8b489d
1 parent 5464f89
commit b8b489d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 24 deletions.
diff --git a/src/components/Layout/index.tsx → src/components/Layout/Layout.tsx b/src/components/Layout/index.tsx → src/components/Layout/Layout.tsx
@@ -5,14 +5,16 @@ import { Navbar } from '../Navbar'
 interface LayoutProps {
 	beforeContent?: ReactNode
 	children: ReactNode
+	px?: number
+	py?: number
 }
 
-export const Layout: FC<LayoutProps> = ({ children, beforeContent }) => {
+export const Layout: FC<LayoutProps> = ({ children, beforeContent, px = 4, py = 4 }) => {
 	return (
 		<div className="flex flex-col w-full font-noto-looped">
 			<Navbar />
 			{beforeContent}
-			<div className="p-4">{children}</div>
+			<div className={`px-${px} py-${py}`}>{children}</div>
 		</div>
 	)
 }
diff --git a/src/pages/expenses/1/index.tsx b/src/pages/expenses/1/index.tsx
@@ -1,5 +1,5 @@
-import { Layout } from '~/components/Layout'
 import { ExpenseLayout } from '~/components/Layout/ExpenseLayout'
+import { Layout } from '~/components/Layout/Layout'
 
 const ExpensesPage = () => {
 	return (

diff --git a/src/pages/expenses/2/index.tsx b/src/pages/expenses/2/index.tsx
@@ -1,5 +1,5 @@
-import { Layout } from '~/components/Layout'
 import { ExpenseLayout } from '~/components/Layout/ExpenseLayout'
+import { Layout } from '~/components/Layout/Layout'
 
 const ExpensesPage = () => {
 	return (

diff --git a/src/pages/expenses/3/index.tsx b/src/pages/expenses/3/index.tsx
@@ -1,14 +1,12 @@
-import { Layout } from "~/components/Layout"
-import { ExpenseLayout } from "~/components/Layout/ExpenseLayout"
+import { ExpenseLayout } from '~/components/Layout/ExpenseLayout'
+import { Layout } from '~/components/Layout/Layout'
 
 const ExpensesPage = () => {
-    return (
-        <Layout>
-            <ExpenseLayout title="ค่าใช้จ่ายทางการแพทย์">
-                {/* insert your code here */}
-            </ExpenseLayout>
-        </Layout>
-    )
+	return (
+		<Layout>
+			<ExpenseLayout title="ค่าใช้จ่ายทางการแพทย์">{/* insert your code here */}</ExpenseLayout>
+		</Layout>
+	)
 }
 
-export default ExpensesPage
+export default ExpensesPage
diff --git a/src/pages/expenses/4/index.tsx b/src/pages/expenses/4/index.tsx
@@ -1,14 +1,12 @@
-import { Layout } from "~/components/Layout"
-import { ExpenseLayout } from "~/components/Layout/ExpenseLayout"
+import { ExpenseLayout } from '~/components/Layout/ExpenseLayout'
+import { Layout } from '~/components/Layout/Layout'
 
 const ExpensesPage = () => {
-    return (
-        <Layout>
-            <ExpenseLayout title="สรุปแผนการเงิน">
-                {/* insert your UI here */}
-            </ExpenseLayout>
-        </Layout>
-    )
+	return (
+		<Layout>
+			<ExpenseLayout title="สรุปแผนการเงิน">{/* insert your UI here */}</ExpenseLayout>
+		</Layout>
+	)
 }
 
-export default ExpensesPage
+export default ExpensesPage