From e6911dc71f36f7ae38e15f70474999e0b1eb7d53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Thu, 28 Jul 2022 16:56:45 +0300
Subject: [PATCH] Card Component

---
 src/components/Card.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/Card.tsx

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..2f31835
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+/**
+ * [*]This is a container which accept children.
+ *
+ * [*] style is a conditional prop, when you pass style, you can cusomize the card:
+ *     style={{ anything: "anything" }}
+ *
+ * [*] A good example will be:
+ * <Card
+        style={{
+          border: "4px",
+          borderStyle: "solid",
+          borderColor: "red",
+          backgroundColor: "yellow",
+          ...
+        }}
+   >
+        <h1> This is a child </h1>
+  </Card> 
+ */
+export interface CardProps {
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}
+
+const Card = ({ style, children }: CardProps) => {
+  return (
+    <div className="w-100 height-auto rounded-lg p-6 m-4" style={style}>
+      {children}
+    </div>
+  );
+};
+
+export default Card;