PR-188649:

Creating the first initial version of the create component library.

src/@types/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}

src/components/Card/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+import "./style.sass";
+
+type TCardProps = {
+  title?: string,
+  children?: JSX.Element,
+};
+
+const Card: FC<TCardProps> = ({ title, children}) => {
+  return (
+    <div className="Card">
+      <div className="Title">{title}</div>
+
+      <div className="Content">{children}</div>
+    </div>
+  );
+};
+
+export { Card, TCardProps }

src/components/Card/style.css

@@ -0,0 +1,25 @@
+.Card {
+  background-color: #20b0f3;
+  border-radius: 10px;
+  border: 3px solid #20b0f3;
+  color: #ffffff;
+  font-weight: 700;
+  margin: 10px;
+  display: flex;
+  flex-direction: column;
+  min-width: 500px;
+  max-width: 500px;
+}
+
+.Card .Title {
+  padding: 15px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.Card .Content {
+  flex: 1;
+  padding: 30px;
+  background-color: #ffffff;
+  color: #000000;
+}

src/components/Card/style.min.css

@@ -0,0 +1 @@
+.Card{background-color:#20b0f3;border-radius:10px;border:3px solid #20b0f3;color:#ffffff;font-weight:700;margin:10px;display:flex;flex-direction:column;min-width:500px;max-width:500px}.Card .Title{padding:15px 0;display:flex;justify-content:center}.Card .Content{flex:1;padding:30px;background-color:#ffffff;color:#000000}

src/components/Card/style.sass

@@ -0,0 +1,22 @@
+.Card
+  background-color: #20b0f3
+  border-radius: 10px
+  border: 3px solid #20b0f3
+  color: #ffffff
+  font-weight: 700
+  margin: 10px
+  display: flex
+  flex-direction: column
+  min-width: 500px
+  max-width: 500px
+
+  .Title
+    padding: 15px 0
+    display: flex
+    justify-content: center
+
+  .Content
+    flex: 1
+    padding: 30px
+    background-color: #ffffff
+    color: #000000

src/components/index.tsx

@@ -0,0 +1 @@
+export * from './Card';