Twyco
d18fffe665
CI/CD / preconditions (pull_request) Successful in 1s
Native JavaScript checks / Native launcher and release tests (pull_request) Successful in 1m3s
macOS checks / Native Rust tests and unsigned build (pull_request) Successful in 1m41s
CI/CD / test_and_check_app (pull_request) Successful in 6m53s
CI/CD / Publish immutable image (pull_request) Skipped
92 lines
3.5 KiB
Vue
92 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { Download, ShieldCheck } from 'lucide-vue-next';
|
|
import type { Component } from 'vue';
|
|
import AppLogo from '@/components/AppLogo.vue';
|
|
import AppearanceTabs from '@/components/AppearanceTabs.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useLocalization } from '@/composables/useLocalization';
|
|
import { useMacDownload } from '@/composables/useMacDownload';
|
|
import { home } from '@/routes/index';
|
|
|
|
defineProps<{ title: string; description: string; icon?: Component }>();
|
|
const { t } = useLocalization();
|
|
const { macDownloadUrl, showMacDownload } = useMacDownload();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-background text-foreground flex min-h-dvh flex-col">
|
|
<header
|
|
class="bg-card px-page flex items-center justify-between gap-3 border-b py-4"
|
|
>
|
|
<Link
|
|
:href="home()"
|
|
:aria-label="t('auth.home')"
|
|
class="focus-visible:ring-ring/35 rounded-md outline-none focus-visible:ring-2"
|
|
><AppLogo
|
|
/></Link>
|
|
<Button
|
|
v-if="showMacDownload"
|
|
as-child
|
|
variant="outline"
|
|
size="sm"
|
|
:aria-label="t('navigation.downloadAppAppleSilicon')"
|
|
:title="t('navigation.downloadAppAppleSilicon')"
|
|
>
|
|
<a :href="macDownloadUrl"
|
|
><Download aria-hidden="true" /><span
|
|
class="hidden sm:inline"
|
|
>{{ t('navigation.downloadApp') }}</span
|
|
></a
|
|
>
|
|
</Button>
|
|
</header>
|
|
<main
|
|
class="gap-column sm:px-page mx-auto flex w-full max-w-md flex-1 flex-col justify-center px-4 py-8 sm:py-12"
|
|
>
|
|
<section
|
|
aria-labelledby="auth-title"
|
|
class="bg-card p-page text-card-foreground shadow-xs grid gap-6 rounded-md border"
|
|
>
|
|
<div class="gap-column grid">
|
|
<span
|
|
class="bg-primary/10 text-primary flex size-11 items-center justify-center rounded-md"
|
|
>
|
|
<component
|
|
:is="icon ?? ShieldCheck"
|
|
class="size-5"
|
|
aria-hidden="true"
|
|
/>
|
|
</span>
|
|
<div class="gap-stack grid">
|
|
<p
|
|
class="text-label text-muted-foreground uppercase tracking-wide"
|
|
>
|
|
{{ t('auth.accountAccess') }}
|
|
</p>
|
|
<h1
|
|
id="auth-title"
|
|
class="text-headline-mobile sm:text-headline"
|
|
>
|
|
{{ title }}
|
|
</h1>
|
|
<p class="text-body text-muted-foreground">
|
|
{{ description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<slot />
|
|
</section>
|
|
<div
|
|
v-if="$slots.footer"
|
|
class="px-card text-body text-muted-foreground text-center"
|
|
>
|
|
<slot name="footer" />
|
|
</div>
|
|
</main>
|
|
<footer class="pb-page flex justify-center px-4">
|
|
<AppearanceTabs />
|
|
</footer>
|
|
</div>
|
|
</template>
|