add-library.js
2 years ago
category-list.js
2 years ago
insert-pattern.js
2 years ago
library-cache.js
2 years ago
library-layout.js
2 years ago
library-provider.js
2 years ago
library-selector.js
2 years ago
manage-libraries.js
2 years ago
pattern-details-header.js
2 years ago
pattern-details.js
2 years ago
pattern-list.js
2 years ago
pattern-search.js
2 years ago
pattern.js
2 years ago
selected-patterns.js
2 years ago
pattern-details-header.js
61 lines
| 1 | import { Button, ButtonGroup } from '@wordpress/components'; |
| 2 | import { desktop, mobile, tablet } from '@wordpress/icons'; |
| 3 | import { __ } from '@wordpress/i18n'; |
| 4 | import { useLibrary } from './library-provider'; |
| 5 | import { PatternDetails } from './pattern-details'; |
| 6 | |
| 7 | export function PatternDetailsHeader( { |
| 8 | pattern, |
| 9 | isSelected, |
| 10 | bulkInsertEnabled, |
| 11 | globalStyleData, |
| 12 | closeModal, |
| 13 | } ) { |
| 14 | const { |
| 15 | activePatternId, |
| 16 | previewIframeWidth, |
| 17 | setPreviewIframeWidth, |
| 18 | } = useLibrary(); |
| 19 | |
| 20 | return ( |
| 21 | <PatternDetails |
| 22 | pattern={ pattern } |
| 23 | showPreview={ false } |
| 24 | isSelected={ isSelected } |
| 25 | showTitle={ false } |
| 26 | bulkInsertEnabled={ bulkInsertEnabled } |
| 27 | globalStyleData={ globalStyleData } |
| 28 | closeModal={ closeModal } |
| 29 | > |
| 30 | { !! activePatternId && ( |
| 31 | <ButtonGroup> |
| 32 | <Button |
| 33 | isPressed={ '100%' === previewIframeWidth } |
| 34 | variant={ 'tertiary' } |
| 35 | icon={ desktop } |
| 36 | label={ __( 'Desktop', 'generateblocks' ) } |
| 37 | showTooltip |
| 38 | onClick={ () => setPreviewIframeWidth( '100%' ) } |
| 39 | /> |
| 40 | <Button |
| 41 | isPressed={ '900px' === previewIframeWidth } |
| 42 | variant={ 'tertiary' } |
| 43 | icon={ tablet } |
| 44 | label={ __( 'Tablet', 'generateblocks' ) } |
| 45 | showTooltip |
| 46 | onClick={ () => setPreviewIframeWidth( '900px' ) } |
| 47 | /> |
| 48 | <Button |
| 49 | isPressed={ '400px' === previewIframeWidth } |
| 50 | variant={ 'tertiary' } |
| 51 | icon={ mobile } |
| 52 | label={ __( 'Mobile', 'generateblocks' ) } |
| 53 | showTooltip |
| 54 | onClick={ () => setPreviewIframeWidth( '400px' ) } |
| 55 | /> |
| 56 | </ButtonGroup> |
| 57 | ) } |
| 58 | </PatternDetails> |
| 59 | ); |
| 60 | } |
| 61 |