elk/components/help/HelpPreview.vue

80 lines
2.2 KiB
Vue
Raw Normal View History

2022-11-24 05:38:14 +03:00
<script setup lang="ts">
interface Team {
github: string
display: string
twitter: string
mastodon: string
}
2022-11-27 06:13:39 +03:00
const emit = defineEmits<{
(event: 'close'): void
}>()
2022-11-24 05:38:14 +03:00
const teams: Team[] = [
{
github: 'antfu',
display: 'Anthony Fu',
twitter: 'antfu7',
mastodon: 'antfu@mas.to',
},
{
github: 'patak-dev',
display: 'Patak',
twitter: 'patak_dev',
2022-12-07 01:54:28 +03:00
mastodon: 'patak@webtoo.ls',
2022-11-24 05:38:14 +03:00
},
{
github: 'danielroe',
display: 'Daniel Roe',
twitter: 'danielcroe',
2022-12-07 01:54:28 +03:00
mastodon: 'daniel@roe.dev',
2022-11-24 05:38:14 +03:00
},
{
github: 'sxzz',
display: 'sxzz',
2022-12-07 02:15:38 +03:00
twitter: 'sanxiaozhizi',
2022-11-24 05:38:14 +03:00
mastodon: 'sxzz@mas.to',
},
].sort(() => Math.random() - 0.5)
</script>
<template>
<div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
2022-12-02 10:27:44 +03:00
<button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
2022-12-19 23:31:12 +03:00
<div i-ri:close-line />
2022-11-27 06:13:39 +03:00
</button>
<img src="/logo.svg" w-20 h-20 height="80" width="80" mxa alt="logo">
2022-11-24 05:38:14 +03:00
<h1 mxa text-4xl mb4>
{{ $t('help.title') }}
2022-11-24 05:38:14 +03:00
</h1>
<p>
{{ $t('help.desc_para1') }}
2022-11-24 05:38:14 +03:00
</p>
<p>
<b text-primary>{{ $t('help.desc_highlight') }}</b>
{{ $t('help.desc_para2') }}
2022-11-24 05:38:14 +03:00
</p>
2022-12-20 13:58:50 +03:00
<p>
Before that, if you'd like to help with testing, giving feedback, or contributing, <a font-bold text-primary href="/m.webtoo.ls/@elk" target="_blank">
reach out to us on Mastodon
</a> and get involved.
</p>
{{ $t('help.desc_para3') }}
<p flex="~ gap-2 wrap" mxa>
2022-11-24 05:38:14 +03:00
<template v-for="team of teams" :key="team.github">
2022-12-20 00:30:27 +03:00
<a :href="`https://github.com/sponsors/${team.github}`" target="_blank" rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
2022-12-07 02:07:31 +03:00
<img :src="`https://res.cloudinary.com/dchoja2nb/image/twitter_name/h_120,w_120/f_auto/${team.twitter}.jpg`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
2022-11-24 05:38:14 +03:00
</a>
</template>
</p>
2022-12-20 13:58:50 +03:00
<p italic flex justify-center w-full>
<span text-xl font-script>The Elk Team</span>
2022-11-24 05:38:14 +03:00
</p>
2022-11-27 06:13:39 +03:00
2022-12-20 00:30:27 +03:00
<button btn-solid mxa tabindex="2" @click="emit('close')">
2022-11-29 10:18:28 +03:00
{{ $t('action.enter_app') }}
2022-11-27 06:13:39 +03:00
</button>
2022-11-24 05:38:14 +03:00
</div>
</template>