first commit

app/pages/settings/notifications.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+const state = reactive<{ [key: string]: boolean }>({
+  email: true,
+  desktop: false,
+  product_updates: true,
+  weekly_digest: false,
+  important_updates: true
+})
+
+const sections = [{
+  title: 'Notification channels',
+  description: 'Where can we notify you?',
+  fields: [{
+    name: 'email',
+    label: 'Email',
+    description: 'Receive a daily email digest.'
+  }, {
+    name: 'desktop',
+    label: 'Desktop',
+    description: 'Receive desktop notifications.'
+  }]
+}, {
+  title: 'Account updates',
+  description: 'Receive updates about Nuxt UI.',
+  fields: [{
+    name: 'weekly_digest',
+    label: 'Weekly digest',
+    description: 'Receive a weekly digest of news.'
+  }, {
+    name: 'product_updates',
+    label: 'Product updates',
+    description: 'Receive a monthly email with all new features and updates.'
+  }, {
+    name: 'important_updates',
+    label: 'Important updates',
+    description: 'Receive emails about important updates like security fixes, maintenance, etc.'
+  }]
+}]
+
+async function onChange() {
+  // Do something with data
+  console.log(state)
+}
+</script>
+
+<template>
+  <div v-for="(section, index) in sections" :key="index">
+    <UPageCard
+      :title="section.title"
+      :description="section.description"
+      variant="naked"
+      class="mb-4"
+    />
+
+    <UPageCard variant="subtle" :ui="{ container: 'divide-y divide-default' }">
+      <UFormField
+        v-for="field in section.fields"
+        :key="field.name"
+        :name="field.name"
+        :label="field.label"
+        :description="field.description"
+        class="flex items-center justify-between not-last:pb-4 gap-2"
+      >
+        <USwitch
+          v-model="state[field.name]"
+          @update:model-value="onChange"
+        />
+      </UFormField>
+    </UPageCard>
+  </div>
+</template>