initial

apps/client/components/settings/service-notification-table.vue

@@ -0,0 +1,59 @@
+<template>
+  <SettingsRawTable :columns="columns" :data="data">
+    <template #cell(service_notifications)="{ row }">
+      <div class="d-flex align-items-center text-clr-grey-600">
+        <Component :is="resolveComponent(`ui-icon-${row.original.icon}`)" />
+        <h4 class="ml-10">
+          {{ row.original.service_notifications }}
+        </h4>
+      </div>
+    </template>
+
+    <template #cell(telegram)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="telegram" />
+      </div>
+    </template>
+
+    <template #cell(mail)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="mail" :model-value="true" />
+      </div>
+    </template>
+
+    <template #cell(push)="{ row }">
+      <div class="d-flex justify-content-center">
+        <UiCheckbox id="push" :model-value="true" />
+      </div>
+    </template>
+  </SettingsRawTable>
+</template>
+
+<script setup>
+import { createColumnHelper } from '@tanstack/vue-table'
+
+const columnHelper = createColumnHelper()
+
+const columns = [
+  columnHelper.display({
+    id: 'service_notifications',
+    header: 'Service Notifications',
+  }),
+  columnHelper.display({
+    id: 'telegram',
+    header: 'Telegram',
+  }),
+  columnHelper.display({
+    id: 'mail',
+    header: 'Mail',
+  }),
+  columnHelper.display({
+    id: 'push',
+    header: 'Push',
+  }),
+]
+
+const data = [
+  { service_notifications: 'Вход в аккаунт', icon: 'signin' },
+]
+</script>