67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import ReactDOM from "react-dom";
|
|
import Arrow from "../images/Arrow.svg";
|
|
import CosmosDB_20170829 from "../images/CosmosDB_20170829.svg";
|
|
import Explorer from "../images/Explorer.svg";
|
|
import Feedback from "../images/Feedback.svg";
|
|
import Quickstart from "../images/Quickstart.svg";
|
|
import "../less/index.less";
|
|
|
|
const Index = (): JSX.Element => {
|
|
const [navigationSelection, setNavigationSelection] = useState("quickstart");
|
|
|
|
const quickstart_click = () => {
|
|
setNavigationSelection("quickstart");
|
|
};
|
|
|
|
const explorer_click = () => {
|
|
setNavigationSelection("explorer");
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<header className="header HeaderBg">
|
|
<div className="items">
|
|
<img className="DocDBicon" src={CosmosDB_20170829} alt="Azure Cosmos DB" />
|
|
<a className="createdocdbacnt" href="https://aka.ms/documentdbcreate" rel="noreferrer" target="_blank">
|
|
Create an Azure Cosmos DB account <img className="rightarrowimg" src={Arrow} alt="" />
|
|
</a>
|
|
<span className="title">Azure Cosmos DB Emulator</span>
|
|
</div>
|
|
</header>
|
|
<nav className="fixedleftpane">
|
|
<div
|
|
id="Quickstart"
|
|
onClick={quickstart_click}
|
|
className={navigationSelection === "quickstart" ? "topSelected" : ""}
|
|
>
|
|
<img id="imgiconwidth1" src={Quickstart} alt="Open Quick Start" />
|
|
<span className="menuQuickStart">Quickstart</span>
|
|
</div>
|
|
|
|
<div id="Explorer" onClick={explorer_click} className={navigationSelection === "explorer" ? "topSelected" : ""}>
|
|
<img id="imgiconwidth1" src={Explorer} alt="Open Data Explorer" />
|
|
<span className="menuExplorer">Explorer</span>
|
|
</div>
|
|
|
|
<div>
|
|
<a className="feedbackstyle" href="https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Emulator%20Feedback">
|
|
<img id="imgiconwidth1" src={Feedback} alt="Report Issue" />
|
|
<span className="menuExplorer">Report Issue</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
{navigationSelection === "quickstart" && (
|
|
<iframe name="quickstart" className="iframe" src="quickstart.html"></iframe>
|
|
)}
|
|
|
|
{navigationSelection === "explorer" && (
|
|
<iframe name="explorer" className="iframe" src="explorer.html?platform=Emulator"></iframe>
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<Index />, document.getElementById("root"));
|