<script setup lang="ts">


import {PropType} from "vue";
import {Transaction} from "@/models/Transaction";

const props = defineProps(
    {
      elements: {
        type: Object,
        required: true,
      },
      selectedElement: {
        type: String,
        required: true,
      }
    }
)
</script>

<template>
  <div
      class="sm:col-span-1 w-full h-56 lg:h-[42rem] p-2 overflow-y-scroll outline outline-1 outline-gray-300 rounded-lg">
    <!--                <IconField>-->

    <!--                  <InputText v-model="filterText" placeholder="Поиск категории"/>-->
    <!--                  <InputIcon class="pi pi-search"/>-->
    <!--                </IconField>-->
    <ul class=" min-w-fit w-full">

      <li v-for="el in elements"
          class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
          :class="selectedElement == el.id? '!bg-emerald-50 text-emerald-700': '' "
          @click="selectedElement=el">
        {{ category.icon }} {{ e.name }}
      </li>
    </ul>
  </div>
</template>

<style scoped>

</style>