added TypedAvatar.vue component

2026-04-28 19:10:40 +00:00 · 2021-08-30 15:06:26 +02:00
parent 2bfdf5c311
commit ac62a432fe
6 changed files with 74 additions and 10 deletions
@@ -0,0 +1,35 @@
+<template>
+	<div class="typed-avatar" :style="{width: size + 'px', height: size + 'px'}">
+		<span class="letter">{{ letter }}</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TypedAvatar",
+	props: [
+		'letter',
+		'size',
+	]
+}
+</script>
+
+<style scoped lang="scss">
+	@import "resources/sass/vuefilemanager/_variables";
+	@import "resources/sass/vuefilemanager/_mixins";
+
+	.typed-avatar {
+		user-select: none;
+		display: flex;
+		background: #9ad2bf;
+		border-radius: 10px;
+		align-items: center;
+		justify-content: center;
+		border: 2px solid white;
+
+		.letter {
+			font-weight: 800;
+			text-transform: uppercase;
+		}
+	}
+</style>