From 1e6191dc6206a922e48d3858bae81be3c681a030 Mon Sep 17 00:00:00 2001
From: oat_dev <nattapon@frappet.com>
Date: Mon, 22 Apr 2024 14:21:14 +0700
Subject: [PATCH] feat: icon card

---
 src/components/ItemCard.vue | 58 +++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/components/ItemCard.vue

diff --git a/src/components/ItemCard.vue b/src/components/ItemCard.vue
new file mode 100644
index 00000000..95aad1ae
--- /dev/null
+++ b/src/components/ItemCard.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import AppBox from './app/AppBox.vue';
+import { Icon } from '@iconify/vue';
+defineProps<{
+  icon: string;
+  text: string;
+  color: string;
+}>();
+</script>
+
+<template>
+  <AppBox
+    style="
+      padding: 0;
+      border-radius: var(--radius-2);
+      width: 320px;
+      height: 195px;
+    "
+    bordered
+  >
+    <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'}`"
+        />
+      </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">{{ 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>