initial

apps/client/components/notifications-dropdown.vue

@@ -0,0 +1,107 @@
+<template>
+  <UiDropdown
+    class="notifications-dropdown"
+    dropdown-class="notifications-dropdown__content"
+    placement="bottom-end"
+    trigger="hover"
+    :offset="12"
+    teleport
+  >
+    <template #default="{ isActive }">
+      <NotifyButton
+        icon="bell"
+        :count="0"
+        class="notifications-dropdown__trigger"
+        :state="isActive ? 'hover' : undefined"
+      />
+    </template>
+
+    <template #dropdown>
+      <div class="notifications-dropdown__header">
+        <h3>Notifications</h3>
+
+        <UiButton class="ml-a" size="small" icon="s-check-seen" type="ghost">
+          Mark all as read
+        </UiButton>
+
+        <UiButton class="ml-4" icon="s-kebab-android" type="link" size="small" color="secondary" />
+      </div>
+
+      <form class="notifications-dropdown__filter">
+        <UiSwitcher
+          id="notification_type"
+          :options="[
+            { label: 'All', value: 'all' },
+            { label: 'Поступления', value: 'p' },
+            { label: 'Списания', value: 's' },
+          ]"
+          size="small"
+        />
+      </form>
+
+      <div class="notifications-dropdown__list">
+        <NotificationCardWithdrawCreated title="Новый вывод средств создан" subtitle="Адрес: 7u5RQ9g....bkNfG" />
+        <NotificationCardDeposit title="На ваш кошелек поступил новый платеж" subtitle="Адрес: 7u5RQ9g....bkNfG" />
+        <NotificationCardCompletedWithdraw title="Вывод средств был проведен успешно" subtitle="Адрес: 7u5RQ9g....bkNfG" />
+        <NotificationCardSignIn title="Вход в учетную запись" subtitle="IP: 185.218.108.156" read />
+      </div>
+    </template>
+  </UiDropdown>
+</template>
+
+<script setup>
+import { useForm } from 'vee-validate'
+
+useForm({
+  keepValuesOnUnmount: true,
+  initialValues: {
+    notification_type: 'all',
+  },
+})
+</script>
+
+<style lang="scss">
+.notifications-dropdown {
+  cursor: pointer;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  &__filter {
+    margin-bottom: 8px;
+  }
+
+  &__list {
+    //margin-inline: -16px;
+    //padding-inline: 16px;
+    //max-height: 150px;
+    //overflow: auto;
+
+    > *:not(:last-child) {
+      margin-bottom: 8px;
+    }
+  }
+
+  &__content {
+    position: relative;
+    width: 406px;
+    padding: 16px !important;
+    box-shadow: 0px 4px 4px 0px #6C86AD40;
+
+    &::before {
+      content: '';
+      width: 16px;
+      height: 16px;
+      position: absolute;
+      top: -8px;
+      right: 12px;
+      background-color: $clr-white;
+      border-radius: 2px;
+      transform: rotateZ(45deg);
+    }
+  }
+}
+</style>