Upwork

icon-active.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://web.resource.org/cc/"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="213.11777"
   height="172.51614"
   id="svg69498"
   sodipodi:version="0.32"
   inkscape:version="0.45+devel"
   sodipodi:docbase="C:\Documents and Settings\kit&amp;ryan\Desktop"
   sodipodi:docname="tshirts.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape"
   inkscape:export-filename="F:\Joshua's artwork\logos\Spread Open Media\Spread Open Media t-shirt v01.png"
   inkscape:export-xdpi="72"
   inkscape:export-ydpi="72"
   version="1.0"
   sodipodi:modified="true">
  <defs
     id="defs69500">
    <linearGradient
       id="linearGradient52013">
      <stop
         style="stop-color:#9bb0b8;stop-opacity:0.49803922;"
         offset="0"
         id="stop52019" />
      <stop
         id="stop52021"
         offset="0.5"
         style="stop-color:#ffffff;stop-opacity:1;" />
      <stop
         id="stop52017"
         offset="1"
         style="stop-color:#ffffff;stop-opacity:0;" />
    </linearGradient>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     gridtolerance="10000"
     guidetolerance="10"
     objecttolerance="10"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.59142203"
     inkscape:cx="398.78889"
     inkscape:cy="322.60207"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     inkscape:window-width="961"
     inkscape:window-height="851"
     inkscape:window-x="-4"
     inkscape:window-y="59"
     showguides="true"
     inkscape:guide-bbox="true" />
  <metadata
     id="metadata69503">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-463.15484,-207.80843)">
    <path
       id="path3287"
       d="M 520.32401,210.04362 C 519.48717,210.06623 518.64216,210.29496 517.86347,210.74454 L 467.98822,239.54091 C 465.49641,240.97955 464.65123,244.13867 466.08987,246.63048 L 483.08003,276.06207 C 484.51868,278.55388 487.68509,279.39905 490.1769,277.96041 L 516.24258,262.91241 L 516.24258,372.89203 C 516.24258,375.76933 518.56382,378.09057 521.44111,378.09057 L 617.73079,378.09057 C 620.60808,378.09057 622.92202,375.76933 622.92202,372.89203 L 622.92202,262.75908 L 649.25786,277.96041 C 651.74966,279.39905 654.90878,278.55388 656.34742,276.06207 L 673.33758,246.63048 C 674.77621,244.13867 673.93104,240.97955 671.43924,239.54091 L 621.57129,210.74454 C 620.55898,210.16009 619.43218,209.95293 618.3587,210.08012 C 618.15248,210.05543 617.94388,210.04362 617.73079,210.04362 L 590.14644,210.04362 C 589.7381,213.31613 580.73531,215.93577 569.71008,215.93577 C 558.68484,215.93577 549.68935,213.31613 549.28101,210.04362 L 521.44111,210.04362 C 521.27369,210.04362 521.10791,210.05748 520.94462,210.07282 C 520.73739,210.0533 520.53333,210.03796 520.32401,210.04362 z "
       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:4.46799994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>

icon.svg

picker.js

import React, { Component } from 'react';
import styles from './styles.sass';
import icon from './icon.svg';
import iconActive from './icon-active.svg';
import cx from 'classnames';

export default class Picker extends Component {
  constructor() {
    super();
    this.state = {
      size: 'XS',
      availableSizes: ['XS', 'S', 'M', 'L', 'XL'],
    };
  }

  onClick = (size) => {
    this.setState({size: size});
  }

  renderItem = (size, index) => {
    const width = 60 + index * 20;
    const active = this.state.size === size;
    const className = cx(styles.item, {[styles.active]: active});
    const src = active ? iconActive : icon;

    return(
      <div key={size} onClick={this.onClick.bind(this, size)} className={className}>
        <img width={`${width}px`} src={src} />
        {size}
      </div>
    );
  }

  render() {
    return (
      <div>
        Your size: {this.state.size}
        <hr/>
        {this.state.availableSizes.map(this.renderItem)}
      </div>
    );
  }
}

styles.sass

.item
  margin: 20px
  display: inline

.active
  color: white