add BrowserWindow component

Author: sserrata

demo/src/components/BrowserWindow/IframeWindow.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+
+import BrowserWindow from "./index";
+
+// Quick and dirty component, to improve later if needed
+export default function IframeWindow({ url }: { url: string }): JSX.Element {
+  return (
+    <div style={{ padding: 10 }}>
+      <BrowserWindow
+        url={url}
+        style={{
+          minWidth: "min(100%,45vw)",
+          width: 800,
+          maxWidth: "100%",
+          overflow: "hidden",
+        }}
+        bodyStyle={{ padding: 0 }}
+      >
+        <iframe
+          src={url}
+          title={url}
+          style={{ display: "block", width: "100%", height: 300 }}
+        />
+      </BrowserWindow>
+    </div>
+  );
+}

demo/src/components/BrowserWindow/index.tsx

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { type CSSProperties, type ReactNode } from "react";
+import clsx from "clsx";
+
+import styles from "./styles.module.css";
+
+interface Props {
+  children: ReactNode;
+  minHeight?: number;
+  url: string;
+  style?: CSSProperties;
+  bodyStyle?: CSSProperties;
+}
+
+export default function BrowserWindow({
+  children,
+  minHeight,
+  url = "http://localhost:3000",
+  style,
+  bodyStyle,
+}: Props): JSX.Element {
+  return (
+    <div className={styles.browserWindow} style={{ ...style, minHeight }}>
+      <div className={styles.browserWindowHeader}>
+        <div className={styles.buttons}>
+          <span className={styles.dot} style={{ background: "#f25f58" }} />
+          <span className={styles.dot} style={{ background: "#fbbe3c" }} />
+          <span className={styles.dot} style={{ background: "#58cb42" }} />
+        </div>
+        <div className={clsx(styles.browserWindowAddressBar, "text--truncate")}>
+          {url}
+        </div>
+        <div className={styles.browserWindowMenuIcon}>
+          <div>
+            <span className={styles.bar} />
+            <span className={styles.bar} />
+            <span className={styles.bar} />
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.browserWindowBody} style={bodyStyle}>
+        {children}
+      </div>
+    </div>
+  );
+}

demo/src/components/BrowserWindow/styles.module.css

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.browserWindow {
+  border: 3px solid var(--ifm-color-emphasis-200);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  margin-bottom: var(--ifm-leading);
+}
+
+.browserWindowHeader {
+  align-items: center;
+  background: var(--ifm-color-emphasis-200);
+  display: flex;
+  padding: 0.5rem 1rem;
+}
+
+.row::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.buttons {
+  white-space: nowrap;
+}
+
+.right {
+  align-self: center;
+  width: 10%;
+}
+
+[data-theme="light"] {
+  --ifm-background-color: #fff;
+}
+
+.browserWindowAddressBar {
+  flex: 1 0;
+  margin: 0 1rem 0 0.5rem;
+  border-radius: 12.5px;
+  background-color: var(--ifm-background-color);
+  color: var(--ifm-color-gray-800);
+  padding: 5px 15px;
+  font:
+    400 13px Arial,
+    sans-serif;
+  user-select: none;
+}
+
+[data-theme="dark"] .browserWindowAddressBar {
+  color: var(--ifm-color-gray-300);
+}
+
+.dot {
+  margin-right: 6px;
+  margin-top: 4px;
+  height: 12px;
+  width: 12px;
+  background-color: #bbb;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.browserWindowMenuIcon {
+  margin-left: auto;
+}
+
+.bar {
+  width: 17px;
+  height: 3px;
+  background-color: #aaa;
+  margin: 3px 0;
+  display: block;
+}
+
+.browserWindowBody {
+  background-color: var(--ifm-background-color);
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+  padding: 1rem;
+}
+
+.browserWindowBody > *:last-child {
+  margin-bottom: 0;
+}