File tree 5 files changed +50
-7
lines changed
5 files changed +50
-7
lines changed Original file line number Diff line number Diff line change @@ -44,14 +44,14 @@ export const parameters = {
44
44
} ;
45
45
46
46
export const decorators = [
47
- renderStory => (
47
+ Story => (
48
48
< div className = "grid storybook-container font-sans" >
49
49
< div className = "h-full" >
50
50
< div className = "p-4 sm:p-6 lg:p-8 max-w-4xl mx-auto" >
51
51
< p className = "text-gray-800 text-2xl font-bold" > Light Mode</ p >
52
52
< div className = "h-4" />
53
53
< DarkModeContext . Provider value = { false } >
54
- { renderStory ( ) }
54
+ < Story />
55
55
</ DarkModeContext . Provider >
56
56
</ div >
57
57
</ div >
@@ -60,7 +60,7 @@ export const decorators = [
60
60
< p className = "text-gray-100 text-2xl font-bold" > Dark Mode</ p >
61
61
< div className = "h-4" />
62
62
< DarkModeContext . Provider value = { true } >
63
- { renderStory ( ) }
63
+ < Story />
64
64
</ DarkModeContext . Provider >
65
65
</ div >
66
66
</ div >
Original file line number Diff line number Diff line change 1
1
import { Dialog , Transition } from '@headlessui/react' ;
2
2
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 ( {
4
10
children,
5
11
isOpen,
6
12
onClose,
7
13
bg = 'bg-black/25' ,
8
- } ) {
14
+ } : ModalProps ) {
9
15
return (
10
16
< Transition appear show = { isOpen } as = { React . Fragment } >
11
17
< Dialog as = "div" className = "relative z-10" onClose = { onClose } >
Original file line number Diff line number Diff line change @@ -25,7 +25,6 @@ export default function QuizGeneratorModal(): JSX.Element {
25
25
const [ quiz , setQuiz ] = React . useState < Question [ ] > ( [
26
26
{ question : '' , answers : [ ] } ,
27
27
] ) ;
28
- const [ copyText , setCopyText ] = React . useState ( 'Copy' ) ;
29
28
const closeModal = ( ) => {
30
29
setOpen ( false ) ;
31
30
setQuiz ( [ { question : '' , answers : [ ] } ] ) ;
Original file line number Diff line number Diff line change @@ -120,7 +120,7 @@ export default function ProblemsPage(props: PageProps<DataProps>) {
120
120
< div className = "py-16 bg-blue-600 dark:bg-blue-900 px-5" >
121
121
< div className = "max-w-3xl mx-auto mb-6" >
122
122
< 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
124
124
</ h1 >
125
125
< SearchBox />
126
126
</ div >
Original file line number Diff line number Diff line change
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 ( { } ) ;
You can’t perform that action at this time.
0 commit comments