karenying

import { Link } from 'react-router-dom';

import './Header.css';

const HeaderLink = ({ page }) => {
  const title = page.charAt(0).toUpperCase() + page.slice(1);
  return <Link to={`/${page}`}>{title}</Link>;
};

karenying

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <div className='App'>
      <Router>
        <Route exact path='/' component={Home} />
        <Route exact path='/home' component={Home} />
        <Route exact path='/about' component={About} />
        <Route exact path='/contact' component={Contact} />

karenying

.headerlink-no-link {
  pointer-events: none;
}

karenying

<Link to={`/${page}`} className='headerlink-title'>
  {title}
  <div className={selected ? 'headerlink-dot-active' : 'headerlink-dot'}>•</div>
</Link>

karenying

const page = useParams().page || 'home';

karenying

<Link to={`/${link}`} className='headerlink-title'>
  {title}
</Link>

karenying

const backgroundColor = new Color(backgroundHex);
const { textColor } = backgroundColor;

karenying

return (
    <div
      className='colorbox-container'
      style={{ backgroundColor: `#${backgroundHex}`, color: `#${textColor}` }}
    >
      {`#${backgroundHex}`}
      <br />
      {`Contrast ratio: ${backgroundColor
        .contrastRatioWith(textColor)
        .toFixed(2)}`}

karenying

// returns luminance as a number between 0 and 1
  get luminance() {
    return getLuminance(this.hex);
  }

  /* returns contrast ratio with a second color,
  calls contrastRatioPair */
  contrastRatioWith(hex2) {
    return contrastRatioPair(this.hex, hex2);
  }

karenying

// calculates contrast ratio between two hex strings
export function contrastRatioPair(hex1, hex2) {
  const lum1 = getLuminance(hex1);
  const lum2 = getLuminance(hex2);

  return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
}