PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed modal

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-09-30 09:38:07 +08:00
parent b6f8546114
commit aa31a79b6d
1 changed files with 15 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/Modal/Modal.tsx
View file

@ -7,24 +7,27 @@ interface Props {
color?: string color?: string
border?: string border?: string
opacity?: number opacity?: number
trigger: boolean
} }
export default (props: Props) => { export default (props: Props) => {
return ( return (
<> <>
<div class="modal"> <Show when={props.trigger}>
<Show when={props.border}> <div class="modal">
<div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}> <Show when={props.border}>
{props.children} <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}; opacity: ${props.opacity || 1}`}>
</div> {props.children}
</Show> </div>
</Show>
<Show when={!props.border}> <Show when={!props.border}>
<div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}> <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; opacity: ${props.opacity || 1}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
{props.children} {props.children}
</div> </div>
</Show> </Show>
</div> </div>
</Show>
</> </>
) )
} }