79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import ItListRow from "@/components/ui/ItListRow.vue";
|
|
import * as log from "loglevel";
|
|
|
|
log.debug("ProfileView created");
|
|
|
|
const fakeData = {
|
|
notifications: [
|
|
{
|
|
id: 1,
|
|
source: {
|
|
name: "Daniel",
|
|
title: "EFZ Kaufmann/-frau",
|
|
course: "üK",
|
|
avatar: "https://picsum.photos/200",
|
|
},
|
|
ago: "Vor 1 Stunde",
|
|
title: "hat den Transferauftrag «Die Motorhaftpflicht» mit dir geteilt.",
|
|
unread: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
source: {
|
|
name: "Sofia",
|
|
title: "EFZ Kaufmann/-frau",
|
|
course: "üK",
|
|
avatar: "https://picsum.photos/200",
|
|
},
|
|
ago: "Vor 1 Tag",
|
|
title: "hat dir ein Feedback zum Kreis «Analyse» mit dir geteilt.",
|
|
unread: false,
|
|
},
|
|
],
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-gray-200">
|
|
<div class="container-large">
|
|
<header class="mt-12 mb-8">
|
|
<h1>{{ $t("general.notification", 2) }}</h1>
|
|
</header>
|
|
<main>
|
|
<div class="bg-white px-8 py-2">
|
|
<ItListRow
|
|
v-for="notification in fakeData.notifications"
|
|
:key="notification.id"
|
|
>
|
|
<template #left>
|
|
<img
|
|
class="mr-2 h-[45px] rounded-full"
|
|
:src="notification.source.avatar"
|
|
/>
|
|
<div class="ml-1">
|
|
<p class="leading-6">
|
|
{{ `${notification.source.name} ${notification.title}` }}
|
|
</p>
|
|
<p class="text-sm leading-6 text-gray-800">
|
|
{{ `${notification.source.title} ‐ ${notification.ago}` }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
<template #link>
|
|
<div
|
|
v-if="notification.unread"
|
|
class="flex h-[45px] flex-row items-center"
|
|
>
|
|
<div class="h-[10px] w-[10px] rounded-full bg-blue-500"></div>
|
|
</div>
|
|
</template>
|
|
</ItListRow>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|