Skip to content

Commit ea8d7a6

Browse files
committed
add modal story
1 parent 4415a11 commit ea8d7a6

File tree

5 files changed

+50
-7
lines changed

5 files changed

+50
-7
lines changed

.storybook/preview.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -44,14 +44,14 @@ export const parameters = {
4444
};
4545

4646
export const decorators = [
47-
renderStory => (
47+
Story => (
4848
<div className="grid storybook-container font-sans">
4949
<div className="h-full">
5050
<div className="p-4 sm:p-6 lg:p-8 max-w-4xl mx-auto">
5151
<p className="text-gray-800 text-2xl font-bold">Light Mode</p>
5252
<div className="h-4" />
5353
<DarkModeContext.Provider value={false}>
54-
{renderStory()}
54+
<Story />
5555
</DarkModeContext.Provider>
5656
</div>
5757
</div>
@@ -60,7 +60,7 @@ export const decorators = [
6060
<p className="text-gray-100 text-2xl font-bold">Dark Mode</p>
6161
<div className="h-4" />
6262
<DarkModeContext.Provider value={true}>
63-
{renderStory()}
63+
<Story />
6464
</DarkModeContext.Provider>
6565
</div>
6666
</div>

src/components/Modal.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import { Dialog, Transition } from '@headlessui/react';
22
import React from 'react';
3-
export default function mModal({
3+
export type ModalProps = {
4+
children: React.ReactNode;
5+
isOpen: boolean;
6+
onClose: () => void;
7+
bg?: string;
8+
};
9+
export default function Modal({
410
children,
511
isOpen,
612
onClose,
713
bg = 'bg-black/25',
8-
}) {
14+
}: ModalProps) {
915
return (
1016
<Transition appear show={isOpen} as={React.Fragment}>
1117
<Dialog as="div" className="relative z-10" onClose={onClose}>

src/components/QuizGeneratorModal.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export default function QuizGeneratorModal(): JSX.Element {
2525
const [quiz, setQuiz] = React.useState<Question[]>([
2626
{ question: '', answers: [] },
2727
]);
28-
const [copyText, setCopyText] = React.useState('Copy');
2928
const closeModal = () => {
3029
setOpen(false);
3130
setQuiz([{ question: '', answers: [] }]);

src/pages/problems.tsx

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

src/stories/Modal.stories.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Dialog } from '@headlessui/react';
2+
import { Meta, Story } from '@storybook/react';
3+
import React from 'react';
4+
import Modal, { ModalProps } from '../components/Modal';
5+
import { DarkModeContext } from '../context/DarkModeContext';
6+
7+
export default {
8+
title: 'Modal',
9+
component: Modal,
10+
} as Meta;
11+
12+
const Template: Story<ModalProps> = args => {
13+
const [modalOpen, setModalOpen] = React.useState(false);
14+
const darkMode = React.useContext(DarkModeContext);
15+
console.log(darkMode);
16+
return (
17+
<div className="flex items-center justify-center">
18+
<button onClick={() => setModalOpen(true)} className="btn">
19+
Open Modal
20+
</button>
21+
<Modal {...args} isOpen={modalOpen} onClose={() => setModalOpen(false)}>
22+
<Dialog.Panel className={`w-full max-w-md ${darkMode ? 'dark' : ''}`}>
23+
<div className="bg-white dark:bg-black dark:text-white p-5 rounded-lg shadow-lg flex flex-col items-start">
24+
<Dialog.Title as="h3" className="text-lg font-bold">
25+
Modal Title
26+
</Dialog.Title>
27+
<Dialog.Description>Modal Description</Dialog.Description>
28+
<button onClick={() => setModalOpen(false)} className="btn">
29+
Close
30+
</button>
31+
</div>
32+
</Dialog.Panel>
33+
</Modal>
34+
</div>
35+
);
36+
};
37+
38+
export const Default = Template.bind({});

0 commit comments

Comments
 (0)