From 2b845e708da2779b46fbb10339208bc136894815 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Fri, 29 Jul 2022 17:25:54 +0300
Subject: [PATCH] added changes to
 Container.stories.tsx,Container.tsx,tailwind.config.js

---
 src/components/Container.stories.tsx | 45 ++++++++++++++++++++++++++++
 src/components/Container.tsx         | 37 +++++++++++++----------
 tailwind.config.js                   |  8 ++---
 3 files changed, 70 insertions(+), 20 deletions(-)
 create mode 100644 src/components/Container.stories.tsx

diff --git a/src/components/Container.stories.tsx b/src/components/Container.stories.tsx
new file mode 100644
index 0000000..47b9a09
--- /dev/null
+++ b/src/components/Container.stories.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import Container from './Container';
+
+export default {
+  // Title inside navigation bar
+  title: 'Container',
+  // Component to test
+  component: Container,
+  // Clarifying the way how to process specific
+  // properties of your component and which values
+  // it can accept.
+} as ComponentMeta<typeof Container>;
+
+/**
+ * This is a way to define a tempalte for your component.
+ * 
+ * This template should cover all the states.
+ * 
+ * In most cases you should just distruct args attribute
+ * on a returning component.
+ */
+const Template: ComponentStory<typeof Container> = (args) => (
+  <Container {...args}><div className='w-40 h-40 bg-yellow-400'>simple</div></Container>
+);
+//
+/* -------------------------------------------------------------------------- */
+/*                          States of your component                          */
+/* -------------------------------------------------------------------------- */
+
+export const Desktop: ComponentStory<typeof Container> = Template.bind({});
+Desktop.parameters = {
+    viewport: {
+      defaultViewport: 'desktop',
+      styles: {
+        height: '568px',
+        width: '320px',
+      },
+    },
+    
+    
+}
\ No newline at end of file
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index b53cf16..c7c432d 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,17 +1,22 @@
+import classNames from "classnames";
 type Props = {
-    children: React.ReactNode;
-    className?: string;
-  }
-
-  /* -------------------------------------------------------------------------- */
-  /*                      default is 840px as our template                      */
-  /* -------------------------------------------------------------------------- */
-  
-  export default function Container({children, className}: Props) {
-    return (
-      <div className={ (className) ? className : 'w-[840px]' }>
-        {children}
-      </div>
-    )
-  }
-  
\ No newline at end of file
+  /**
+   * Content of compnent
+   */
+  children: React.ReactNode;
+  /**
+   * Compnent styling
+   */
+  className?: string;
+}
+/**
+ * Main container to handle page content max-width on
+ * different screen sizes
+ */
+export default function Container({children, className}: Props) {
+  return (
+    <div className={ classNames('container mx-auto', className) }>
+      {children}
+    </div>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index ce47318..f8b96c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -67,7 +67,7 @@ module.exports = {
     function ({ addComponents }) {
       addComponents({
         '.container': {
-          maxWidth: '100%',
+          maxWidth: '840px',
           paddingLeft: '0.5rem',
           paddingRight: '0.5rem',
           '@screen sm': {
@@ -77,13 +77,13 @@ module.exports = {
             maxWidth: 'calc(100% - 30px)',
           },
           '@screen lg': {
-            maxWidth: '960px',
+            maxWidth: '840px',
           },
           '@screen xl': {
-            maxWidth: '1080px',
+            maxWidth: '840px',
           },
           '@screen 2xl': {
-            maxWidth: '1080px',
+            maxWidth: '840px',
           },
         },
       });