acid-info/logos-ordinals-dashboard
1
0
Fork 0
mirror of https://github.com/acid-info/logos-ordinals-dashboard.git synced 2025-02-28 12:40:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dismiss alert

Browse Source
This commit is contained in:
jinhojang6 2024-11-02 02:45:41 +09:00
parent a913740f12
commit 83dfc50a0f
2 changed files with 58 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/assets/close-orange.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0833 4.23913L10.2608 3.41663L6.99999 6.67746L3.73916 3.41663L2.91666 4.23913L6.17749 7.49996L2.91666 10.7608L3.73916 11.5833L6.99999 8.32246L10.2608 11.5833L11.0833 10.7608L7.82249 7.49996L11.0833 4.23913Z" fill="#fe740c"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 340 B

88
src/components/Toast/Toast.tsx
View File

@ -4,39 +4,8 @@ import { useAtomValue } from 'jotai'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { userInfoAtom } from '../../../atoms/userInfo' import { userInfoAtom } from '../../../atoms/userInfo'
const ToastContainer = styled.div`
position: relative;
padding: 14px;
justify-content: flex-end;
width: 100%;
text-align: center;
justify-content: center;
align-items: center;
background: #321504;
z-index: 10000;
color: #fe740c;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.14px;
span {
margin-left: 20px;
}
@media (max-width: ${breakpoints.sm}px) {
font-size: 12px;
line-height: 16px;
span {
// new line
display: block;
}
}
`
const Toast: React.FC = () => { const Toast: React.FC = () => {
const [showTopToast, setShowTopToast] = useState(true)
const [time, setTime] = useState('DD:HH:mm:ss') const [time, setTime] = useState('DD:HH:mm:ss')
const userInfo = useAtomValue(userInfoAtom) const userInfo = useAtomValue(userInfoAtom)
@ -77,7 +46,7 @@ const Toast: React.FC = () => {
}, []) }, [])
return ( return (
<ToastContainer> <ToastContainer showTopToast={showTopToast}>
{userInfo?.message?.length > 0 ? ( {userInfo?.message?.length > 0 ? (
userInfo.message userInfo.message
) : ( ) : (
@ -86,8 +55,61 @@ const Toast: React.FC = () => {
<span>Time remaining: {time}</span> <span>Time remaining: {time}</span>
</> </>
)} )}
<div>
<button className="close-button" onClick={() => setShowTopToast(false)}>
<img src="/assets/close-orange.svg" alt="close" />
</button>
</div>
</ToastContainer> </ToastContainer>
) )
} }
const ToastContainer = styled.div<{ showTopToast: boolean }>`
display: ${({ showTopToast }) => (showTopToast ? 'flex' : 'none')};
position: relative;
padding: 14px;
justify-content: flex-end;
width: 100%;
text-align: center;
justify-content: center;
align-items: center;
background: #321504;
z-index: 10000;
color: #fe740c;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0.14px;
span {
margin-left: 20px;
}
.close-button {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
width: 28px;
height: 28px;
border: 1px solid #fe740c;
background: transparent;
padding: 0;
}
@media (max-width: ${breakpoints.sm}px) {
font-size: 12px;
line-height: 16px;
span {
// new line
display: block;
}
}
`
export default Toast export default Toast