# RКомпоненты

## AddTicker

```
<script setup>
import { computed, onMounted, ref } from 'vue'
import AddButton from './AddButton.vue'

const API_KEY =
  '49c2392a697fa3880cecd2a3b029b7e993aa3fd7906502e7634d797e92e5164d'
const ticker = ref('')
const isTickerAlreadyExists = ref(false)
const valutes = ref([])
const emit = defineEmits(['add-ticker'])
const err = ref('')
const props = defineProps(['tickers'])

onMounted(async () => {
  const f = await fetch(
    `https://min-api.cryptocompare.com/data/all/coinlist?summary=true&api_key=${API_KEY}`,
  )
  const data = await f.json()
  if (data.Response == 'Success') {
    valutes.value = Object.keys(data.Data)
  }
})

const shortValutes = computed(() => {
  return valutes.value
    .filter(v => v.includes(ticker.value.toUpperCase()))
    .slice(0, 4)
})

function onTickerChange() {
  isTickerAlreadyExists.value = false
}

function add() {
  const tickerName = ticker.value.toUpperCase()

  if (props.tickers.findIndex(item => item.name == tickerName) >= 0) {
    isTickerAlreadyExists.value = true
    return
  }

  ticker.value = ''
  emit('add-ticker', {
    tickerName,
    tickerExists: valutes.value.includes(tickerName),
  })
}
</script>

<template>
  <section>
    <div class="flex">
      <div class="max-w-xs">
        <label for="wallet" class="block text-sm font-medium text-gray-700"
          >Тикер
        </label>
        <div class="mt-1 relative rounded-md shadow-md">
          <input
            v-model="ticker"
            type="text"
            name="wallet"
            id="wallet"
            class="block w-full pr-10 border-gray-300 text-gray-900 focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm rounded-md"
            placeholder="Например DOGE"
          />
        </div>
        <div class="flex bg-white shadow-md p-1 rounded-md shadow-md flex-wrap">
          <span
            v-for="(p, index) in shortValutes"
            @click="add(p)"
            class="inline-flex items-center px-2 m-1 rounded-md text-xs font-medium bg-gray-300 text-gray-800 cursor-pointer"
          >
            {{ p }}
          </span>
        </div>
        <div v-if="err === 1" class="text-sm text-red-600">
          Такой тикер уже добавлен
        </div>
      </div>
    </div>
    <!-- Heroicon name: solid/mail -->
    <add-button @click="add" class="my-4" />
  </section>
</template>
```
## AddButton

```
<template>
    <button
        type="button"
        class="inline-flex items-center py-2 px-4 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-full text-white bg-gray-600 hover:bg-gray-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
    >
        <svg
            class="-ml-0.5 mr-2 h-6 w-6"
            xmlns="http://www.w3.org/2000/svg"
            width="30"
            height="30"
            viewBox="0 0 24 24"
            fill="#ffffff"
        >
            <path
                d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
            ></path>
        </svg>
        Добавить
    </button>
</template>
```


![](./1.png)