e118dda13a
* fix: remove circular dependency redux depended on templates/Challenges/redux and vice versa. This meant that import order mattered and confusing bugs could arise. (cherry picked from commit 7d67a4e70922bbb3051f2f9982dcc69e240d43dc) * feat: require imports to be in alphabetical order Import order generally does not matter, but there are edge cases (circular imports and css imports, for example) where changing order changes behaviour (cherry picked from commit b8d1393a91ec6e068caf8e8498a5c95df68c2b2c) * chore: order imports * fix: lift up challenge description + title comps This brings the classic Show closer to the others as they now all create the description and title components * fix: remove donation-saga/index circular import (cherry picked from commit 51a44ca668a700786d2744feffeae4fdba5fd207) * refactor: extract action-types from settings (cherry picked from commit 25e26124d691c84a0d0827d41dafb761c686fadd) * fix: lint errors * feat: prevent useless renames
70 lines
2.1 KiB
JavaScript
70 lines
2.1 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
|
|
import colorList from './colors.css';
|
|
|
|
// ---------------------------------------------------------- //
|
|
// HELPER FUNCTIONS //
|
|
// ---------------------------------------------------------- //
|
|
// Transform colorList from an object to an array of objects
|
|
const transformedColorList = Object.keys(colorList).map(colorName => ({
|
|
label: colorName.replace('--', ''),
|
|
value: colorList[colorName]
|
|
}));
|
|
|
|
// Get the background and text color values of each palette item
|
|
const getPaletteItemStyle = color => {
|
|
const itemTextColor = color.label.substring(color.label.length - 2);
|
|
|
|
return {
|
|
backgroundColor: color.value,
|
|
// Extract the scale from the color label.
|
|
// If the scale is greater or equal to 50, use white text for the label; otherwise, use dark text.
|
|
color: parseInt(itemTextColor, 10) >= 50 ? '#ffffff' : '#0a0a23'
|
|
};
|
|
};
|
|
|
|
const getPaletteByColorName = name =>
|
|
transformedColorList.filter(color => color.label.includes(name));
|
|
|
|
// ---------------------------------------------------------- //
|
|
// COMPONENTS //
|
|
// ---------------------------------------------------------- //
|
|
const Palette = ({ colors }) => {
|
|
return (
|
|
<div className='inline-flex flex-col m-4 w-3/12'>
|
|
{colors.map(color => (
|
|
<div
|
|
className='flex items-center p-2 h-8'
|
|
key={color.label}
|
|
style={getPaletteItemStyle(color)}
|
|
>
|
|
{color.label}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Palette.propTypes = {
|
|
colors: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
label: PropTypes.string,
|
|
value: PropTypes.string
|
|
})
|
|
)
|
|
};
|
|
|
|
export const AllPalettes = () => {
|
|
return (
|
|
<>
|
|
<Palette colors={getPaletteByColorName('gray')} />
|
|
<Palette colors={getPaletteByColorName('purple')} />
|
|
<Palette colors={getPaletteByColorName('yellow')} />
|
|
<Palette colors={getPaletteByColorName('blue')} />
|
|
<Palette colors={getPaletteByColorName('green')} />
|
|
<Palette colors={getPaletteByColorName('red')} />
|
|
</>
|
|
);
|
|
};
|