90 lines
1.7 KiB
Vue
90 lines
1.7 KiB
Vue
<script setup>
|
|
const notifications = ref([
|
|
{
|
|
type: 'New for you',
|
|
email: true,
|
|
browser: false,
|
|
app: false,
|
|
},
|
|
{
|
|
type: 'Account activity',
|
|
email: false,
|
|
browser: true,
|
|
app: true,
|
|
},
|
|
{
|
|
type: 'A new browser used to sign in',
|
|
email: true,
|
|
browser: true,
|
|
app: true,
|
|
},
|
|
{
|
|
type: 'A new device is linked',
|
|
email: false,
|
|
browser: true,
|
|
app: false,
|
|
},
|
|
])
|
|
</script>
|
|
|
|
<template>
|
|
<VCard title="Notifications">
|
|
<VDivider />
|
|
<VCardText>
|
|
<h6 class="text-h6">
|
|
You will receive notification for the below selected items.
|
|
</h6>
|
|
</VCardText>
|
|
<VTable class="text-no-wrap rounded-0">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">
|
|
TYPE
|
|
</th>
|
|
<th scope="col">
|
|
EMAIL
|
|
</th>
|
|
<th scope="col">
|
|
BROWSER
|
|
</th>
|
|
<th scope="col">
|
|
APP
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr
|
|
v-for="notification in notifications"
|
|
:key="notification.type"
|
|
>
|
|
<td class="text-high-emphasis">
|
|
{{ notification.type }}
|
|
</td>
|
|
<td>
|
|
<VCheckbox v-model="notification.email" />
|
|
</td>
|
|
<td>
|
|
<VCheckbox v-model="notification.browser" />
|
|
</td>
|
|
<td>
|
|
<VCheckbox v-model="notification.app" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</VTable>
|
|
|
|
<VDivider />
|
|
|
|
<VCardText class="d-flex flex-wrap gap-4">
|
|
<VBtn>Save changes</VBtn>
|
|
<VBtn
|
|
color="secondary"
|
|
variant="outlined"
|
|
>
|
|
Discard
|
|
</VBtn>
|
|
</VCardText>
|
|
</VCard>
|
|
</template>
|