Files
tabler/shared/components/layout/HeaderActionsButtons.astro

38 lines
1.2 KiB
Plaintext

---
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import Icon from '@ui/Icon.astro'
import Modal from '../modals/Modal.astro'
import CaptureModal from '../CaptureModal.astro'
import ReportModalContent from '../modals/ReportModalContent.astro'
interface Props {
/** layout-navbar-overlap && layout-navbar-dark → the "New view" button is color="dark" */
dark?: boolean | undefined
}
const { dark } = Astro.props
---
<!-- BEGIN HEADER ACTIONS -->
<ButtonList>
<span class="d-none d-sm-inline">
<Button text="New view" color={dark ? 'dark' : undefined} />
</span>
{/* Button.astro doesn't support modal-id (data-bs-toggle/target). */}
<a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
<Icon name="plus" />
Create new report
</a>
<a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
<Icon name="plus" />
</a>
</ButtonList>
<!-- END HEADER ACTIONS -->
<CaptureModal>
<Modal modalId="report" size="lg" top>
<ReportModalContent />
</Modal>
</CaptureModal>