Add closing of the icon details modal with the ESC key

packages/preview-astro/src/components/icondetailmodal.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { FaRegClipboard } from "react-icons/fa6";
 import copy from "copy-to-clipboard";
 import toast from "cogo-toast";
+import { useKeyDown } from '../utils/usekeydown'
 
 interface colorVariant {
   bg: string;
@@ -202,6 +203,12 @@ function Modal({
     isOpen,
   });
 
+  useKeyDown((keyCode) => {
+    if(keyCode === 'Escape') {
+      handleCloseModal()
+    }
+  })
+
   return (
     <div className={`modal-root ${isOpen ? "" : "hidden"}`}>
       <div

packages/preview-astro/src/utils/usekeydown.ts

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+
+type callbackType = (key: string) => void;
+
+export const useKeyDown = (callback: callbackType): void => {
+  const refCallback = useRef(callback);
+
+  useEffect(() => {
+    refCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      refCallback.current(event.key);
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+};