From 9803faf587238d516dd4c051f4f20280e5360576 Mon Sep 17 00:00:00 2001
From: wralith <wralithdev@gmail.com>
Date: Mon, 7 Nov 2022 18:57:20 +0300
Subject: [PATCH 1/2] Add section component

---
 components/Section/Section.md  | 29 +++++++++++++++++++++++++++++
 components/Section/Section.tsx | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 components/Section/Section.md
 create mode 100644 components/Section/Section.tsx

diff --git a/components/Section/Section.md b/components/Section/Section.md
new file mode 100644
index 0000000..3e057ef
--- /dev/null
+++ b/components/Section/Section.md
@@ -0,0 +1,29 @@
+# Section Component
+
+Section component can be used to wrap content to apply padding and background color.
+
+## Props List
+
+| Name            | Type      | Optional |
+| --------------- | --------- | -------- |
+| className       | string    | ✔        |
+| p               | string    | ✔        |
+| px              | string    | ✔        |
+| py              | string    | ✔        |
+| pt              | string    | ✔        |
+| pb              | string    | ✔        |
+| pl              | string    | ✔        |
+| pr              | string    | ✔        |
+| backgroundColor | string    | ✔        |
+| children        | ReactNode | ✖        |
+
+## Usage
+
+```tsx
+<Section px="0.5rem" py="1rem" backgroundColor="red">
+```
+
+- For paddings you need to specify the unit. (i.e. `rem`, `em` or `px`)
+- `backgroundColor` can take anything that is valid for css. (i.e. `red`, `#000`, `rgb(0, 0, 0)`)
+- `pb` and `pt` will override `py`
+- `pl` and `pr` will override `px`
diff --git a/components/Section/Section.tsx b/components/Section/Section.tsx
new file mode 100644
index 0000000..2aec3c4
--- /dev/null
+++ b/components/Section/Section.tsx
@@ -0,0 +1,33 @@
+import { ReactNode } from 'react'
+
+interface Props {
+  className?: string
+  p?: string
+  px?: string
+  py?: string
+  pt?: string
+  pb?: string
+  pl?: string
+  pr?: string
+  backgroundColor?: string
+  children: ReactNode
+}
+
+const Section = (props: Props) => {
+  return (
+    <section
+      style={{
+        backgroundColor: props.backgroundColor,
+        padding: props.p,
+        paddingLeft: props.pl || props.px,
+        paddingRight: props.pl || props.px,
+        paddingTop: props.pt || props.py,
+        paddingBottom: props.pb || props.py,
+      }}
+      className={props.className}>
+      {props.children}
+    </section>
+  )
+}
+
+export default Section

From 7cf48898f51c330ab9c68071baf4d5c4f5c485e4 Mon Sep 17 00:00:00 2001
From: wralith <wralithdev@gmail.com>
Date: Tue, 8 Nov 2022 15:14:28 +0300
Subject: [PATCH 2/2] Implement tailwind with conditionals

---
 components/Section/Section.md  | 30 +++++++++++------------
 components/Section/Section.tsx | 44 +++++++++++++++++-----------------
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/components/Section/Section.md b/components/Section/Section.md
index 3e057ef..5665498 100644
--- a/components/Section/Section.md
+++ b/components/Section/Section.md
@@ -4,26 +4,26 @@ Section component can be used to wrap content to apply padding and background co
 
 ## Props List
 
+_Type_ **Size**: `sm`, `md`, `lg` or `xl`
+| `sm` | `md` | `lg` | `xl` |
+| ---- | ---- | ---- | ---- |
+| 0.5rem | 1rem | 1.5rem | 2.5rem |
+
 | Name            | Type      | Optional |
 | --------------- | --------- | -------- |
