jws-frontend/src/components/ItemCard.vue

<script setup lang="ts">
import AppBox from './app/AppBox.vue';
import { Icon } from '@iconify/vue';
defineProps<{
  icon: string;
  text: string;
  color: string;
  changeColor?: boolean;
}>();
</script>

<template>
  <AppBox
    style="
      padding: 0;
      border-radius: var(--radius-2);
      width: 320px;
      height: 195px;
    "
    bordered
    class="cursor-pointer"
    @click="$emit('trigger')"
  >
    <div class="column" style="height: 100%">
      <div class="col-9 flex justify-center items-center">
        <Icon
          :icon="icon"
          width="64px"
          :class="`${$q.dark.isActive ? '' : 'app-text-muted'}`"
          :color="changeColor ? color : ''"
        />
      </div>
      <div
        class="col-3 flex text-bold text-h6 text-center justify-center items-center variable-item-card"
        :class="{ dark: $q.dark.isActive }"
        :style="`background-color: ${color}`"
      >
        <div style="color: white">{{ $t(text) }}</div>
      </div>
    </div>
  </AppBox>
</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;
  }
}
</style>