Skip to content

Commit abe38ad

Browse files
BrunoGGMBrunoGGM
committed
Agrega icono Notion
1 parent 8314827 commit abe38ad

File tree

1 file changed

+104
-95
lines changed

1 file changed

+104
-95
lines changed

‎pages/index.vue

Lines changed: 104 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,114 @@
11
<template>
2-
<div class="grid grid-cols-12 gap-4 p-6">
3-
<div
4-
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
5-
>
6-
<div class="card-body p-0">
7-
<span class="text-2xl font-bold">Destinos</span>
8-
<input
9-
type="text"
10-
placeholder="Buscar destino"
11-
v-model="search"
12-
class="input input-bordered w-full w-full"
13-
/>
2+
<div>
3+
<div class="px-6">
4+
<img
5+
class="w-16 h-16 mt-4"
6+
src="https://upload.wikimedia.org/wikipedia/commons/4/45/Notion_app_logo.png"
7+
alt=""
8+
/>
9+
</div>
10+
<div class="grid grid-cols-12 gap-4 p-6">
11+
<div
12+
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
13+
>
14+
<div class="card-body p-0">
15+
<span class="text-2xl font-bold">Destinos</span>
16+
<input
17+
type="text"
18+
placeholder="Buscar destino"
19+
v-model="search"
20+
class="input input-bordered w-full w-full"
21+
/>
1422

15-
<draggable
16-
class="list-group"
17-
:list="filteredPlaces"
18-
group="places"
19-
@change="log"
20-
itemKey="id"
21-
>
22-
<template #item="{ element, index }">
23-
<div class="list-group-item">
24-
{{ element.properties.Place.title[0].text.content }}
25-
</div>
26-
</template>
27-
</draggable>
23+
<draggable
24+
class="list-group"
25+
:list="filteredPlaces"
26+
group="places"
27+
@change="log"
28+
itemKey="id"
29+
>
30+
<template #item="{ element, index }">
31+
<div class="list-group-item">
32+
{{ element.properties.Place.title[0].text.content }}
33+
</div>
34+
</template>
35+
</draggable>
36+
</div>
2837
</div>
29-
</div>
30-
<div
31-
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
32-
>
33-
<div class="card-body p-0">
34-
<span class="text-2xl font-bold"> Itinerario </span>
35-
<draggable
36-
class="list-group"
37-
:list="selectedPlaces"
38-
group="places"
39-
@change="log"
40-
itemKey="id"
41-
@add="addPlace"
42-
>
43-
<template #item="{ element, index }">
44-
<div class="list-group-item">
45-
{{ index + 1 }} -
46-
{{ element.properties.Place.title[0].text.content }}
47-
</div>
48-
</template>
49-
</draggable>
50-
<button
51-
v-if="selectedPlaces.length > 0"
52-
class="btn btn-secondary"
53-
@click="viewRoute = true"
54-
>
55-
Calcular Costo
56-
</button>
38+
<div
39+
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
40+
>
41+
<div class="card-body p-0">
42+
<span class="text-2xl font-bold"> Itinerario </span>
43+
<draggable
44+
class="list-group"
45+
:list="selectedPlaces"
46+
group="places"
47+
@change="log"
48+
itemKey="id"
49+
@add="addPlace"
50+
>
51+
<template #item="{ element, index }">
52+
<div class="list-group-item">
53+
{{ index + 1 }} -
54+
{{ element.properties.Place.title[0].text.content }}
55+
</div>
56+
</template>
57+
</draggable>
58+
<button
59+
v-if="selectedPlaces.length > 0"
60+
class="btn btn-secondary"
61+
@click="viewRoute = true"
62+
>
63+
Calcular Costo
64+
</button>
65+
</div>
5766
</div>
58-
</div>
59-
<div
60-
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
61-
>
62-
<div class="card-body py-2">
63-
<span class="text-2xl font-bold">Ruta</span>
64-
<div v-if="viewRoute">
65-
<ul class="steps steps-vertical">
66-
<li class="step step-accent">Inicio: Hotel</li>
67-
<li
68-
class="step step-accent"
69-
v-for="(place, index) in selectedPlaces"
70-
:key="index"
71-
>
72-
<div
73-
class="flex flex-col items-start justify-between w-full p-2 bg-base-200 rounded-lg"
67+
<div
68+
class="card bg-base-100 col-span-12 md:col-span-4 shadow-xl min-h-screen"
69+
>
70+
<div class="card-body py-2">
71+
<span class="text-2xl font-bold">Ruta</span>
72+
<div v-if="viewRoute">
73+
<ul class="steps steps-vertical">
74+
<li class="step step-accent">Inicio: Hotel</li>
75+
<li
76+
class="step step-accent"
77+
v-for="(place, index) in selectedPlaces"
78+
:key="index"
7479
>
75-
<div>{{ place.properties.Place.title[0].text.content }}</div>
76-
<div class="text-xs">
77-
Costo aproximado: ${{ Math.floor(Math.random() * 100) }}
80+
<div
81+
class="flex flex-col items-start justify-between w-full p-2 bg-base-200 rounded-lg"
82+
>
83+
<div>{{ place.properties.Place.title[0].text.content }}</div>
84+
<div class="text-xs">
85+
Costo aproximado: ${{ Math.floor(Math.random() * 100) }}
86+
</div>
87+
<div class="text-xs">
88+
Duración: {{ Math.floor(Math.random() * 10) }} minutos
89+
</div>
7890
</div>
79-
<div class="text-xs">
80-
Duración: {{ Math.floor(Math.random() * 10) }} minutos
81-
</div>
82-
</div>
83-
</li>
84-
<li class="step step-accent">Fin: Hotel</li>
85-
</ul>
86-
<div class="text-2xl font-bold text-center mt-4 rounded-lg p-2">
87-
Costo total: ${{ Math.floor(Math.random() * 100) }}
88-
</div>
89-
<div class="flex flex-col items-center justify-center w-full">
90-
<button class="btn btn-primary mt-4 w-full">
91-
Guardar ruta en Notion
92-
</button>
91+
</li>
92+
<li class="step step-accent">Fin: Hotel</li>
93+
</ul>
94+
<div class="text-2xl font-bold text-center mt-4 rounded-lg p-2">
95+
Costo total: ${{ Math.floor(Math.random() * 100) }}
96+
</div>
97+
<div class="flex flex-col items-center justify-center w-full">
98+
<button class="btn btn-primary mt-4 w-full">
99+
Guardar ruta en Notion
100+
</button>
101+
</div>
102+
<iframe
103+
class="w-full mt-4 rounded-lg"
104+
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d25924.28262226077!2d139.74466958843215!3d35.68844201873905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2smx!4v1720307891810!5m2!1sen!2smx"
105+
height="450"
106+
style="border: 0"
107+
allowfullscreen=""
108+
loading="lazy"
109+
referrerpolicy="no-referrer-when-downgrade"
110+
></iframe>
93111
</div>
94-
<iframe
95-
class="w-full mt-4 rounded-lg"
96-
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d25924.28262226077!2d139.74466958843215!3d35.68844201873905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2smx!4v1720307891810!5m2!1sen!2smx"
97-
height="450"
98-
style="border: 0"
99-
allowfullscreen=""
100-
loading="lazy"
101-
referrerpolicy="no-referrer-when-downgrade"
102-
></iframe>
103112
</div>
104113
</div>
105114
</div>

0 commit comments

Comments
 (0)