-| className       | string    | ✔        |
-| p               | string    | ✔        |
-| px              | string    | ✔        |
-| py              | string    | ✔        |
-| pt              | string    | ✔        |
-| pb              | string    | ✔        |
-| pl              | string    | ✔        |
-| pr              | string    | ✔        |
-| backgroundColor | string    | ✔        |
+| className       | Size      | ✔        |
+| p               | Size      | ✔        |
+| px              | Size      | ✔        |
+| py              | Size      | ✔        |
+| pt              | Size      | ✔        |
+| pb              | Size      | ✔        |
+| pl              | Size      | ✔        |
+| pr              | Size      | ✔        |
+| backgroundColor | Size      | ✔        |
 | children        | ReactNode | ✖        |
 
 ## Usage
 
 ```tsx
-<Section px="0.5rem" py="1rem" backgroundColor="red">
+<Section px="sm" py="lg" backgroundColor="bg-red-600">
 ```
-
-- For paddings you need to specify the unit. (i.e. `rem`, `em` or `px`)
-- `backgroundColor` can take anything that is valid for css. (i.e. `red`, `#000`, `rgb(0, 0, 0)`)
-- `pb` and `pt` will override `py`
-- `pl` and `pr` will override `px`
diff --git a/components/Section/Section.tsx b/components/Section/Section.tsx
index 2aec3c4..0b8245e 100644
--- a/components/Section/Section.tsx
+++ b/components/Section/Section.tsx
@@ -1,33 +1,33 @@
 import { ReactNode } from 'react'
 
+type Size = 'sm' | 'md' | 'lg' | 'xl'
+type BgColorProp = `${'bg-'}${string}`
+
 interface Props {
   className?: string
-  p?: string
-  px?: string
-  py?: string
-  pt?: string
-  pb?: string
-  pl?: string
-  pr?: string
-  backgroundColor?: string
+  p?: Size
+  px?: Size
+  py?: Size
+  pt?: Size
+  pb?: Size
+  pl?: Size
+  pr?: Size
+  bgColor?: BgColorProp
   children: ReactNode
 }
 
 const Section = (props: Props) => {
-  return (
-    <section
-      style={{
-        backgroundColor: props.backgroundColor,
-        padding: props.p,
-        paddingLeft: props.pl || props.px,
-        paddingRight: props.pl || props.px,
-        paddingTop: props.pt || props.py,
-        paddingBottom: props.pb || props.py,
-      }}
-      className={props.className}>
-      {props.children}
-    </section>
-  )
+  let p = props.p == 'sm' ? 'p-2' : props.p == 'md' ? 'p-4' : props.p == 'lg' ? 'p-6' : props.p == 'xl' ? 'p-10' : null
+  let px = props.px == 'sm' ? 'px-2' : props.px == 'md' ? 'px-4' : props.px == 'lg' ? 'px-6' : props.px == 'xl' ? 'px-10' : null
+  let py = props.py == 'sm' ? 'py-2' : props.py == 'md' ? 'py-4' : props.py == 'lg' ? 'py-6' : props.py == 'xl' ? 'py-10' : null
+  let pt = props.pt == 'sm' ? 'pt-2' : props.pt == 'md' ? 'pt-4' : props.pt == 'lg' ? 'pt-6' : props.pt == 'xl' ? 'pt-10' : null
+  let pb = props.pb == 'sm' ? 'pb-2' : props.pb == 'md' ? 'pb-4' : props.pb == 'lg' ? 'pb-6' : props.pb == 'xl' ? 'pb-10' : null
+  let pl = props.pl == 'sm' ? 'pl-2' : props.pl == 'md' ? 'pl-4' : props.pl == 'lg' ? 'pl-6' : props.pl == 'xl' ? 'pl-10' : null
+  let pr = props.pr == 'sm' ? 'pr-2' : props.pr == 'md' ? 'pr-4' : props.pr == 'lg' ? 'pr-6' : props.pr == 'xl' ? 'pr-10' : null
+
+  let classString = [p, px, py, pt, pb, pl, pr, props.bgColor, props.className].filter(Boolean).join(' ')
+
+  return <section className={classString}>{props.children}</section>
 }
 
 export default Section