Merge branch 'main' into chore/add-github-actions-deployment

src/App.tsx

@@ -1,18 +1,43 @@
+// components
 import Section from "./components/common/section/Section";
 import Header from "./components/header/Header";
-import Color from "./components/sections/color/Color";
+import ColorSection from "./components/sections/color/ColorSection";
+import GapSection from "./components/sections/gap/GapSection";
+import MarginSection from "./components/sections/margin/MarginSection";
+import PaddingSection from "./components/sections/padding/PaddingSection";
 
 const App = () => {
   return (
     <>
       <Header />
       <main>
         <Section
-          id="color_section"
+          id="color section"
           title={"colors"}
           desc={"Basic colors ready for use!"}
         >
-          <Color />
+          <ColorSection />
+        </Section>
+        <Section
+          id="margin section"
+          title="margin"
+          desc="The space around the border of an element."
+        >
+          <MarginSection />
+        </Section>
+        <Section
+          id="padding section"
+          title="padding"
+          desc="The space between the content and the border of an element"
+        >
+          <PaddingSection />
+        </Section>
+        <Section
+          id="gap section"
+          title="gap"
+          desc="The distance between contents"
+        >
+          <GapSection />
         </Section>
       </main>
     </>

src/components/common/grid/Grid.tsx

@@ -1,9 +1,8 @@
-import { ReactNode } from "react";
 import gridStyles from "./grid.module.scss";
 
 export type GridType = {
   className?: string;
-  children: ReactNode;
+  children: React.ReactNode;
 };
 
 const Grid = ({ className, children }: GridType) => {

src/components/common/section/section.module.scss

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 100px 0;
+  padding: 50px 0;
   .heading {
     margin-bottom: 16px;
     .title {

src/components/sections/color/Color.tsx → src/components/sections/color/ColorSection.tsx

@@ -1,13 +1,13 @@
 import { colors } from "../../../lib/colors";
 import Grid from "../../common/grid/Grid";
 import ColorCard from "../../ui/colorcard/ColorCard";
-import colorStyles from "./color.module.scss";
+import colorStyles from "./color-section.module.scss";
 
 export type TextColorProps = {
   hex: string;
 };
 
-const Color = () => {
+const ColorSection = () => {
   const renderColors = () => {
     if (colors)
       return colors
@@ -24,4 +24,4 @@ const Color = () => {
   return <Grid className={`${colorStyles.color_grid}`}>{renderColors()}</Grid>;
 };
 
-export default Color;
+export default ColorSection;

src/components/sections/gap/GapSection.tsx

@@ -0,0 +1,37 @@
+import styles from "./gap-section.module.scss";
+import Grid from "../../common/grid/Grid";
+import Card from "../../ui/card/Card";
+
+type Props = {};
+
+const GapSection = (props: Props) => {
+  return (
+    <Grid className={`${styles.grid}`}>
+      <Card content={<MarginBox spacingSize="2" />} details="extra small" />
+      <Card content={<MarginBox spacingSize="4" />} details="small" />
+      <Card content={<MarginBox spacingSize="6" />} details="medium" />
+      <Card content={<MarginBox spacingSize="8" />} details="large" />
+      <Card content={<MarginBox spacingSize="8" />} details="extra large" />
+      <Card content={<MarginBox spacingSize="16" />} details="2XL" />
+    </Grid>
+  );
+};
+
+type MarginBoxProps = {
+  spacingSize: string;
+};
+
+const MarginBox = ({ spacingSize }: MarginBoxProps) => {
+  return (
+    <div className={`${styles.gap_wrapper}`}>
+      <div>{spacingSize}</div>
+      <div
+        className={`${styles.gap_content}`}
+        style={{ width: spacingSize + "px " }}
+      ></div>
+      <p style={{ textTransform: "none" }}>px</p>
+    </div>
+  );
+};
+
+export default GapSection;

src/components/sections/gap/gap-section.module.scss

@@ -0,0 +1,18 @@
+@import "../../../styles/variables/colors";
+@import "../../../styles/variables/border";
+@import "../../../styles/variables/spacing";
+
+.grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: $lg;
+}
+
+.gap_wrapper {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  .gap_content {
+    background-color: lightblue;
+    height: 100%;
+  }
+}

src/components/sections/margin/MarginSection.tsx

@@ -0,0 +1,34 @@
+import Grid from "../../common/grid/Grid";
+import Card from "../../ui/card/Card";
+import styles from "./margin-section.module.scss";
+
+type Props = {};
+
+const MarginSection = (props: Props) => {
+  return (
+    <Grid className={`${styles.grid}`}>
+      <Card content={<MarginBox spacingSize="2px" />} details="extra small" />
+      <Card content={<MarginBox spacingSize="4px" />} details="small" />
+      <Card content={<MarginBox spacingSize="6px" />} details="medium" />
+      <Card content={<MarginBox spacingSize="8px" />} details="large" />
+      <Card content={<MarginBox spacingSize="8px" />} details="extra large" />
+      <Card content={<MarginBox spacingSize="16px" />} details="2XL" />
+    </Grid>
+  );
+};
+
+type MarginBoxProps = {
+  spacingSize: string;
+};
+
+const MarginBox = ({ spacingSize }: MarginBoxProps) => {
+  return (
+    <div className={`${styles.margin_wrapper}`}>
+      <div className={`${styles.margin_content}`} style={{ margin: spacingSize }}>
+        {spacingSize}
+      </div>
+    </div>
+  );
+};
+
+export default MarginSection;

src/components/sections/margin/margin-section.module.scss

@@ -0,0 +1,19 @@
+@import "../../../styles/variables/colors";
+@import "../../../styles/variables/border";
+@import "../../../styles/variables/spacing";
+
+.grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: $lg;
+}
+
+.margin_wrapper {
+  background-color: orange;
+  border-radius: $sm;
+  .margin_content {
+    text-align: center;
+    text-transform: capitalize;
+    border: $thin solid black;
+    border-radius: $sm;
+  }
+}

src/components/sections/padding/PaddingSection.tsx

@@ -0,0 +1,30 @@
+import Grid from "../../common/grid/Grid";
+import Card from "../../ui/card/Card";
+import styles from "./padding-section.module.scss";
+
+const PaddingSection = () => {
+  return (
+    <Grid className={`${styles.grid}`}>
+      <Card content={<PaddingBox spacingSize="2px" />} details="extra small" />
+      <Card content={<PaddingBox spacingSize="4px" />} details="small" />
+      <Card content={<PaddingBox spacingSize="6px" />} details="medium" />
+      <Card content={<PaddingBox spacingSize="8px" />} details="large" />
+      <Card content={<PaddingBox spacingSize="8px" />} details="extra large" />
+      <Card content={<PaddingBox spacingSize="16px" />} details="2XL" />
+    </Grid>
+  );
+};
+
+type PaddingBoxProps = {
+  spacingSize: string;
+};
+
+const PaddingBox = ({ spacingSize }: PaddingBoxProps) => {
+  return (
+    <div className={`${styles.padding_content}`} style={{ padding: spacingSize }}>
+      {spacingSize}
+    </div>
+  );
+};
+
+export default PaddingSection;

src/components/sections/padding/padding-section.module.scss

@@ -0,0 +1,16 @@
+@import "../../../styles/variables/colors";
+@import "../../../styles/variables//border";
+@import '../../../styles/variables/spacing';
+
+.grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: $lg;
+}
+
+.padding_content {
+  background-color: rgb(154, 255, 114);
+  text-align: center;
+  text-transform: capitalize;
+  border: $thin solid gray;
+  border-radius: $sm;
+}

src/components/ui/card/Card.tsx

@@ -0,0 +1,17 @@
+import styles from "./card.module.scss";
+
+type CardProps = {
+  content: React.ReactNode;
+  details: string;
+};
+
+const Card = ({ content, details }: CardProps) => {
+  return (
+    <div className={`${styles.card}`}>
+      {content}
+      <p className="">{details}</p>
+    </div>
+  );
+};
+
+export default Card;

src/components/ui/card/card.module.scss

@@ -0,0 +1,15 @@
+@import "../../../styles/variables/colors";
+@import '../../../styles/variables/border';
+
+.card {
+  max-width: 300px;
+  min-width: 150px;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  padding: 8px 16px;
+  // border: $regular solid rgb(121, 121, 121);
+  border-radius: $sm;
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  text-transform: capitalize;
+}

src/styles/variables/_border.scss

@@ -0,0 +1,13 @@
+// thickness
+$none: 0px;
+$thin: 1px;
+$regular: 2px;
+$thick: 3px;
+
+// radius
+$none: 0px;
+$xs: 2px;
+$sm: 4px;
+$md: 6px;
+$lg: 8px;
+$xl: 16px;

src/styles/variables/_spacing.scss

@@ -0,0 +1,6 @@
+$none: 0px;
+$xs: 2px;
+$sm: 4px;
+$md: 6px;
+$lg: 8px;
+$xl: 16px;