first commit

components/Div/Avatar.vue

@@ -0,0 +1,68 @@
+<script setup>
+const props = defineProps({
+  size: {
+    type: [String, Number],
+    default: 40,
+  },
+  gender: {
+    type: String,
+    default: '',
+    validator: (value) => ['male', 'female', ''].includes(value.toLowerCase()),
+  },
+  profileImageUrl: {
+    type: String,
+    default: '',
+  },
+  class: {
+    type: [String, Object, Array],
+    default: '',
+  },
+})
+
+const avatarSource = computed(() => {
+  if (props.profileImageUrl) {
+    return props.profileImageUrl
+  }
+
+  switch (props.gender.toLowerCase()) {
+    case 'male':
+      return null // Gunakan slot default untuk v-icon
+    case 'female':
+      return null // Gunakan slot default untuk v-icon
+    default:
+      return null // Gunakan slot default untuk v-icon
+  }
+})
+
+const avatarIcon = computed(() => {
+  if (!props.profileImageUrl) {
+    switch (props.gender.toLowerCase()) {
+      case 'male':
+        return 'mdi-face-man'
+      case 'female':
+        return 'mdi-face-woman'
+      default:
+        return 'mdi-emoticon-confused'
+    }
+  }
+  return null
+})
+</script>
+
+<template>
+  <v-avatar :size="size" color="primary" :class="class">
+    <img v-if="avatarSource" :src="avatarSource" :alt="`Avatar`" />
+    <v-icon
+      v-else-if="avatarIcon"
+      :size="Math.max(Number(size) * 0.66, 20)"
+      color="white"
+    >
+      {{ avatarIcon }}
+    </v-icon>
+    <slot v-else name="fallback">
+      <v-icon :size="Math.max(Number(size) * 0.66, 20)" color="white">
+        mdi-account-circle
+      </v-icon>
+    </slot>
+  </v-avatar>
+</template>

components/Div/IconText.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: 'mdi-information',
+  },
+})
+</script>
+
+<template>
+  <v-row align="center" no-gutters>
+    <v-icon small class="mr-2">{{ icon }}</v-icon>
+    <span class="text-body-2">{{ text }}</span>
+  </v-row>
+</template>