tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-21 12:45:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

✂️ Extracted color calc into own file, ready for reuse

Browse Source
This commit is contained in:
Alicia Sykes 2021-07-30 19:42:05 +01:00
parent 9503f68233
commit c44b71407b
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/HomepageFeatures.js
View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import './../styles/HomepageFeatures.scss'; import './../styles/HomepageFeatures.scss';
import Button from '../components/Button'; import Button from '../components/Button';
import getColor from '../utils/ui-helpers';
import IconAuth from '../../static/icons/features_authentication.svg'; import IconAuth from '../../static/icons/features_authentication.svg';
import IconCloudSync from '../../static/icons/features_cloud-sync.svg'; import IconCloudSync from '../../static/icons/features_cloud-sync.svg';
@ -176,17 +177,6 @@ const FeatureList = [
}, },
]; ];
const getColor = (index) => {
const remainder = index % 4;
switch (remainder) {
case 0: return 'pink';
case 1: return 'blue';
case 2: return 'green';
case 3: return 'yellow';
default: return 'white';
}
};
function Feature({ title, description, icon, demo, index }) { function Feature({ title, description, icon, demo, index }) {
const side = index % 2 == 0 ? 'left' : 'right'; const side = index % 2 == 0 ? 'left' : 'right';
const color = getColor(index) const color = getColor(index)

18
src/utils/ui-helpers.ts Normal file
View File

@ -0,0 +1,18 @@
/**
* Returns a color class name for elements relative to their position
* @param index The position of a given element
* @returns A color, relational to position
*/
const getColor = (index: number): string => {
const remainder = index % 4;
switch (remainder) {
case 0: return 'pink';
case 1: return 'blue';
case 2: return 'green';
case 3: return 'yellow';
default: return 'white';
}
};
export default getColor;