mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-24 09:45:35 +08:00
feat(modal): adjust padding of the modal header and footer
This commit is contained in:
parent
2ee48c8ac9
commit
53ee2f31b3
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user