544fa8d33e
* Use grid instead of flex * Use child margin instead of flex gap * use .grid instead of .flex.flex-column * Missed one conditional flex gap * gap-2 safely deleted since there’s only one element * Add class for crayons-btn-actions This pattern occurs pretty often. Easy class addition and easy swap out once flex gap is supported in target browsers * Use crayons-btn-actions * Adjust styling to use negative margins * apply crayons-btn-actions * use margin-right instead of gap * use .grid instead of .flex.flex-column * use margin instead of gap for indicators/tooltips in headings * remove unused class for clarity * use flex and add margin to small element * remove gap from flex container and add margin to figure * crayons-article__main has neither flex nor grid thus gap has no effect * fix typo * use actual grid columns * use gap instead of flex-column * Apply crayons-btn-actions * Fix modal window display * Safari bein a real pain here Apparently Safari uses a different model to calculate height than other browsers. who knew.
27 lines
705 B
JavaScript
27 lines
705 B
JavaScript
import PropTypes from 'prop-types';
|
|
import { h } from 'preact';
|
|
import { Button } from '@crayons';
|
|
|
|
export const ActionButtons = ({ isDraft, editUrl, deleteConfirmUrl }) => {
|
|
return (
|
|
<div className="listing-row-actions crayons-btn-actions">
|
|
{isDraft && (
|
|
<Button tagName="a" url={editUrl}>
|
|
View draft
|
|
</Button>
|
|
)}
|
|
<Button tagName="a" url={editUrl}>
|
|
Edit
|
|
</Button>
|
|
<Button variant="danger" tagName="a" url={deleteConfirmUrl}>
|
|
Delete
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
ActionButtons.propTypes = {
|
|
isDraft: PropTypes.bool.isRequired,
|
|
editUrl: PropTypes.string.isRequired,
|
|
deleteConfirmUrl: PropTypes.string.isRequired,
|
|
};
|