From 43e0c49f06b9d755d8dc2e3195be134c4d872a1f Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Wed, 17 Aug 2022 14:08:02 +0300
Subject: [PATCH] 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>
---
 .../components/gutter/gutter.module.scss      | 14 +++++++++++++
 src/renderer/components/gutter/gutter.tsx     | 20 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 src/renderer/components/gutter/gutter.module.scss
 create mode 100644 src/renderer/components/gutter/gutter.tsx

diff --git a/src/renderer/components/gutter/gutter.module.scss b/src/renderer/components/gutter/gutter.module.scss
new file mode 100644
index 0000000000..8cf1567a66
--- /dev/null
+++ b/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);
diff --git a/src/renderer/components/gutter/gutter.tsx b/src/renderer/components/gutter/gutter.tsx
new file mode 100644
index 0000000000..d19a82ddf8
--- /dev/null
+++ b/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;