jws-frontend/src/components/ItemCard.vue

<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { onMounted } from 'vue';
const props = defineProps<{
  icon: string;
  text: string;
  iconColor: string;
  bgColor: string;
  changeColor?: boolean;
  index?: number;
}>();

const _self = ref<InstanceType<typeof HTMLDivElement>>();

onMounted(() => {
  if (props.index === 0) {
    _self.value?.focus();
  }
});
</script>

<template>
  <button
    ref="_self"
    class="wrapper surface-1 shadow-2"
    type="submit"
    @click="$emit('trigger')"
    style="padding: 0; border-radius: var(--radius-2); width: 320px"
  >
    <div class="column justify-center" style="height: 100%">
      <div class="col-6 flex justify-center items-center">
        <div
          class="q-pa-md row items-center"
          :style="`border-radius: 50%; background-color: hsla(${bgColor} / 0.1)`"
        >
          <Icon :icon="icon" width="53px" :color="`var(${iconColor})`" />
        </div>
      </div>
      <div
        class="col-2 flex text-bold text-h6 text-center justify-center items-center variable-item-card"
        :class="{ dark: $q.dark.isActive }"
        :style="`background-color: ${bgColor}`"
      >
        <div style="font-size: 14px">{{ $t(text) }}</div>
      </div>
    </div>
  </button>
</template>

<style scoped>
.variable-item-card {
  --_var-filter: grayscale(30%);

  filter: var(--_var-filter);
  &.dark {
    --_var-filter: grayscale(0%);
  }
}

.variable-icon-color {
  --_var-filter: grayscale(0%);

  filter: var(--_var-filter);
  &.dark {
    --_var-filter: color;
  }
}
.wrapper {
  appearance: none;
  background: transparent;
  outline: none;
  border: none;
}

.wrapper:focus {
  border: 2px solid var(--blue-6);
  border-radius: 10px;
}
</style>