Public-Mirror/metacubexd
1
0
Fork 0
mirror of https://github.com/MetaCubeX/metacubexd.git synced 2024-11-10 17:25:34 +08:00
Code Issues Projects Releases Wiki Activity

feat(modal): adjust padding of the modal header and footer

Browse Source
This commit is contained in:
kunish 2023-09-23 20:43:57 +08:00
parent 2ee48c8ac9
commit 53ee2f31b3
No known key found for this signature in database
GPG Key ID: 647A12B4F782C430
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Modal.tsx
View File

@ -10,8 +10,8 @@ type Props = {
action?: JSX.Element action?: JSX.Element
} }
const actionClass = const actionClassName =
'sticky bottom-0 z-50 flex items-center justify-end bg-base-100 bg-opacity-80 p-6 backdrop-blur' 'sticky bottom-0 z-50 flex items-center justify-end bg-base-100 bg-opacity-80 p-4 backdrop-blur'
export const Modal: ParentComponent<Props> = (props) => { export const Modal: ParentComponent<Props> = (props) => {
let dialogRef: HTMLDialogElement | undefined let dialogRef: HTMLDialogElement | undefined
@ -22,24 +22,24 @@ export const Modal: ParentComponent<Props> = (props) => {
class="modal modal-bottom sm:modal-middle" class="modal modal-bottom sm:modal-middle"
> >
<div class="modal-box p-0" onContextMenu={(e) => e.preventDefault()}> <div class="modal-box p-0" onContextMenu={(e) => e.preventDefault()}>
<div class={twMerge(actionClass, 'top-0 justify-between')}> <div class={twMerge(actionClassName, 'top-0 justify-between')}>
<div class="flex items-center gap-4 text-xl font-bold"> <div class="flex items-center gap-4 text-xl font-bold">
{props.icon} {props.icon}
<span>{props.title}</span> <span>{props.title}</span>
</div> </div>
<Button <Button
class="btn-circle btn-sm" class="btn-circle btn-sm"
onClick={() => { onClick={() => dialogRef?.close()}
dialogRef?.close()
}}
icon={<IconX size={20} />} icon={<IconX size={20} />}
/> />
</div> </div>
<div class="p-6 pt-3">{children(() => props.children)()}</div> <div class="p-4">{children(() => props.children)()}</div>
<Show when={props.action}> <Show when={props.action}>
<div class={actionClass}> <div class={actionClassName}>
<div class="flex justify-end gap-2">{props.action}</div> <div class="flex justify-end gap-2">{props.action}</div>
</div> </div>
</Show> </Show>