From 62580206b9f8cce93c920a56eb499a3deace2dc6 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Mon, 18 Dec 2023 17:07:30 +0600
Subject: [PATCH 1/2] avatar

---
 src/App.vue                                | 19 +++++++--
 src/components/DxhAvatar.vue               | 17 ++++++++
 src/components/__tests__/DxhAvatar.spec.ts | 46 ++++++++++++++++++++++
 3 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DxhAvatar.vue
 create mode 100644 src/components/__tests__/DxhAvatar.spec.ts

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..806ae2c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,18 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div>
+    <Avatar :height="100" :width="100"  rounded>
+      <!-- You can pass any content as default slot -->
+      <img
+        src="https://images.rawpixel.com/image_png_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTA4L3Jhd3BpeGVsX29mZmljZV8zNF9mdWxsX2JvZHlfM2RfYXZhdGFyXzNkX3JlbmRlcl9vZl9hX2J1c2luZXNzd19jOWYzODYxYy1lZTYzLTQxOGYtOThmNC02MWJkNGM3OGE1YTZfMS5wbmc.png"
+        alt="Avatar 1 Image"
+      />
+      <!-- <p class="h-full w-full flex items-center justify-center">AJ</p> -->
+    </Avatar>
+  </div>
 </template>
+
+<script setup lang="ts">
+import Avatar from './components/DXHAvatar.vue'
+
+const props = defineProps(['avatar1', 'avatar2', 'avatar3'])
+</script>
diff --git a/src/components/DxhAvatar.vue b/src/components/DxhAvatar.vue
new file mode 100644
index 0000000..d5bc85d
--- /dev/null
+++ b/src/components/DxhAvatar.vue
@@ -0,0 +1,17 @@
+<template>
+  <div
+    :style="{ width: `${width}px`, height: `${height}px` }"
+    :class="[{ 'rounded-full': rounded }]"
+    class="inline-block overflow-hidden shadow-lg bg-gray-200 object-cover"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  height: number
+  width: number
+  rounded?: boolean
+}>()
+</script>
diff --git a/src/components/__tests__/DxhAvatar.spec.ts b/src/components/__tests__/DxhAvatar.spec.ts
new file mode 100644
index 0000000..fff2eb1
--- /dev/null
+++ b/src/components/__tests__/DxhAvatar.spec.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhAvatar from '../DxhAvatar.vue'
+
+describe('DxhAvatar.vue', () => {
+  it('renders with specified width and height', () => {
+    const width = 100
+    const height = 150
+
+    const wrapper = mount(DxhAvatar, {
+      props: {
+        width,
+        height
+      }
+    })
+
+    const container: any = wrapper.element
+
+    expect(container.style.width).toBe(`${width}px`)
+    expect(container.style.height).toBe(`${height}px`)
+
+    expect(container.classList.contains('rounded-full')).toBe(false)
+
+    expect(container.classList.contains('inline-block')).toBe(true)
+    expect(container.classList.contains('overflow-hidden')).toBe(true)
+    expect(container.classList.contains('shadow-lg')).toBe(true)
+    expect(container.classList.contains('bg-gray-200')).toBe(true)
+    expect(container.classList.contains('object-cover')).toBe(true)
+  })
+
+  it('renders with rounded class when rounded prop is true', () => {
+    const width = 100
+    const height = 150
+
+    const wrapper = mount(DxhAvatar, {
+      props: {
+        width,
+        height,
+        rounded: true
+      }
+    })
+
+    const container = wrapper.element
+    expect(container.classList.contains('rounded-full')).toBe(true)
+  })
+})

From 74f14c017fbaf683ee3c3ce3e4e1b23a24fec121 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Mon, 18 Dec 2023 17:09:47 +0600
Subject: [PATCH 2/2] avatar

---
 src/App.vue | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 806ae2c..a0d7a19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,5 @@
 <template>
-  <div>
-    <Avatar :height="100" :width="100"  rounded>
-      <!-- You can pass any content as default slot -->
-      <img
-        src="https://images.rawpixel.com/image_png_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTA4L3Jhd3BpeGVsX29mZmljZV8zNF9mdWxsX2JvZHlfM2RfYXZhdGFyXzNkX3JlbmRlcl9vZl9hX2J1c2luZXNzd19jOWYzODYxYy1lZTYzLTQxOGYtOThmNC02MWJkNGM3OGE1YTZfMS5wbmc.png"
-        alt="Avatar 1 Image"
-      />
-      <!-- <p class="h-full w-full flex items-center justify-center">AJ</p> -->
-    </Avatar>
-  </div>
+  <main>
+    Vue-Tailwind
+  </main>
 </template>
-
-<script setup lang="ts">
-import Avatar from './components/DXHAvatar.vue'
-
-const props = defineProps(['avatar1', 'avatar2', 'avatar3'])
-</script>