{"ast":null,"code":"export const code = \"import React, { useState } from 'react'\\nimport styled from 'styled-components'\\nimport Dropdown from 'react-kiwi-dropdown'\\n\\nconst options = [\\n  { value: 'kiwi', content: '\\uD83E\\uDD5D' },\\n  { value: 'banana', content: '\\uD83C\\uDF4C' },\\n  { value: 'pineapple', content: '\\uD83C\\uDF4D' }\\n]\\n\\nconst fruitBaskets = [\\n  { type: 'kiwi', text: '\\uD83E\\uDD5D' },\\n  { type: 'banana', text: '\\uD83C\\uDF4C' },\\n  { type: 'pineapple', text: '\\uD83C\\uDF4D' },\\n  { type: 'kiwi', text: '\\uD83E\\uDD5D' },\\n  { type: 'banana', text: '\\uD83C\\uDF4C' },\\n  { type: 'pineapple', text: '\\uD83C\\uDF4D' }\\n]\\n\\nfunction SingleSelect() {\\n  const [showCode, setShowCode] = useState(false)\\n  const [selectedOption, setSelectedOption] = useState('')\\n\\n  const onChange = option => {\\n    if (option.value === selectedOption) {\\n      setSelectedOption('')\\n    } else {\\n      setSelectedOption(option.value)\\n    }\\n  }\\n\\n  return (\\n    <StyledDropdown\\n      options={options}\\n      onChange={onChange}\\n      resetValue={''}\\n      buttonIndicator\\n      selectedOption={selectedOption}\\n    />\\n\\n    <BasketList>\\n      {fruitBaskets.map((basket, i) => (\\n        <Basket\\n          key={i}\\n          style={{\\n            background: selectedOption === basket.type ? '#f0fedf' : '#ddd'\\n          }}\\n        >\\n          {basket.text}\\n        </Basket>\\n      ))}\\n    </BasketList>\\n  )\\n}\\n\\nexport default SingleSelect\\n\\nconst Preview = styled.div`\\n  display: flex;\\n\\n  aside {\\n    flex: 1;\\n  }\\n`\\n\\nconst BasketList = styled.ul`\\n  flex: 1;\\n  display: flex;\\n  flex-wrap: wrap;\\n  list-style: none;\\n  margin: 0;\\n  padding: 0%;\\n`\\n\\nconst Basket = styled.li`\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  height: 80px;\\n  width: 80px;\\n  font-size: 50px;\\n  margin: 5px;\\n  border-radius: 50%;\\n`\\n\\nconst StyledDropdown = styled(Dropdown)`\\n  .KIWI-button-indicator {\\n    &.selected {\\n      background: #f0fedf;\\n    }\\n  }\\n\\n  .KIWI-option {\\n    font-size: 40px;\\n\\n    &:focus,\\n    &:active {\\n      outline: none;\\n    }\\n\\n    &.selected {\\n      background: #f0fedf;\\n    }\\n\\n    &:hover {\\n      background: #ddd;\\n    }\\n  }\\n`\\n\";","map":{"version":3,"sources":["/Users/kimvigren/Documents/git/react-kiwi-dropdown/test/src/examples/SingleSelect/code.js"],"names":["code"],"mappings":"AAAA,OAAO,MAAMA,IAAI,0oEAAV","sourcesContent":["export const code = `import React, { useState } from 'react'\nimport styled from 'styled-components'\nimport Dropdown from 'react-kiwi-dropdown'\n\nconst options = [\n  { value: 'kiwi', content: '🥝' },\n  { value: 'banana', content: '🍌' },\n  { value: 'pineapple', content: '🍍' }\n]\n\nconst fruitBaskets = [\n  { type: 'kiwi', text: '🥝' },\n  { type: 'banana', text: '🍌' },\n  { type: 'pineapple', text: '🍍' },\n  { type: 'kiwi', text: '🥝' },\n  { type: 'banana', text: '🍌' },\n  { type: 'pineapple', text: '🍍' }\n]\n\nfunction SingleSelect() {\n  const [showCode, setShowCode] = useState(false)\n  const [selectedOption, setSelectedOption] = useState('')\n\n  const onChange = option => {\n    if (option.value === selectedOption) {\n      setSelectedOption('')\n    } else {\n      setSelectedOption(option.value)\n    }\n  }\n\n  return (\n    <StyledDropdown\n      options={options}\n      onChange={onChange}\n      resetValue={''}\n      buttonIndicator\n      selectedOption={selectedOption}\n    />\n\n    <BasketList>\n      {fruitBaskets.map((basket, i) => (\n        <Basket\n          key={i}\n          style={{\n            background: selectedOption === basket.type ? '#f0fedf' : '#ddd'\n          }}\n        >\n          {basket.text}\n        </Basket>\n      ))}\n    </BasketList>\n  )\n}\n\nexport default SingleSelect\n\nconst Preview = styled.div\\`\n  display: flex;\n\n  aside {\n    flex: 1;\n  }\n\\`\n\nconst BasketList = styled.ul\\`\n  flex: 1;\n  display: flex;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0%;\n\\`\n\nconst Basket = styled.li\\`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 80px;\n  width: 80px;\n  font-size: 50px;\n  margin: 5px;\n  border-radius: 50%;\n\\`\n\nconst StyledDropdown = styled(Dropdown)\\`\n  .KIWI-button-indicator {\n    &.selected {\n      background: #f0fedf;\n    }\n  }\n\n  .KIWI-option {\n    font-size: 40px;\n\n    &:focus,\n    &:active {\n      outline: none;\n    }\n\n    &.selected {\n      background: #f0fedf;\n    }\n\n    &:hover {\n      background: #ddd;\n    }\n  }\n\\`\n`\n"]},"metadata":{},"sourceType":"module"}