list and menú

src/pages/IndexPage.vue

@@ -1,8 +1,31 @@
 <template>
-  <div class="q-pa-md">
+  <div class="bg-blue-grey window-height window-width row justify-center items-center">
     <q-infinite-scroll @load="onLoad" :offset="250">
       <div v-for="(lista, index) in arraylistas" :key="index" class="caption">
-        {{ lista }}
+        <div class="q-pa-md row items-start q-gutter-md">
+          <q-card class="my-card text-white"
+            :class="store.user?.email === lista.email_owner ? 'bg-secondary' : 'bg-green-7'">
+            <q-card-section>
+              <div class="text-h5">{{ lista.nombre }}</div>
+              <div class="text-subtitle1">{{ lista.email_owner }}</div>
+            </q-card-section>
+
+            <q-card-section>
+              Compartido con:
+              <span v-if="lista.profiles.length === 0">Nadie</span>
+              <span v-for="(profile, index) in lista.profiles" :key="index">
+                {{ profile.email }}
+              </span>
+            </q-card-section>
+
+            <q-separator dark />
+
+            <q-card-actions>
+              <q-btn flat>Action 1</q-btn>
+              <q-btn flat>Action 2</q-btn>
+            </q-card-actions>
+          </q-card>
+        </div>
       </div>
       <template v-slot:loading>
         <div class="row justify-center q-my-md">
@@ -17,9 +40,11 @@
 import useSupabase from '../boot/supabase'
 import { useQuasar } from 'quasar'
 import { onMounted } from 'vue'
+import { supabaseStore } from '../stores/supabaseStore'
 
 const { supabase } = useSupabase()
 const $q = useQuasar()
+const store = supabaseStore()
 
 let arraylistas = []