From 0592d1761347b0aa027807bec1f0cd712ff1fcb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZiyedB=E2=80=9D?= <zdiyez+githubjob@gmail.com>
Date: Tue, 2 Mar 2021 20:45:44 +0000
Subject: [PATCH 1/2] feat(card): add card component + extend tailwind instead
 of overwrite

---
 src/components/layouts/Card/Card.tsx       |  7 +++++
 src/components/layouts/Card/CardBody.tsx   |  7 +++++
 src/components/layouts/Card/CardFooter.tsx |  7 +++++
 src/components/layouts/Card/CardHeader.tsx |  7 +++++
 src/components/layouts/Card/index.ts       |  4 +++
 tailwind.config.js                         | 34 ++++++++++++----------
 6 files changed, 50 insertions(+), 16 deletions(-)
 create mode 100644 src/components/layouts/Card/Card.tsx
 create mode 100644 src/components/layouts/Card/CardBody.tsx
 create mode 100644 src/components/layouts/Card/CardFooter.tsx
 create mode 100644 src/components/layouts/Card/CardHeader.tsx
 create mode 100644 src/components/layouts/Card/index.ts

diff --git a/src/components/layouts/Card/Card.tsx b/src/components/layouts/Card/Card.tsx
new file mode 100644
index 0000000..6410dd9
--- /dev/null
+++ b/src/components/layouts/Card/Card.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Card: React.FC<{}> = ({ children }) => {
+  return <div className="inline-block bg-light shadow-lg overflow-hidden sm:rounded-lg">{children}</div>;
+};
+
+export default Card;
diff --git a/src/components/layouts/Card/CardBody.tsx b/src/components/layouts/Card/CardBody.tsx
new file mode 100644
index 0000000..5b4bc13
--- /dev/null
+++ b/src/components/layouts/Card/CardBody.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardBody: React.FC<{}> = ({ children }) => {
+  return <div className="px-4 py-5 sm:px-6">{children}</div>;
+};
+
+export default CardBody;
diff --git a/src/components/layouts/Card/CardFooter.tsx b/src/components/layouts/Card/CardFooter.tsx
new file mode 100644
index 0000000..921085a
--- /dev/null
+++ b/src/components/layouts/Card/CardFooter.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardFooter: React.FC<{}> = ({ children }) => {
+  return <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">{children}</div>;
+};
+
+export default CardFooter;
diff --git a/src/components/layouts/Card/CardHeader.tsx b/src/components/layouts/Card/CardHeader.tsx
new file mode 100644
index 0000000..f456e6e
--- /dev/null
+++ b/src/components/layouts/Card/CardHeader.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const CardHeader: React.FC<{}> = ({ children }) => {
+  return <div className="mx-4 px-4 py-3 text-left text-2xl border-b border-gray-200">{children}</div>;
+};
+
+export default CardHeader;
diff --git a/src/components/layouts/Card/index.ts b/src/components/layouts/Card/index.ts
new file mode 100644
index 0000000..95e3ff7
--- /dev/null
+++ b/src/components/layouts/Card/index.ts
@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { default as CardBody } from './CardBody';
+export { default as CardFooter } from './CardFooter';
+export { default as CardHeader } from './CardHeader';
diff --git a/tailwind.config.js b/tailwind.config.js
index 296c1b9..e3c4511 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,23 +1,25 @@
 module.exports = {
   theme: {
-    colors: {
-      primary: {
-        DEFAULT: 'var(--color-primary)',
-        light: 'var(--color-primary-light)',
+    extend: {
+      colors: {
+        primary: {
+          DEFAULT: 'var(--color-primary)',
+          light: 'var(--color-primary-light)',
+        },
+        secondary: {
+          DEFAULT: 'var(--color-secondary)',
+          light: 'var(--color-secondary-light)',
+          lightest: 'var(--color-secondary-lightest)',
+          darkest: 'var(--color-secondary-darkest)',
+        },
+        dark: 'var(--color-dark)',
+        light: 'var(--color-light)',
       },
-      secondary: {
-        DEFAULT: 'var(--color-secondary)',
-        light: 'var(--color-secondary-light)',
-        lightest: 'var(--color-secondary-lightest)',
-        darkest: 'var(--color-secondary-darkest)',
+      fontFamily: {
+        sans: ['Poppins'],
+        serif: ['Georgia'],
+        mono: ['Roboto'],
       },
-      dark: 'var(--color-dark)',
-      light: 'var(--color-light)',
-    },
-    fontFamily: {
-      sans: ['Poppins'],
-      serif: ['Georgia'],
-      mono: ['Roboto'],
     },
   },
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

From 028d95a099bdd33b0e534ec41380061ac102835b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CZiyedB=E2=80=9D?= <zdiyez+githubjob@gmail.com>
Date: Mon, 8 Mar 2021 20:06:11 +0000
Subject: [PATCH 2/2] pr feedback

---
 src/components/{layouts => common}/Card/Card.tsx       | 0
 src/components/{layouts => common}/Card/CardBody.tsx   | 0
 src/components/{layouts => common}/Card/CardFooter.tsx | 0
 src/components/{layouts => common}/Card/CardHeader.tsx | 0
 src/components/{layouts => common}/Card/index.ts       | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{layouts => common}/Card/Card.tsx (100%)
 rename src/components/{layouts => common}/Card/CardBody.tsx (100%)
 rename src/components/{layouts => common}/Card/CardFooter.tsx (100%)
 rename src/components/{layouts => common}/Card/CardHeader.tsx (100%)
 rename src/components/{layouts => common}/Card/index.ts (100%)

diff --git a/src/components/layouts/Card/Card.tsx b/src/components/common/Card/Card.tsx
similarity index 100%
rename from src/components/layouts/Card/Card.tsx
rename to src/components/common/Card/Card.tsx
diff --git a/src/components/layouts/Card/CardBody.tsx b/src/components/common/Card/CardBody.tsx
similarity index 100%
rename from src/components/layouts/Card/CardBody.tsx
rename to src/components/common/Card/CardBody.tsx
diff --git a/src/components/layouts/Card/CardFooter.tsx b/src/components/common/Card/CardFooter.tsx
similarity index 100%
rename from src/components/layouts/Card/CardFooter.tsx
rename to src/components/common/Card/CardFooter.tsx
diff --git a/src/components/layouts/Card/CardHeader.tsx b/src/components/common/Card/CardHeader.tsx
similarity index 100%
rename from src/components/layouts/Card/CardHeader.tsx
rename to src/components/common/Card/CardHeader.tsx
diff --git a/src/components/layouts/Card/index.ts b/src/components/common/Card/index.ts
similarity index 100%
rename from src/components/layouts/Card/index.ts
rename to src/components/common/Card/index.ts