fix: memoize components and improve performance (#579)

components/block-close-button.tsx

@@ -0,0 +1,28 @@
+import { memo, SetStateAction } from 'react';
+import { CrossIcon } from './icons';
+import { Button } from './ui/button';
+import { UIBlock } from './block';
+import equal from 'fast-deep-equal';
+
+interface BlockCloseButtonProps {
+  setBlock: (value: SetStateAction<UIBlock>) => void;
+}
+
+function PureBlockCloseButton({ setBlock }: BlockCloseButtonProps) {
+  return (
+    <Button
+      variant="outline"
+      className="h-fit p-2 dark:hover:bg-zinc-700"
+      onClick={() => {
+        setBlock((currentBlock) => ({
+          ...currentBlock,
+          isVisible: false,
+        }));
+      }}
+    >
+      <CrossIcon size={18} />
+    </Button>
+  );
+}
+
+export const BlockCloseButton = memo(PureBlockCloseButton, () => true);