docs: create component for rendering screenshots

Author: hassankhan

docs/src/components/Screenshot/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import * as styles from './styles.module.scss';
+
+interface ScreenshotProps {
+  alt?: string;
+  src: string;
+}
+
+export const Screenshot = ({ alt, src }: ScreenshotProps) => {
+  return (
+    <div className={styles.screenshot} style={{ textAlign: 'center'}}>
+      <img
+        alt={alt}
+        src={src}
+        style={{ border: 'none' }}
+        width="100%"
+      />
+    </div>
+  );
+};
+

docs/src/components/Screenshot/styles.module.scss

@@ -0,0 +1,35 @@
+@import "../../../static/styles/variables.scss";
+
+.screenshot {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  padding-top: calc(1vw + 1.5rem);
+  background: #ccc linear-gradient(#ddd, #bbb 4vw, #eee 4.15vw);
+  border-radius: .4vw .4vw 0 0;
+  width: 50vw;
+  /*width: 100vh;*/
+  max-width: 100%;
+  //height: 35vw;
+
+  &:before {
+    content: "•••";
+    position: absolute;
+    top: 0;
+    left: 0.5vw;
+    font-size: 3.2vw;
+    line-height: 2vw;
+    color: #ddd;
+    //letter-spacing: .3vw;
+  }
+
+  > img {
+    margin: 0 !important;
+    display: block;
+    width: 400%;
+    //margin: -46.5vw 0 0 -150%;
+    border: 0;
+    //height: calc(4 * (35vw - 4vw));
+    //transform: scale(.25);
+  }
+}

docs/src/templates/DocTemplate.tsx

@@ -46,6 +46,7 @@ import { ParameterTable } from '../components/ReferenceDocs/ParameterTable';
 import { Snippet, SnippetGroup } from '../components/Snippets/SnippetGroup';
 import { CodeTabs } from '../components/CodeTabs';
 import InlineButton from '../components/InlineButton/InlineButton';
+import { Screenshot } from '../components/Screenshot';
 
 const MyH4: React.FC<{ children: string }> = ({ children }) => {
   return (<h4 id={kebabCase(children)} name={kebabCase(children)}>{children}</h4>);
@@ -70,6 +71,7 @@ const components = {
   h4: MyH4,
   CodeTabs,
   Btn: InlineButton,
+  Screenshot,
 };
 
 const MDX = (props) => (