feat: add basic profile component

app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue

@@ -4,8 +4,14 @@
       class="flex flex-col h-full p-5 pt-16 mx-auto my-0 bg-white dark:bg-slate-900 font-inter"
     >
       <div class="flex flex-col gap-8 sm:max-w-3xl">
-        <h1>Personal settings</h1>
+        <h2 class="text-2xl font-medium text-slate-900 dark:text-white">
+          Profile Settings
+        </h2>
+        <user-basic-profile username="John Doe" size="72px" />
       </div>
     </div>
   </div>
 </template>
+<script setup>
+import UserBasicProfile from './UserBasicProfile.vue';
+</script>

app/javascript/dashboard/routes/dashboard/settings/personal/UserBasicProfile.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="flex flex-col gap-2 mt-2">
+      <span class="font-medium text-slate-900 dark:text-slate-25 text-normal">
+        Profile picture
+      </span>
+      <div
+        class="relative rounded-xl h-[72px] w-[72px]"
+        :title="title"
+        @mouse-over="showUpload"
+      >
+        <img
+          class="rounded-xl h-[72px] w-[72px]"
+          src="https://i.pravatar.cc/300"
+          draggable="false"
+          @load="onImgLoad"
+          @error="onImgError"
+        />
+        <div
+          class="absolute z-10 flex items-center justify-center w-6 h-6 p-1 border border-white rounded-full select-none -top-2 -right-2 dark:border-white bg-slate-200 dark:bg-slate-700"
+        >
+          <fluent-icon
+            icon="dismiss"
+            size="16"
+            class="text-slate-800 dark:text-slate-200"
+          />
+        </div>
+        <div
+          class="absolute h-[72px] w-[72px] top-0 left-0 rounded-xl select-none flex items-center justify-center bg-modal-backdrop-dark dark:bg-modal-backdrop-dark"
+        >
+          <fluent-icon
+            icon="avatar-upload"
+            size="32"
+            class="text-white dark:text-white"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="pt-6">
+      <form-input
+        name="full_name"
+        class="flex-1"
+        :class="{ error: false }"
+        :label="$t('REGISTER.FULL_NAME.LABEL')"
+        placeholder="Enter your name"
+        :has-error="false"
+        :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+      />
+      <form-input
+        name="display_name"
+        class="flex-1"
+        :class="{ error: false }"
+        label="Display name"
+        placeholder="Enter your display name"
+        :has-error="false"
+        :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+      />
+      <form-input
+        name="email"
+        class="flex-1"
+        :class="{ error: false }"
+        label="Email"
+        placeholder="Enter your email"
+        :has-error="false"
+        :error-message="$t('REGISTER.FULL_NAME.ERROR')"
+      />
+      <woot-button
+        color-scheme="primary"
+        class="rounded-xl w-fit"
+        @click="$emit('click')"
+      >
+        Update profile
+      </woot-button>
+    </div>
+  </div>
+</template>
+<script>
+import FormInput from 'v3/components/Form/Input.vue';
+export default {
+  components: {
+    FormInput,
+  },
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      hasImageLoaded: false,
+      imgError: false,
+      showUploadIcon: false,
+    };
+  },
+  computed: {
+    shouldShowImage() {
+      if (!this.src) {
+        return false;
+      }
+      if (this.hasImageLoaded) {
+        return !this.imgError;
+      }
+      return false;
+    },
+  },
+  watch: {
+    src(value, oldValue) {
+      if (value !== oldValue && this.imgError) {
+        this.imgError = false;
+      }
+    },
+  },
+  methods: {
+    onImgError() {
+      this.imgError = true;
+    },
+    onImgLoad() {
+      this.hasImageLoaded = true;
+    },
+    showUpload() {
+      this.showUploadIcon = true;
+    },
+  },
+};
+</script>

app/javascript/shared/components/FluentIcon/dashboard-icons.json

@@ -272,5 +272,6 @@
   "chevrons-left-outline": ["m11 17-5-5 5-5", "m18 17-5-5 5-5"],
   "chevron-left-single-outline": "m15 18-6-6 6-6",
   "chevrons-right-outline": ["m6 17 5-5-5-5", "m13 17 5-5-5-5"],
-  "chevron-right-single-outline": "m9 18 6-6-6-6"
+  "chevron-right-single-outline": "m9 18 6-6-6-6",
+  "avatar-upload-outline": "M19.754 11a.75.75 0 0 1 .743.648l.007.102v7a3.25 3.25 0 0 1-3.065 3.246l-.185.005h-11a3.25 3.25 0 0 1-3.244-3.066l-.006-.184V11.75a.75.75 0 0 1 1.494-.102l.006.102v7a1.75 1.75 0 0 0 1.607 1.745l.143.006h11A1.75 1.75 0 0 0 19 18.894l.005-.143V11.75a.75.75 0 0 1 .75-.75ZM6.22 7.216l4.996-4.996a.75.75 0 0 1 .976-.073l.084.072l5.005 4.997a.75.75 0 0 1-.976 1.134l-.084-.073l-3.723-3.716l.001 11.694a.75.75 0 0 1-.648.743l-.102.007a.75.75 0 0 1-.743-.648L11 16.255V4.558L7.28 8.277a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.977l.073-.084l4.996-4.996L6.22 7.216Z"
 }