1 files changed, 80 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
new file mode 100644
index 000000000..99b7dd3c4
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/SchemaCSVPopUp.tsx
@@ -0,0 +1,80 @@
+import React = require('react');
+import './SchemaCSVPopUp.scss';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../../../fields/Doc';
+import { Button, Type } from 'browndash-components';
+import { StrCast } from '../../../../fields/Types';
+import { MarqueeView } from '../../collections/collectionFreeForm/MarqueeView';
+
+interface SchemaCSVPopUpProps {}
+
+@observer
+export class SchemaCSVPopUp extends React.Component<SchemaCSVPopUpProps> {
+    static Instance: SchemaCSVPopUp;
+
+    @observable
+    public dataVizDoc: Doc | undefined = undefined;
+    @action
+    public setDataVizDoc = (doc: Doc) => {
+        this.dataVizDoc = doc;
+    };
+
+    @observable
+    public visible: boolean = false;
+    @action
+    public setVisible = (vis: boolean) => {
+        this.visible = vis;
+    };
+
+    public addToCollection: any | undefined;
+
+    /**
+     * Transfers the doc to the user's canvas
+     */
+    private transferToCanvas = () => {
+        if (this.dataVizDoc) this.addToCollection?.(this.dataVizDoc);
+        this.setVisible(false);
+    };
+
+    constructor(props: SchemaCSVPopUpProps) {
+        super(props);
+        SchemaCSVPopUp.Instance = this;
+    }
+
+    dataBox = () => {
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                {this.heading('Schema Table as Data Visualization Doc')}
+                <div className="image-content-wrapper">
+                        <div className="img-wrapper">
+                            <div className="img-container" style={{background: "blue"}}>
+                                <img
+                                    width={150} height={150} 
+                                />
+                            </div>
+                            <div className="btn-container">
+                                <Button text="Save to Canvas" onClick={() => this.transferToCanvas()} color={StrCast(Doc.UserDoc().userColor)} type={Type.TERT} />
+                            </div>
+                        </div>
+                        {/* {this.props.children} */}
+
+                </div>
+            </div>
+        );
+    };
+
+    heading = (headingText: string) => (
+        <div className="summary-heading">
+            <label className="summary-text">{headingText}</label>
+        </div>
+    );
+
+    render() {
+        return (
+            <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
+                {this.dataBox()}
+            </div>
+        );
+    }
+}
+\ No newline at end of file