initial

apps/client/components/notification-card/base.vue

@@ -0,0 +1,110 @@
+<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>