From 27979180c13a5be54a0a962c30010999dc26863c Mon Sep 17 00:00:00 2001
From: Irwing Naranjo <khalisser@gmail.com>
Date: Sat, 20 Apr 2024 12:20:25 -0400
Subject: [PATCH 1/2] feat: add section component v1

---
 src/components/Section/Sections.tsx | 33 +++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/components/Section/Sections.tsx

diff --git a/src/components/Section/Sections.tsx b/src/components/Section/Sections.tsx
new file mode 100644
index 0000000..562e893
--- /dev/null
+++ b/src/components/Section/Sections.tsx
@@ -0,0 +1,33 @@
+interface SectionProps extends React.HTMLProps<HTMLDivElement> {
+  colsSm: number;
+  colsMd: number;
+  colsLg: number;
+  gap: number;
+}
+
+function validateNumberCols(cols: number) {
+  return (cols === undefined || cols < 1) ? 1 : cols;
+}
+
+export const Section: React.FC<SectionProps> = ({ children, colsSm, colsMd, colsLg, gap, ...props }) => {
+
+  colsSm = validateNumberCols(colsSm);
+  colsMd = validateNumberCols(colsMd);
+  colsLg = validateNumberCols(colsLg);
+
+  const STYLES = `
+    w-full
+    gap-${gap}
+    grid
+    grid-cols-1
+    sm:grid-cols-${colsSm}
+    md:grid-cols-${colsMd}
+    lg:grid-cols-${colsLg}
+  `;
+
+  return (
+    <section {...props} className={props.className + STYLES}>
+      {children}
+    </section>
+  );
+};

From 647f308a1581e6f97c8753cec33f29b15bb2f6e2 Mon Sep 17 00:00:00 2001
From: Irwing Naranjo <khalisser@gmail.com>
Date: Sat, 20 Apr 2024 12:26:50 -0400
Subject: [PATCH 2/2] fix: prettier style code

---
 src/components/Section/Sections.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Section/Sections.tsx b/src/components/Section/Sections.tsx
index 562e893..f333025 100644
--- a/src/components/Section/Sections.tsx
+++ b/src/components/Section/Sections.tsx
@@ -6,11 +6,17 @@ interface SectionProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 function validateNumberCols(cols: number) {
-  return (cols === undefined || cols < 1) ? 1 : cols;
+  return cols === undefined || cols < 1 ? 1 : cols;
 }
 
-export const Section: React.FC<SectionProps> = ({ children, colsSm, colsMd, colsLg, gap, ...props }) => {
-
+export const Section: React.FC<SectionProps> = ({
+  children,
+  colsSm,
+  colsMd,
+  colsLg,
+  gap,
+  ...props
+}) => {
   colsSm = validateNumberCols(colsSm);
   colsMd = validateNumberCols(colsMd);
   colsLg = validateNumberCols(colsLg);