Repository navigation
Expand file tree
/
Copy pathInfoPanel.tsx
More file actions
90 lines (80 loc) · 2.57 KB
/
Copy pathInfoPanel.tsx
File metadata and controls
90 lines (80 loc) · 2.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import classNames from 'classnames'
import globalStyle from './InfoPanel.global.scss'
import { CupertinoPane } from 'cupertino-pane'
import { useEffect, useRef } from 'react'
export interface IInfoPanelProps {
className?: string
show?: boolean
onDidDismiss?: () => unknown
}
const InfoPanel = (props: IInfoPanelProps) => {
const { className, onDidDismiss } = props
const drawerRef = useRef<CupertinoPane>()
const panelRef = useRef<HTMLDivElement>(null)
const createPanel = () => {
if (!panelRef.current) return
drawerRef.current = new CupertinoPane(panelRef.current, {
parentElement: 'body',
initialBreak: 'top',
breaks: {
top: { enabled: true, height: 370 },
middle: { enabled: false },
bottom: { enabled: false }
},
backdrop: true,
backdropOpacity: 0.4,
topperOverflow: false,
buttonClose: true,
bottomOffset: 8,
onBackdropTap: () => drawerRef.current?.destroy({ animate: true }),
onDidDismiss: () => onDidDismiss?.()
})
drawerRef.current?.present({ animate: true })
}
useEffect(() => {
createPanel()
}, [])
return (
<>
<div ref={panelRef} style={{ display: 'none' }}>
<div className={classNames('infoPanel', className)}>
<div className="picture"></div>
<div className="content">
<div className="info">
<div className="left-side">
<h1>긴박한 이미지 생성기</h1>
<p>
이미지를 첨부하면 해당 이미지를
<br />
순식간에 긴박하게 만들어드립니다.
</p>
</div>
<div className="right-side"></div>
</div>
<a href="https://github.com/hmmhmmhm/do-urgency" target={'_blank'}>
<div className="description">
<div className="powered">
<div className="icon">
<img
src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
alt="nike-app"
/>
</div>
<div className="title">
<div className="by">Made by</div>
<div className="name">hmmhmmhm</div>
</div>
</div>
<div className="store">Github</div>
</div>
</a>
</div>
</div>
</div>
<style jsx global>
{globalStyle}
</style>
</>
)
}
export default InfoPanel