<template>
  <q-page class="row items-start justify-evenly">
    <SocketTest />
      <div class="col"></div>
      <div class="col">
      <div class="q-pa-md">
        <q-btn color="purple" @click="showNotif" label="Show Notification" />
      </div>
      </div>
      <div class="col" style="border: 5px pink dashed;" >
        <q-icon :name="darkStatus" size="100px" @click="toggleDarkLight" />
      </div>
  </q-page>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar'
import { computed } from 'vue'
import SocketTest from 'components/SocketTest.vue'
const $q = useQuasar()

const darkStatus = computed(() => $q.dark.isActive ? 'dark_mode' : 'light_mode')

function toggleDarkLight() {
  $q.dark.toggle()
}


function showNotif() {
  $q.notify({
    message: 'This is a notification',
    color: 'green',
    position: 'top-right',
    timeout: 3000,
    actions: [
      { label: 'Dismiss', color: 'white', handler: () => { /* Dismiss action */ } }
    ]
  })
}
</script>

