added fonts and icons

src/modules/layout/components/GridLayoutItemWrapper/index.tsx

@@ -1,5 +1,12 @@
 import { FC, PropsWithChildren } from "react";
 import styles from "./styles.module.scss";
+import { IconButton } from "~/components/buttons/IconButton";
+
+import DeleteIcon from "~/assets/images/delete.svg";
+import SplitVertical from "~/assets/images/split-vertical.svg";
+import SplitHorizontal from "~/assets/images/split-horizontal.svg";
+
+console.log(DeleteIcon);
 
 type GridLayoutItemWrapperProps = PropsWithChildren & {
   splitVertical: () => void;
@@ -15,15 +22,23 @@ const GridLayoutItemWrapper: FC<GridLayoutItemWrapperProps> = ({
 }) => (
   <div className={styles.wrapper}>
     <div className={styles.menu}>
-      <button onClick={splitVertical} role="button">
-        v
-      </button>
-      <button onClick={splitHorizontal} role="button">
-        h
-      </button>
-      <button onClick={remove} role="button">
-        d
-      </button>
+      <IconButton
+        onClick={splitVertical}
+        role="button"
+        className={styles.button}
+      >
+        <SplitVertical />
+      </IconButton>
+      <IconButton
+        onClick={splitHorizontal}
+        role="button"
+        className={styles.button}
+      >
+        <SplitHorizontal />
+      </IconButton>
+      <IconButton onClick={remove} role="button" className={styles.button}>
+        <DeleteIcon />
+      </IconButton>
     </div>
 
     {children}

src/modules/layout/components/GridLayoutItemWrapper/styles.module.scss

@@ -9,3 +9,20 @@
   top: 0;
   right: 0;
 }
+
+.button {
+  opacity: 0.3;
+  cursor: pointer;
+  padding: 4px 2px;
+  transition: opacity 0.25s;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+  }
+}

src/modules/layout/editor/containers/MarkdownEditorContainer/hooks/usePersistedValue.ts

@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 
-const prefix = "VALUE__";
-
 const safelyGetStringValue = (key: string) => {
   try {
     return localStorage.getItem(key) ?? "";
@@ -19,7 +17,8 @@ const safelySetStringValue = (key: string, value: string) => {
 };
 
 export const usePersistedValue = (
-  id: string
+  id: string,
+  prefix: string
 ): [string, (val: string) => void] => {
   const key = `${prefix}${id}`;
   const [value, setValue] = useState(safelyGetStringValue(key));

src/modules/layout/editor/containers/MarkdownEditorContainer/index.tsx

@@ -11,7 +11,7 @@ interface MarkdownEditorContainerProps {
 export const MarkdownEditorContainer: FC<MarkdownEditorContainerProps> = ({
   id,
 }) => {
-  const [value, setValue] = usePersistedValue(id);
+  const [value, setValue] = usePersistedValue(id, "MarkdownEditorContainer");
 
   return (
     <div className={styles.editor}>