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;
--
2.39.5