Merge pull request #114 from reubenmiller/feat-browser-window

feat: add new BrowserWindow component to improve screenshot appearance

Author: reubenmiller

src/components/BrowserWindow/IframeWindow.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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 ReactNode} from 'react';
+
+import BrowserWindow from './index';
+
+// Quick and dirty component, to improve later if needed
+export default function IframeWindow({url}: {url: string}): ReactNode {
+  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>
+  );
+}

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): ReactNode {
+  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>
+  );
+}

src/components/BrowserWindow/styles.module.css

@@ -0,0 +1,87 @@
+/**
+ * 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;
+}