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
}
const actionClass =
'sticky bottom-0 z-50 flex items-center justify-end bg-base-100 bg-opacity-80 p-6 backdrop-blur'
const actionClassName =
'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) => {
let dialogRef: HTMLDialogElement | undefined
@ -22,24 +22,24 @@ export const Modal: ParentComponent<Props> = (props) => {
class="modal modal-bottom sm:modal-middle"
>
<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">
{props.icon}
<span>{props.title}</span>
</div>
<Button
class="btn-circle btn-sm"
onClick={() => {
dialogRef?.close()
}}
onClick={() => dialogRef?.close()}
icon={<IconX size={20} />}
/>
</div>
<div class="p-6 pt-3">{children(() => props.children)()}</div>
<div class="p-4">{children(() => props.children)()}</div>
<Show when={props.action}>
<div class={actionClass}>
<div class={actionClassName}>
<div class="flex justify-end gap-2">{props.action}</div>
</div>
</Show>