Introduce reusable component for spacing between other components

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

src/renderer/components/gutter/gutter.module.scss

@@ -0,0 +1,14 @@
+@mixin gutterSize(
+  $sizeName,
+  $size
+) {
+  .size-#{$sizeName} {
+    min-width: $size;
+    min-height: $size;
+  }
+}
+
+$baseline: 8px;
+
+@include gutterSize('sm', 2 * $baseline);
+@include gutterSize('md', 3 * $baseline);

src/renderer/components/gutter/gutter.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { cssNames } from "../../utils";
+import styles from "./gutter.module.scss";
+
+interface GutterProps {
+  size?: "sm" | "md";
+}
+
+const Gutter = ({ size = "md" }: GutterProps) => {
+  const classNames = cssNames(styles[`size-${size}`]);
+
+  return <div className={classNames} />;
+};
+
+
+export default Gutter;