First Commit Test
This commit is contained in:
195
pages/index.vue
Normal file
195
pages/index.vue
Normal file
@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="heading">
|
||||
<h1 class="heading__title">
|
||||
Welcome to your new <span class="gradient__text">sidebase</span> app!
|
||||
</h1>
|
||||
<p class="heading__credits">
|
||||
Read our documentation <a href="https://sidebase.io/sidebase/welcome" target="_blank">here</a>.
|
||||
Get started in no time with the following amazing modules:
|
||||
</p>
|
||||
</div>
|
||||
<div class="cards">
|
||||
<div class="card prisma__card">
|
||||
<div class="card__body">
|
||||
<h2 class="card__title">
|
||||
Prisma ORM
|
||||
</h2>
|
||||
<p>
|
||||
Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.
|
||||
</p>
|
||||
</div>
|
||||
<p class="card__action">
|
||||
<a class="card__link" href="https://sidebase.io/sidebase/components/prisma" target="_blank">
|
||||
TEST
|
||||
</a>
|
||||
<a class="card__link" href="/prisma" target="_blank">
|
||||
See example
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card trpc__card">
|
||||
<div class="card__body">
|
||||
<h2 class="card__title">
|
||||
tRPC
|
||||
</h2>
|
||||
<p>
|
||||
tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.
|
||||
</p>
|
||||
</div>
|
||||
<p class="card__action">
|
||||
<a class="card__link" href="https://sidebase.io/sidebase/components/trpc" target="_blank">
|
||||
Read documentation
|
||||
</a>
|
||||
<a class="card__link" href="/trpc" target="_blank">
|
||||
See example
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="card naiveui__card">
|
||||
<div class="card__body">
|
||||
<h2 class="card__title">
|
||||
NaiveUI
|
||||
</h2>
|
||||
<p>
|
||||
A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast.
|
||||
</p>
|
||||
</div>
|
||||
<p class="card__action">
|
||||
<a class="card__link" href="https://www.naiveui.com/en-US/os-theme" target="_blank">
|
||||
Read documentation
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
|
||||
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
background-color: #eefbfc;
|
||||
color: #484848;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
max-width: 45vw;
|
||||
margin: auto;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
/* HEADING */
|
||||
|
||||
.heading {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.heading__title {
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.gradient__text {
|
||||
background: linear-gradient(to right, #7bceb6 10%, #12a87b 40%, #0FCF97 60%, #7bceb6 90%);
|
||||
background-size: 200% auto;
|
||||
color: #000;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: shine 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
to {
|
||||
background-position: 200% center;
|
||||
}
|
||||
}
|
||||
|
||||
.heading__credits {
|
||||
color: #888888;
|
||||
font-size: 25px;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.heading__credits a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
min-height: 200px;
|
||||
display: grid;
|
||||
grid-template-rows: 20px 50px 1fr 50px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
|
||||
transition: all 0.2s;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.card__link {
|
||||
position: relative;
|
||||
text-decoration: underline;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.card__title {
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.card__body {
|
||||
grid-row: 2/4;
|
||||
}
|
||||
|
||||
.card__body p {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card__action {
|
||||
grid-row: 5/6;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
gap: 20px
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
.main-container {
|
||||
max-width: 100vw;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.cards {
|
||||
justify-content: center;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.prisma__card { background: radial-gradient(#3fbafe, #5A67D8FF); }
|
||||
.trpc__card { background: radial-gradient(#a07ccf, #926dc2); }
|
||||
.naiveui__card { background: radial-gradient(#ad6434, #995020); }
|
||||
</style>
|
||||
9
pages/prisma.vue
Normal file
9
pages/prisma.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
const { data: examples } = useFetch('/api/examples')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
Prisma ORM Data from the database, received {{ examples?.length || 0 }} records: <pre>{{ examples }}</pre>
|
||||
</div>
|
||||
</template>
|
||||
12
pages/trpc.vue
Normal file
12
pages/trpc.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
const { $client } = useNuxtApp()
|
||||
|
||||
const hello = await $client.hello.useQuery({ text: 'client' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- As `superjson` is already pre-configured, we can use `time` as a `Date` object without further deserialization 🎉 -->
|
||||
tRPC Data: "{{ hello.data.value?.greeting }}" send at "{{ hello.data.value?.time.toLocaleDateString('en-EN') }}".
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user