effendy/general-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Yusron alamsyah
2026-03-13 10:45:28 +07:00
commit 6bb6a1d430
568 changed files with 51753 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ui-components/avatar/BasicAvatar.vue
+13
View File
@@ -0,0 +1,13 @@
<script setup lang="ts">
import { ref } from 'vue';
// icons
import { UserIcon} from 'vue-tabler-icons';
</script>
<template>
<div class="text-center">
<v-avatar variant="flat" color="primary">
<UserIcon />
</v-avatar>
</div>
</template>
components/ui-components/avatar/IconAvatar.vue
+24
View File
@@ -0,0 +1,24 @@
<script setup lang="ts">
import { ref } from 'vue';
// icons
import { MoodSmileIcon} from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex align-center gap-2 justify-center">
<v-avatar size="40" color="primary" variant="flat">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" variant="flat" color="secondary" >
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="error" variant="flat">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="warning" variant="flat">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="success" variant="flat">
<MoodSmileIcon size="25" />
</v-avatar>
</div>
</template>
components/ui-components/avatar/ImageAvatar.vue
+13
View File
@@ -0,0 +1,13 @@
<template>
<div class="d-flex align-center gap-2 justify-center">
<v-avatar size="40" variant="flat">
<img src="@/assets/images/profile/user-6.jpg" width="40" alt="Julia" />
</v-avatar>
<v-avatar size="40" variant="flat">
<img src="@/assets/images/profile/user-2.jpg" width="40" alt="Julia" />
</v-avatar>
<v-avatar size="40" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="40" alt="Julia" />
</v-avatar>
</div>
</template>
components/ui-components/avatar/LetterAvatar.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<div class="d-flex align-center gap-2 justify-center">
<v-avatar size="40" color="primary" variant="flat" class="text-h5 font-weight-medium"> A </v-avatar>
<v-avatar size="40" color="secondary" variant="flat" class="text-h5 font-weight-medium">B</v-avatar>
<v-avatar size="40" color="error" variant="flat" class="text-h5 font-weight-medium"> C </v-avatar>
<v-avatar size="40" color="warning" variant="flat" class="text-h5 font-weight-medium"> D </v-avatar>
<v-avatar size="40" color="success" variant="flat" class="text-h5 font-weight-medium"> E </v-avatar>
</div>
</template>
components/ui-components/avatar/SizeAvatar.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<div class="d-flex align-center gap-3 justify-center">
<v-avatar size="x-small" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="25" alt="Julia" />
</v-avatar>
<v-avatar size="small" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="35" alt="Julia" />
</v-avatar>
<v-avatar size="medium" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="40" alt="Julia" />
</v-avatar>
<v-avatar size="large" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="48" alt="Julia" />
</v-avatar>
<v-avatar size="x-large" variant="flat">
<img src="@/assets/images/profile/user-3.jpg" width="56" alt="Julia" />
</v-avatar>
</div>
</template>
components/ui-components/avatar/VariantAvatar.vue
+18
View File
@@ -0,0 +1,18 @@
<script setup lang="ts">
import { ref } from 'vue';
// icons
import { MoodSmileIcon} from 'vue-tabler-icons';
</script>
<template>
<div class="d-flex align-center gap-2 justify-center">
<v-avatar size="40" color="primary" variant="flat" rounded="sm">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="primary" variant="flat" rounded="md">
<MoodSmileIcon size="25" />
</v-avatar>
<v-avatar size="40" color="primary" variant="flat" rounded="lg">
<MoodSmileIcon size="25" />
</v-avatar>
</div>
</template>