From 6d235a0e044aff067bfc52554f8aa7e166a31fa6 Mon Sep 17 00:00:00 2001
From: Prince Rajpoot <44585452+princerajpoot20@users.noreply.github.com>
Date: Tue, 4 Jul 2023 15:48:49 +0530
Subject: [PATCH] feat: add slideover component (#711)

---
 .../src/components/SlideOver.stories.tsx      | 29 +++++++++++++++++++
 packages/ui/components/SlideOver.tsx          | 29 +++++++++++++++++++
 packages/ui/components/index.tsx              |  1 +
 3 files changed, 59 insertions(+)
 create mode 100644 apps/design-system/src/components/SlideOver.stories.tsx
 create mode 100644 packages/ui/components/SlideOver.tsx

diff --git a/apps/design-system/src/components/SlideOver.stories.tsx b/apps/design-system/src/components/SlideOver.stories.tsx
new file mode 100644
index 000000000..f2adacd49
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/ui/components/SlideOver.tsx b/packages/ui/components/SlideOver.tsx
new file mode 100644
index 000000000..bbe49c05b
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/packages/ui/components/index.tsx b/packages/ui/components/index.tsx
index c3d7761d3..b3c61c442 100644
--- a/packages/ui/components/index.tsx
+++ b/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"
\ No newline at end of file