Inital commit

src/components/paper-guide-selector.tsx

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+import { Button } from "../styles";
+import type { UseSettings } from "../use/use-settings";
+import { GRID } from "../interface";
+
+const Wrapper = styled.div`
+    height: calc(100% - 8px);
+    border-right: 1px solid white;
+    margin: 4px 0px;
+    padding-right: 4px;
+    width: 40px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    button {
+        flex-grow: 1;
+    }
+`;
+
+
+export function PaperGuideSelector({ setSettings, settings }: UseSettings) {
+    return <Wrapper>
+        {GRID.map((e, i) => <Button
+            $active={e === settings.grid}
+            key={i}
+            onClick={() => {
+                setSettings({ grid: e });
+            }}
+        >{e}
+        </Button>)}
+    </Wrapper>;
+}