From 831a9c8ea019a3d86e994ff0e060dd4337a84d1f Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Fri, 9 Feb 2024 18:29:00 +0330
Subject: [PATCH] refactor: add variant to container

---
 src/components/about/about.module.css         | 3 ---
 src/components/about/about.tsx                | 2 +-
 src/components/container/container.module.css | 4 ++++
 src/components/container/container.tsx        | 9 +++++++--
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css
index 5c4d90b..7325c2a 100644
--- a/src/components/about/about.module.css
+++ b/src/components/about/about.module.css
@@ -35,9 +35,6 @@
   }
 
   & .desc {
-    width: 100%;
-    max-width: 450px;
-    margin: 0 auto;
     line-height: 1.6;
     color: var(--color-foreground-subtle);
     text-align: center;
diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx
index c4e4c6d..26836f2 100644
--- a/src/components/about/about.tsx
+++ b/src/components/about/about.tsx
@@ -18,7 +18,7 @@ export function About() {
 
   return (
     <section className={styles.about}>
-      <Container>
+      <Container tight>
         <div className={styles.iconContainer}>
           <div className={styles.tail} />
           <div className={styles.icon}>
diff --git a/src/components/container/container.module.css b/src/components/container/container.module.css
index 618b9be..6210e59 100644
--- a/src/components/container/container.module.css
+++ b/src/components/container/container.module.css
@@ -2,4 +2,8 @@
   width: 90%;
   max-width: 600px;
   margin: 0 auto;
+
+  &.tight {
+    max-width: 450px;
+  }
 }
diff --git a/src/components/container/container.tsx b/src/components/container/container.tsx
index 597823a..afa3fca 100644
--- a/src/components/container/container.tsx
+++ b/src/components/container/container.tsx
@@ -5,8 +5,13 @@ import styles from './container.module.css';
 interface ContainerProps {
   children: React.ReactNode;
   className?: string;
+  tight?: boolean;
 }
 
-export function Container({ children, className }: ContainerProps) {
-  return <div className={cn(styles.container, className)}>{children}</div>;
+export function Container({ children, className, tight }: ContainerProps) {
+  return (
+    <div className={cn(styles.container, className, tight && styles.tight)}>
+      {children}
+    </div>
+  );
 }