feat(docs): add new component to display code snippets side-by-side

docs/src/components/Snippets/SnippetGroup.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import * as styles from './styles.module.scss';
+
+export const Snippet = ({ children }) => children;
+
+export const SnippetGroup = ({ children }) => {
+  return (
+    <div className={styles.snippetGroup}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,4 @@
+.snippetGroup {
+  display: flex;
+  gap: 1rem;
+}

docs/src/templates/DocTemplate.tsx

@@ -42,6 +42,7 @@ import ScrollSpyH3 from '../components/Headers/ScrollSpyH3';
 import MyH2 from '../components/Headers/MyH2';
 import MyH3 from '../components/Headers/MyH3';
 import { ParameterTable } from '../components/ReferenceDocs/ParameterTable';
+import { Snippet, SnippetGroup } from '../components/Snippets/SnippetGroup';
 
 const MyH4: React.FC<{ children: string }> = ({ children }) => {
   return (<h4 id={kebabCase(children)} name={kebabCase(children)}>{children}</h4>);
@@ -59,6 +60,8 @@ const components = {
   CubeQueryResultSet,
   GitHubFolderLink,
   ParameterTable,
+  SnippetGroup,
+  Snippet,
   h2: ScrollSpyH2,
   h3: ScrollSpyH3,
   h4: MyH4,