function Progress(props) {
  return (
    <Page>
      <Section
        title={<Text bold>Color Settings</Text>}>
        <Select
          label={`Progress Color`}
          settingsKey="progresscolor"
          options={[
            {name:"Violet", value:"violet", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAe1BMVEWdJeucJuubJ+qZKOmYKuiWK+eVLOeTLuaRL+WQMeWOMuONM+OLNeKKNuGIN+GHOeCFO9+CPd2BPt1+Qdt/QNx8Qtt5Rdl7RNl4Rth2SNdzStZwTdRvT9NqU9FnVc9oVNFiWc1fXMxcX8pbYMlWZMdTZ8VSaMVPa8NObMPgCFu1AAABPUlEQVR4AeTLxQECURAE0cJ9fb/lnyeWAVNH3kifmn+0EdgK7AT2AgeBo8BJ4CxwEbgK3ATuAg+BTqAXGATe14fLo8A0zWN0WOZ5Xdc5MjPfeFvH9edjjUrrSsqlrMGhCK5cayuvYsdAN0IYhqH+jImsJXdJB///hUssqRq3wQGVtGdXTkVccVeYpojk4/rBNAAmEQ6Sg1w6E2QAfEpQQrfKtcpM6WWhSJRLIHG7eFBqraXMRfkYfVIqyO486/a36bdZUAOddYPQh0mjarajLtpNjpNAB/jH8uP5fJhSSjKNeajAwCrvP1APmXL6U/HFs2wvsJN4Vm0HbsF+4TSbTN9dgbnTCQfrd07MDf2LoU+9dAquwt/SfA94a04xU1zneAC30QbA10h5eaUtjT4BlgHGyuu6jpSDofLNB74BsSM6TDJPgIYAAAAASUVORK5CYII="},
            {name:"Peach", value:"peach", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAM1BMVEX8vZX8u5b8uZb7uZb7t5f7tJj7sZn6rpr6q5v5p535pJ74nqD6qZz5oZ/4m6H3l6P3laQKzTpRAAABVUlEQVR4AeWOh3IDIQxE9zpw9f+/NsvazCidkp63QkLje4zxL+la0qGvTtdXA/QNtMnDOEyVGTFOnJXBKFuntCZMo8xSJIFuNVCfbyktqE+x1HK7irLQUMvrKhhtKgq/B9uicLJyo88xL8t9U8s9krA08MGyy41k53QTWjLjFjhxt+MlDzlYXD1wTbJnIqFK9rECszpWCdg8cdEm0vMDqiJoZeWfAGo+hCjHrEWJssIl3GRTb88V0SReZlkcQlgp8s5pfll5ntbTHwICTeo0vf1MeVK2KQg79Wg7Y8domjy+6iCsCk3tahqMxZlLKuwUY8lOunkgJW32Kcqy7eNP7xbzhJMs19t/lb56B6SL9EIk19EuH4xIM22H9icc4uaAw6CnIprvAXV9XY5kcdbIpzSNCpka0aR/KnkgqRpqmjrvgbOG75cv0iQbTnKdeQ9ekiv5rfIDvep6F+lQq34AAAAASUVORK5CYII="},
            {name:"Dawn", value:"dawn", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAaVBMVEU7k8U9kcQ/j8NDjsJHi8FFjcJKicBPh79Shb5Wgr1YgbxagLxcf7xgfbpmeblpd7hoeLhrdrdtdbZvdLZxc7VzcrV1cLR5brOEZ7B9bLKAarGGZq+MY66UXqybWqmOYq2SYKyXXaufWal+cdL0AAACCElEQVR4AeyM0ZbDIAhEqXWJsYvE7v//6w5KT3zY7GnMay8wjoYJfTjJLQT0FDcKF7gWvt9DnMxG+ooxxDkCmXIMPJMmRNEMPQsz8QWIlwvhZUm88prOw4ncrHx2UD284raea1QiBBMMrtkE856CRO3Ir4F0Bf94h/LfYGfnyNMjz0Pf+SE4MTKUIcMMbj+FRCTblNxGWgPzsNoe3XkpXoo9WdjBay/fVds7qP5HspSPyivtDnpYogiXIuit70tFdadq2qr3WNp2CsJbKVrsXtW0O3zEFXh0xPMIbwDRrUV30VrHmNvxAUObDiAwUtGj9Vbxk6qh1Q9bexet9Kzz0M/zt7Qx0JEQhIFof4GkR4sL7t7+/0fedCQxJOIZfVMnBPqipp+7sqrmnJOpGgqfJT3BkxFuSdacMlDakTO4EVCXvKFmioA0DY3+6xRHyqZaKLLmdJVQNlLsAE9uJ3jqstslxk2XsgArxRZc9+lhDYnar1UW2Lgti/XX63FZgBvkXfzPYW+yR1gd8wEbmtUxOdqcqwMveW34HZ7JtdvVIw25ygr5HdTaOHDXy3F5k9ocauXVUNNEUQatNszBymyQJp/2aQFtXA3ydPhaheIb3xrDBxa/2fRX+Q0PFm1c1VHlNx72J8iQaMZX12HrUEc2qvRDY/NxchoOzqF8l2fy95n8fSZ/b8sP7D/AWuY0svXUEQAAAABJRU5ErkJggg=="},
            {name:"Lime", value:"lime", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAi0lEQVR4AWK8+7AA0K5dGEEUwlAUzUr/BX+0AhhZDXNeBReJJ7LpHkuBBv1sY+SDrimhu5veCHTkgy69x1fke0S4aX/6qJtuKV1eztyji4gMUT7Ne/xxjeim1Yg7gY6U+bTvAfqwLE+NCNqfluXpe7xf/rQ54lr+9NDLk3vo5blp0PoeIqJtMdDHQU8F5JLHx3oKRgAAAABJRU5ErkJggg=="},
            {name:"Blush", value:"blush", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAkFBMVEXQlZPQk5LQkZLPj5HPjJDPipDPh4/PhY7Pg43OgY3OfozOfIvOeYvOdYrNc4jNcIjNbofNaobNbIfNZ4XMYIPMZYXMYoTMXoLMXILMWYHLV4DLU3/LTn3KS33KSXzKRXvKQnrJPXnKQHrJO3jJOXfJN3fJNHbJMnXIMHXILnTIK3PIKXLHInHIJHHHIHDHHW+2HUOCAAAAyklEQVR4Ae3QoRLbUAxE0Xv3CRcVl/b/P9BWQWcCiuJFnUnOyhJa4McHUnrz/5a/5W852Mcf9AK9UWoRAEEef5Pt27MEAO7nd/Lv0519+ybneGRe4e1rvO9zM5fX/A1vX/x5qOXQG0U61yitE+mNuC7VBGCthhHqCRIDzyf4i15AEHi+X//suo/3IMACPt6j64oUO8E2OxtqE6lFejHnMFWOv11Zq0QEu4z0grScvg2Bvj1Z9tw0dpZwdW0nwCH1a0vHkb4dAD6r/Ae5WZ00FhkppAAAAABJRU5ErkJggg=="},
            {name:"Roast", value:"roast", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAeUlEQVR4AWLc1ZEOaNcOMAAGghiKrur9b9xJT7CFVgkvJ4jvG7F2teVY2yit9DlJX+lrppD0b6WRDj224XSlHkGa0+400py2p9+G006elYe0O400p+1ppG0P7x6ctvKQRtr1sKc5jXTs6YdwOkHa9nCnfbxSWulPcwPno51T78u2kwAAAABJRU5ErkJggg=="},
            {name:"Aurora", value:"aurora", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAdklEQVR4AWI04ikCtGsHGADDQBBFk7H3v3J6gwDaDm9P8I2H0qy2yyo80aIvN2t2X/SZFC5dGZ1KHruTh2immRbNNB6iTyp5MG3pi+lfL820pZlm2ldeWnmIZppp0Uzj4Z8L00wz/eoxzTTTlmY6THt4JfrjewADWBCF1g0MKwAAAABJRU5ErkJggg=="},
            {name:"Blues", value:"blues", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAIAAAC1nk4lAAAAm0lEQVR4AWI0MS4FtGMHGhTDMBiF26zv/8Z3rgl9gMKS+YItOjj7HVEZ3SpKUoE+L9BrxuwIHZI+KdCgQc/S0Oa0pEFzWtLvM3Na0qBHR+j4mtPu05w28uhxlrQ5zelZAJrTkjannxen6WE/zWlXU9CcHl/SA7T9dMT1QDd7Jvv9u7Op38cVkUf5B/X7rJVH+1vxPtHX7urXRv8DwEBjUXkS1AoAAAAASUVORK5CYII="},
            {name:"Pony Hair", value:"ponyhair", icon:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAllBMVEXpQ4vmRozkSI7jTI/iTpDgUZHeU5PdVpTcWJXaW5bYXpjWY5rUZpvXYZnSaJ3Ra57QbZ/OcKDMc6LJeKTGfafDgqnFgKjChavAiK2+i669ja+8kLC4lbO6krKyoLi2m7W3l7S0nbexormwpbqup7ysqr2rrL6qsL+mtcKossGkusSlt8Ogv8eivMadxcmbx8uaysyfwsjK80E8AAABkklEQVR4AeyLR2LFIBQDBfzqTnO7/0GD3JYJfmwzI9HBPzdRWq5WKMBoo8UoDSNTGTwLwOu5KeD5wvslR6sEjNBvAaiqLz2SXwZVAaibtqmaqhPYoNnozomL3Dbg+45wugn6Tg6GvrOXHZuNhZXirIVz9tR6Tlx5+1f43MF5ynjLkeWJ9b+Hr+DlFH4OG55Gz7B5iRhDiCESfzYvaUAkISkAU5SDeY7LEilZ8pPEUgDWRY5WxGD3oZLI1eCndDnQjRCEwQDc13CB7s5dXTd7yN7/5VaghstCJujX39aE/N479+YmHY0f4sA5bRv/CqejSeVX6PNoctu3ry0H77fMJbqtuR+c2jcvB3e8I96w8rY0/366QLunwYznwceMc3Kq/HhQtaDGpiNApO2ZMtS66agSAf1hxR4En/ufYp1yezDBFy9sUrcczTFiSGfZY9VewBfA97quwhqW4YHnU1ZJES6p62BEQAzLKK7lIOMgFFuQUPR3A2xb0ElC1V2uYmj6adKHCDHGdv+YlqstDoJ4waXyL1jfQHdkrnntAAAAAElFTkSuQmCC"},
          ]}          
          renderItem={
            (option) =>
              <TextImageRow
                label={option.name}
                icon={option.icon}
              />
          }
          onSelection={(selection) => console.log(selection)}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(Progress);