1- import React from ' react'
2- import ReactDOM from ' react-dom'
3- import Button from ' ./Button'
4- import { CloseIcon } from ' ./Icons'
5- import CodePreview from ' ./CodePreview'
6- import { SnippetType } from ' ../types'
7- import slugify from ' ../utils/slugify'
8- import useEscapeKey from ' ../hooks/useEscapeKey'
1+ import React from " react" ;
2+ import ReactDOM from " react-dom" ;
3+ import Button from " ./Button" ;
4+ import { CloseIcon } from " ./Icons" ;
5+ import CodePreview from " ./CodePreview" ;
6+ import { SnippetType } from " ../types" ;
7+ import slugify from " ../utils/slugify" ;
8+ import useEscapeKey from " ../hooks/useEscapeKey" ;
99
1010type Props = {
11- snippet : SnippetType
12- language : string
13- handleCloseModal : ( ) => void
14- }
11+ snippet : SnippetType ;
12+ language : string ;
13+ handleCloseModal : ( ) => void ;
14+ } ;
1515
1616const SnippetModal : React . FC < Props > = ( {
1717 snippet,
1818 language,
1919 handleCloseModal,
2020} ) => {
21- const modalRoot = document . getElementById ( ' modal-root' )
22- if ( ! modalRoot ) return null
23- useEscapeKey ( handleCloseModal )
21+ const modalRoot = document . getElementById ( " modal-root" ) ;
22+ if ( ! modalRoot ) return null ;
23+ useEscapeKey ( handleCloseModal ) ;
2424
2525 return ReactDOM . createPortal (
26- < div className = ' modal-overlay' >
27- < div className = ' modal | flow' data-flow-space = 'lg' >
28- < div className = ' modal__header' >
29- < h2 className = ' section-title' > { snippet . title } </ h2 >
26+ < div className = " modal-overlay" >
27+ < div className = " modal | flow" data-flow-space = "lg" >
28+ < div className = " modal__header" >
29+ < h2 className = " section-title" > { snippet . title } </ h2 >
3030 < Button isIcon = { true } onClick = { handleCloseModal } >
3131 < CloseIcon />
3232 </ Button >
@@ -37,27 +37,27 @@ const SnippetModal: React.FC<Props> = ({
3737 { snippet . description }
3838 </ p >
3939 < p >
40- Contributed by{ ' ' }
40+ Contributed by{ " " }
4141 < a
4242 href = { `https://github.com/${ snippet . author } ` }
43- target = ' _blank'
44- rel = ' noopener noreferrer'
45- className = ' styled-link'
43+ target = " _blank"
44+ rel = " noopener noreferrer"
45+ className = " styled-link"
4646 >
4747 @{ snippet . author }
4848 </ a >
4949 </ p >
50- < ul role = ' list' className = ' modal__tags' >
50+ < ul role = " list" className = " modal__tags" >
5151 { snippet . tags . map ( ( tag ) => (
52- < li key = { tag } className = ' modal__tag' >
52+ < li key = { tag } className = " modal__tag" >
5353 { tag }
5454 </ li >
5555 ) ) }
5656 </ ul >
5757 </ div >
5858 </ div > ,
5959 modalRoot
60- )
61- }
60+ ) ;
61+ } ;
6262
63- export default SnippetModal
63+ export default SnippetModal ;
0 commit comments