111 lines
2.0 KiB
Vue
111 lines
2.0 KiB
Vue
<template>
|
|
<div class="notification-card" :class="{ 'not-read': !read }">
|
|
<div class="notification-card__icon">
|
|
<Component :is="resolveComponent(`ui-icon-${icon}`)" />
|
|
</div>
|
|
|
|
<div class="notification-card__content">
|
|
<p class="notification-card__title">
|
|
{{ title }}
|
|
</p>
|
|
|
|
<div class="notification-card__subtitle-wrapper">
|
|
<span class="notification-card__subtitle">
|
|
{{ subtitle }}
|
|
</span>
|
|
|
|
<span class="notification-card__date">
|
|
Сегодня в 14:40
|
|
</span>
|
|
</div>
|
|
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { UiIcon } from '#build/types/ui/icons'
|
|
|
|
export interface Props {
|
|
icon: UiIcon
|
|
title: string
|
|
subtitle: string
|
|
read: boolean
|
|
}
|
|
|
|
defineProps<Props>()
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.notification-card {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 32px auto;
|
|
gap: 8px;
|
|
padding: 8px;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
outline: 1px solid transparent;
|
|
outline-offset: -1px;
|
|
transition: .2s ease-out;
|
|
transition-property: background-color, outline-color;
|
|
|
|
&:hover {
|
|
background-color: #F7F9FF;
|
|
}
|
|
|
|
&:active {
|
|
outline-color: $clr-cyan-300;
|
|
}
|
|
|
|
&.not-read {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 8px;
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: $clr-red-500;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
color: var(--notification-card-icon-color, $clr-grey-500);
|
|
background-color: var(--notification-card-icon-background, $clr-grey-200);
|
|
}
|
|
|
|
&__content {
|
|
}
|
|
|
|
&__title {
|
|
@include txt-r-sb;
|
|
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
&__subtitle-wrapper {
|
|
@include txt-t-m;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&__subtitle {
|
|
color: $clr-grey-600;
|
|
}
|
|
|
|
&__date {
|
|
color: $clr-grey-400;
|
|
}
|
|
}
|
|
</style>
|