79 lines
2.2 KiB
Vue
79 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import * as log from "loglevel";
|
|
import ItProgress from "@/components/ui/ItProgress.vue";
|
|
|
|
log.debug("ProfileView created");
|
|
|
|
const fakeData = {
|
|
statusCount: {
|
|
fail: 2,
|
|
success: 9,
|
|
unknown: 2
|
|
}
|
|
}
|
|
|
|
|
|
function setActiveClasses(isActive: boolean) {
|
|
return isActive
|
|
? ["border-blue-900", "border-b-2"]
|
|
: ["text-bg-900"];
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-gray-200">
|
|
<div class="container-large">
|
|
<nav class="py-4 pb-4">
|
|
<router-link
|
|
class="btn-text inline-flex items-center pl-0"
|
|
:to="'/'"
|
|
>
|
|
<it-icon-arrow-left/>
|
|
<span>{{ $t("general.back") }}</span>
|
|
</router-link>
|
|
</nav>
|
|
<header class="flex flex-row items-center mb-12">
|
|
<img class="w-44 h-44 rounded-full mr-8" src="https://picsum.photos/200"/>
|
|
<div>
|
|
<h1 class="mb-2">Daniel Baumgartner</h1>
|
|
<p class="mb-2">d.baumgartner@gmail.com</p>
|
|
<p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]">{{ $t("messages.sendMessage") }}</p>
|
|
</div>
|
|
</header>
|
|
<main>
|
|
<div class="bg-white w-full mb-8">
|
|
ich bin ein Lernpfad
|
|
</div>
|
|
<ul class="flex flex-row border-b-2 mb-5">
|
|
<li class="mr-12 pb-3 relative top-px" :class="setActiveClasses(true)">
|
|
<button>{{ $t("competences.competences") }}</button>
|
|
</li>
|
|
<li class="mr-12">
|
|
<button>{{ $t("general.transferTask", 2) }}</button>
|
|
</li>
|
|
<li class="mr-12">
|
|
<button>{{ $t("general.exam", 2) }}</button>
|
|
</li>
|
|
<li class="mr-12">
|
|
<button>{{ $t("general.certificate", 2) }}</button>
|
|
</li>
|
|
</ul>
|
|
<div>
|
|
<ul class="bg-white px-8 py-2">
|
|
<li class="border-b border-grey-200 last:border-01 flex flex-row py-4">
|
|
<h2 class="text-bold w-1/2">Weiterempfehlung für Neukunden generieren</h2>
|
|
<div class="w-1/2">
|
|
<ItProgress
|
|
:status-count="fakeData.statusCount">
|
|
</ItProgress>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|