initial commit

resources/js/Components/CardBoxClient.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { computed } from 'vue'
+import { mdiTrendingDown, mdiTrendingUp, mdiTrendingNeutral } from '@mdi/js'
+import CardBox from '@/Components/CardBox.vue'
+import BaseLevel from '@/Components/BaseLevel.vue'
+import PillTag from '@/Components/PillTag.vue'
+import UserAvatar from '@/Components/UserAvatar.vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true
+  },
+  login: {
+    type: String,
+    required: false
+  },
+  email: {
+    type: String,
+    required: false
+  },
+  date: {
+    type: String,
+    required: false
+  },
+  progress: {
+    type: Number,
+    default: 0
+  },
+  text: {
+    type: String,
+    default: null
+  },
+  type: {
+    type: String,
+    default: null
+  }
+})
+
+
+const pillType = computed(() => {
+  if (props.type) {
+    return props.type
+  }
+
+  if (props.progress) {
+    if (props.progress >= 60) {
+      return 'success'
+    }
+    if (props.progress >= 40) {
+      return 'warning'
+    }
+
+    return 'danger'
+  }
+
+  return 'info'
+})
+
+const pillIcon = computed(() => {
+  return {
+    success: mdiTrendingUp,
+    warning: mdiTrendingNeutral,
+    danger: mdiTrendingDown,
+    info: mdiTrendingNeutral,
+  }[pillType.value]
+})
+
+const pillText = computed(() => props.text ?? `${props.progress}%`)
+</script>
+
+<template>
+  <CardBox
+    class="mb-6 last:mb-0"
+    hoverable
+  >
+    <BaseLevel>
+      <BaseLevel type="justify-start">
+        <UserAvatar
+          class="w-12 h-12 mr-6"
+          :username="props.name"
+        />
+        <div class="text-center md:text-left overflow-hidden">
+          <h4 class="text-xl text-ellipsis ">
+            {{ name }}
+          </h4>
+          <p class="text-gray-500 dark:text-slate-400">
+            <!-- {{ date }} @ {{ login }} -->
+            {{ email }}
+          </p>
+        </div>
+      </BaseLevel>
+      <PillTag
+        :type="pillType"
+        :text="pillText"
+        small
+        :icon="pillIcon"
+      />
+    </BaseLevel>
+  </CardBox>
+</template>