73 lines
3.5 KiB
JavaScript
73 lines
3.5 KiB
JavaScript
import React, { useContext } from 'react';
|
|
import Link from './Link';
|
|
import { has } from 'lodash';
|
|
import styles from './PreBuiltList.module.css';
|
|
import ThemeContext, { paramsFromState } from './ThemeContext';
|
|
|
|
import { colors as defaultColors } from '@themer/colors-default';
|
|
import { colors as draculaColors } from '@themer/colors-dracula';
|
|
import { colors as fingerPaintColors} from '@themer/colors-finger-paint';
|
|
import { colors as githubUniverseColors } from '@themer/colors-github-universe';
|
|
import { colors as greenAsAWhistleColors } from '@themer/colors-green-as-a-whistle';
|
|
import { colors as lucidColors } from '@themer/colors-lucid';
|
|
import { colors as mojaveColors } from '@themer/colors-mojave';
|
|
import { colors as monkeyColors } from '@themer/colors-monkey';
|
|
import { colors as nightSkyColors } from '@themer/colors-night-sky';
|
|
import { colors as novaColors } from '@themer/colors-nova';
|
|
import { colors as oneColors } from '@themer/colors-one';
|
|
import { colors as polarIceColors } from '@themer/colors-polar-ice';
|
|
import { colors as rightInTheTealsColors} from '@themer/colors-right-in-the-teals';
|
|
import { colors as rivetColors } from '@themer/colors-rivet';
|
|
import { colors as setiColors } from '@themer/colors-seti';
|
|
import { colors as solarizedColors } from '@themer/colors-solarized';
|
|
|
|
const PreBuiltLink = ({ colors, children }) => {
|
|
const { activeColorSet } = useContext(ThemeContext);
|
|
const oppositeColorSet = activeColorSet === 'dark' ? 'light' : 'dark';
|
|
const preparedState = {
|
|
colors,
|
|
activeColorSet: has(colors, activeColorSet) ? activeColorSet : oppositeColorSet,
|
|
calculateIntermediaryShades: {
|
|
dark: !has(colors, 'dark.shade1'),
|
|
light: !has(colors, 'light.shade1'),
|
|
},
|
|
};
|
|
return (<Link href={ paramsFromState(preparedState) }>{ children }</Link>);
|
|
};
|
|
|
|
export default () => {
|
|
const { getActiveColorOrFallback } = useContext(ThemeContext);
|
|
return (
|
|
<ul className={ styles.linksets } style={{ color: getActiveColorOrFallback(['shade5']) }}>
|
|
<li>
|
|
Original color sets:
|
|
{' '}
|
|
<ul className={ styles.links } >
|
|
<li><PreBuiltLink colors={ defaultColors }>Default</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ nightSkyColors }>Night Sky</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ polarIceColors }>Polar Ice</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ fingerPaintColors }>Finger Paint</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ monkeyColors }>Monkey</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ rightInTheTealsColors }>Right in the Teals</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ greenAsAWhistleColors }>Green as a Whistle</PreBuiltLink></li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
Ports from third party themes:
|
|
{' '}
|
|
<ul className={ styles.links }>
|
|
<li><PreBuiltLink colors={ oneColors }>One</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ lucidColors }>Lucid</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ solarizedColors }>Solarized</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ githubUniverseColors }>GitHub Universe</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ novaColors }>Nova</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ mojaveColors }>Mojave</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ rivetColors }>Rivet</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ draculaColors }>Dracula</PreBuiltLink></li>
|
|
<li><PreBuiltLink colors={ setiColors }>Seti</PreBuiltLink></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
);
|
|
};
|