-
Notifications
You must be signed in to change notification settings - Fork 4k
/
palette.js
58 lines (54 loc) · 1.34 KB
/
palette.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
* WordPress dependencies
*/
import {
__experimentalItemGroup as ItemGroup,
FlexItem,
__experimentalHStack as HStack,
__experimentalZStack as ZStack,
__experimentalVStack as VStack,
FlexBlock,
ColorIndicator,
} from '@wordpress/components';
import { __, _n, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import Subtitle from './subtitle';
import NavigationButton from './navigation-button';
import { useSetting } from './hooks';
function Palette( { name } ) {
const [ colors ] = useSetting( 'color.palette', name );
const screenPath = ! name
? '/colors/palette'
: '/blocks/' + name + '/colors/palette';
return (
<VStack spacing={ 3 }>
<Subtitle>{ __( 'Palette' ) }</Subtitle>
<ItemGroup isBordered isSeparated>
<NavigationButton path={ screenPath }>
<HStack>
<FlexBlock>
<ZStack isLayered={ false } offset={ -8 }>
{ colors.slice( 0, 5 ).map( ( { color } ) => (
<ColorIndicator
key={ color }
colorValue={ color }
/>
) ) }
</ZStack>
</FlexBlock>
<FlexItem>
{ sprintf(
// Translators: %d: Number of palette colors.
_n( '%d color', '%d colors', colors.length ),
colors.length
) }
</FlexItem>
</HStack>
</NavigationButton>
</ItemGroup>
</VStack>
);
}
export default Palette;