refactor(ui): replaced naive ui cards with custom ones

1 files changed, 35 insertions, 0 deletions

diff --git a/src/ui/c-card/c-card.vue b/src/ui/c-card/c-card.vue
new file mode 100644
index 0000000..11d86fd
--- /dev/null
+++ b/src/ui/c-card/c-card.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="c-card">
+    <div v-if="title" class="c-card-title">
+      {{ title }}
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from './c-card.theme';
+
+const props = defineProps<{
+  title?: string;
+}>();
+
+const { title } = toRefs(props);
+
+const theme = useTheme();
+</script>
+
+<style lang="less" scoped>
+.c-card {
+  background-color: v-bind('theme.backgroundColor');
+  border: 1px solid v-bind('theme.borderColor');
+  border-radius: 4px;
+  padding: 20px 24px;
+
+  &-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 20px;
+  }
+}
+</style>