initial commit

resources/js/Components/unused/UserCard.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { MainService } from '@/Stores/main'
+import { mdiCheckDecagram } from '@mdi/js'
+import BaseLevel from '@/Components/BaseLevel.vue'
+import UserAvatarCurrentUser from '@/Components/UserAvatarCurrentUser.vue'
+import CardBox from '@/Components/CardBox.vue'
+import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
+import PillTag from '@/Components/PillTag.vue'
+
+const mainService = MainService()
+
+const userName = computed(() => mainService.userName)
+
+const userSwitchVal = ref([])
+</script>
+
+<template>
+  <CardBox>
+    <BaseLevel type="justify-around lg:justify-center">
+      <UserAvatarCurrentUser class="lg:mx-12" />
+      <div class="space-y-3 text-center md:text-left lg:mx-12">
+        <div class="flex justify-center md:block">
+          <FormCheckRadioGroup
+            v-model="userSwitchVal"
+            name="sample-switch"
+            type="switch"
+            :options="{ one: 'Notifications' }"
+          />
+        </div>
+        <h1 class="text-2xl">
+          Howdy, <b>{{ userName }}</b>!
+        </h1>
+        <p>Last login <b>12 mins ago</b> from <b>127.0.0.1</b></p>
+        <div class="flex justify-center md:block">
+          <PillTag
+            text="Verified"
+            type="info"
+            :icon="mdiCheckDecagram"
+          />
+        </div>
+      </div>
+    </BaseLevel>
+  </CardBox>
+</template>