add modal story

Author: xyzqm

.storybook/preview.js

@@ -44,14 +44,14 @@ export const parameters = {
 };
 
 export const decorators = [
-  renderStory => (
+  Story => (
     <div className="grid storybook-container font-sans">
       <div className="h-full">
         <div className="p-4 sm:p-6 lg:p-8 max-w-4xl mx-auto">
           <p className="text-gray-800 text-2xl font-bold">Light Mode</p>
           <div className="h-4" />
           <DarkModeContext.Provider value={false}>
-            {renderStory()}
+            <Story />
           </DarkModeContext.Provider>
         </div>
       </div>
@@ -60,7 +60,7 @@ export const decorators = [
           <p className="text-gray-100 text-2xl font-bold">Dark Mode</p>
           <div className="h-4" />
           <DarkModeContext.Provider value={true}>
-            {renderStory()}
+            <Story />
           </DarkModeContext.Provider>
         </div>
       </div>

src/components/Modal.tsx

@@ -1,11 +1,17 @@
 import { Dialog, Transition } from '@headlessui/react';
 import React from 'react';
-export default function mModal({
+export type ModalProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  bg?: string;
+};
+export default function Modal({
   children,
   isOpen,
   onClose,
   bg = 'bg-black/25',
-}) {
+}: ModalProps) {
   return (
     <Transition appear show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-10" onClose={onClose}>

src/components/QuizGeneratorModal.tsx

@@ -25,7 +25,6 @@ export default function QuizGeneratorModal(): JSX.Element {
   const [quiz, setQuiz] = React.useState<Question[]>([
     { question: '', answers: [] },
   ]);
-  const [copyText, setCopyText] = React.useState('Copy');
   const closeModal = () => {
     setOpen(false);
     setQuiz([{ question: '', answers: [] }]);

src/pages/problems.tsx

@@ -120,7 +120,7 @@ export default function ProblemsPage(props: PageProps<DataProps>) {
           <div className="py-16 bg-blue-600 dark:bg-blue-900 px-5">
             <div className="max-w-3xl mx-auto mb-6">
               <h1 className="text-center text-3xl sm:text-5xl font-bold text-white dark:text-dark-high-emphasis mb-6">
-                Problems (Beta)
+                Problems
               </h1>
               <SearchBox />
             </div>

src/stories/Modal.stories.tsx

@@ -0,0 +1,38 @@
+import { Dialog } from '@headlessui/react';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import Modal, { ModalProps } from '../components/Modal';
+import { DarkModeContext } from '../context/DarkModeContext';
+
+export default {
+  title: 'Modal',
+  component: Modal,
+} as Meta;
+
+const Template: Story<ModalProps> = args => {
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const darkMode = React.useContext(DarkModeContext);
+  console.log(darkMode);
+  return (
+    <div className="flex items-center justify-center">
+      <button onClick={() => setModalOpen(true)} className="btn">
+        Open Modal
+      </button>
+      <Modal {...args} isOpen={modalOpen} onClose={() => setModalOpen(false)}>
+        <Dialog.Panel className={`w-full max-w-md ${darkMode ? 'dark' : ''}`}>
+          <div className="bg-white dark:bg-black dark:text-white p-5 rounded-lg shadow-lg flex flex-col items-start">
+            <Dialog.Title as="h3" className="text-lg font-bold">
+              Modal Title
+            </Dialog.Title>
+            <Dialog.Description>Modal Description</Dialog.Description>
+            <button onClick={() => setModalOpen(false)} className="btn">
+              Close
+            </button>
+          </div>
+        </Dialog.Panel>
+      </Modal>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});