chore: Add FAB Playground (#116)

Author: jugshaurya

Diff for: src/containers/Navigation/index.jsx

@@ -40,6 +40,7 @@ import CheckBox from "../../content/CheckBox";
 import BottomSheet from "../../content/BottomSheet";
 import ButtonGroup from "../../content/ButtonGroup";
 import Divider from "../../content/Divider";
+import FAB from "../../content/FAB";
 import SwitchComponent from "../../content/Switch";
 
 export const Components_Index = [
@@ -84,6 +85,11 @@ export const Components_Index = [
     component: Divider,
     path: "/divider",
   },
+  {
+    name: "FAB",
+    component: FAB,
+    path: "/fab",
+  },
 
   {
     name: "Header",

Diff for: src/content/FAB/fab.playground.jsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { FAB } from "react-native-elements";
+
+import Playground from "../../components/playground";
+import { useView, PropTypes } from "react-view";
+
+const FabPlayground = () => {
+  const params = useView({
+    componentName: "FAB",
+    props: {
+      style: {
+        type: PropTypes.Object,
+        value: `{width:"80%",margin:20}`,
+      },
+      placement: {
+        type: PropTypes.Enum,
+        options: { left: "left", right: "right" },
+        value: "left",
+      },
+      color: {
+        type: PropTypes.String,
+        value: "",
+      },
+      size: {
+        type: PropTypes.Enum,
+        options: { small: "small", large: "large" },
+        value: "small",
+      },
+      visible: {
+        type: PropTypes.Boolean,
+        value: false,
+      },
+      upperCase: {
+        type: PropTypes.Boolean,
+        value: false,
+      },
+      overlayColor: {
+        type: PropTypes.String,
+        value: "#454545",
+      },
+      title: {
+        type: PropTypes.String,
+        value: "Create",
+      },
+      icon: {
+        type: PropTypes.Object,
+        value: `{ name: 'edit', color: '#fff' }`,
+      },
+    },
+    scope: {
+      FAB,
+    },
+    imports: {
+      "react-native-elements": {
+        named: ["FAB"],
+      },
+    },
+  });
+
+  return (
+    <React.Fragment>
+      <Playground params={params} />
+    </React.Fragment>
+  );
+};
+
+export default FabPlayground;

Diff for: src/content/FAB/index.jsx

@@ -0,0 +1,20 @@
+import React, { lazy, Suspense } from "react";
+import { importMDX } from "mdx.macro";
+
+import PropDrawer from "../../components/PropDrawer";
+import Playground from "./fab.playground";
+
+const Content = lazy(() => importMDX("../Props/fab.md"));
+
+export default function FabPlayground() {
+  return (
+    <div>
+      <Playground />
+      <Suspense fallback={<div>Loading...</div>}>
+        <PropDrawer>
+          <Content />
+        </PropDrawer>
+      </Suspense>
+    </div>
+  );
+}