This repository has been archived by the owner on Feb 22, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.vue
98 lines (96 loc) · 3.29 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<script setup>
const title = "Welcome to the Nuxt 3 + Tigris Minimal Starter";
useHead({
title,
meta: [{ name: "description", content: title }],
});
const { data } = await useFetch("/api/prizes");
</script>
<template>
<div id="top" class="relative -top-10"></div>
<header
class="w-full pt-10 m-auto mb-10 flex flex-row align-top items-start justify-center gap-5 bg-gradient-to-b from-blue-200 dark:from-blue-950 to-transparent"
>
<a
href="https://www.tigrisdata.com/docs/concepts/database/?utm_source=nuxt-3-template&utm_medium=code&utm_campaign=nuxt-3-template"
target="_blank"
><img
class="w-[150px] invert dark:invert-0"
alt="Tigris logo"
src="~/public/tigris.svg"
/></a>
<div class="text-4xl">+</div>
<a href="https://nuxt.com/" target="_blank"
><img
class="w-[150px] invert dark:invert-0"
alt="Nuxt logo"
src="~/public/nuxt.svg"
/></a>
</header>
<div class="w-10/12 lg:w-8/12 my-10 m-auto">
<section class="mb-20">
<p class="text-center text-xl font-extrabold">{{ title }}</p>
<p class="text-lg">
This minimal
<a href="https://nuxt.com/" target="_blank">Nuxt 3</a> application loads
data from a
<a
href="https://www.tigrisdata.com/docs/concepts/database/?utm_source=nuxt-3-template&utm_medium=code&utm_campaign=nuxt-3-template"
target="_blank"
>Tigris Database</a
>, which has been seeded with a
<a href="https://api.nobelprize.org/v1/prize.json" target="_blank"
>Nobel prize JSON payload</a
>. Basic styling is applied using
<a href="https://tailwindcss.com/" target="_blank">Tailwind CSS</a>.
</p>
<p>
<a
class="flex justify-center flex-row items-center"
href="https://github.com/tigrisdata-community/tigris-nuxt-3"
target="_blank"
><img
src="~/public/github.svg"
class="h-6 w-6 mr-2 dark:invert"
/><span>Grab the Nuxt 3 + Tigris Minimal Starter on GitHub</span></a
>
</p>
</section>
<section>
<h1>Prizes</h1>
<nav
class="flex flex-wrap mb-10"
style="display: flex; flex-wrap: wrap; flex-direction: row"
>
<a class="mr-2" v-for="(prize, year) in data" :href="`#${year}`">{{
year
}}</a>
</nav>
<div class="mb-10" v-for="(prize, year) in data">
<h2 :id="year">{{ year }}</h2>
<nav class="flex flex-wrap mb-5">
<a
v-for="category in prize"
:href="`#${year}-${category.category}`"
>{{ category.category }}</a
>
</nav>
<div v-for="category in prize">
<h3 :id="`${year}-${category.category}`">{{ category.category }}</h3>
<div class="grid lg:grid-cols-2 gap-6">
<div
class="rounded-lg bg-zinc-900 text-zinc-200 p-5 mb-5"
v-for="(laureate, key, index) in category.laureates"
>
<h4>{{ laureate.firstname }} {{ laureate.surname }}</h4>
<p>{{ laureate.motivation }}</p>
</div>
</div>
</div>
</div>
</section>
<div>
<a href="#top" class="fixed bottom-5 right-5">Back to top</a>
</div>
</div>
</template>