feat: add slideover component (#711)

apps/design-system/src/components/SlideOver.stories.tsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { SlideOver } from "ui";
+
+export default {
+  component: SlideOver,
+  parameters: {
+    layout: 'fullscreen',
+    backgrounds: {
+      default: 'dark'
+    }
+  },
+};
+
+export const Example = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
+  return (
+    <div>
+      <button onClick={handleOpen} className="bg-white text-black rounded mx-3 my-3">Open SlideOver</button>
+
+      <SlideOver isOpen={isOpen} onClose={handleClose}>
+        <h2>Content of the SlideOver</h2>
+      </SlideOver>
+    </div>
+  );
+};

packages/ui/components/SlideOver.tsx

@@ -0,0 +1,29 @@
+import { XMarkIcon } from './icons';
+
+interface SlideOverProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export const SlideOver: React.FC<SlideOverProps> = ({ isOpen, onClose, children }) => {
+
+  if (!isOpen) return null;
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="fixed right-0 top-0 bottom-0 w-full max-w-lg h-full bg-gray-950/[.67] text-gray-200 shadow-lg overflow-auto p-2.5 border-l-2 border-gray-700 backdrop-blur-[20px]" tabIndex={0} onKeyDown={handleKeyDown}>
+        <button className="absolute top-2 right-2 focus:outline-white" onClick={onClose} aria-label="Close">
+            <XMarkIcon className="h-6 w-6"/> 
+        </button>
+        {children}
+    </div>
+  );
+};
+
+export default SlideOver;

packages/ui/components/index.tsx

@@ -7,5 +7,6 @@ export * from "./Logo"
 export * from "./Modal"
 export * from "./OperationIcon"
 export * from "./Sidebar"
+export * from "./SlideOver"
 export * from "./Toolbar"
 export { default as Tooltip } from "./Tooltip"