CaZzzer/vpgen
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page improvements: link to create new client

Browse Source
This commit is contained in:
Yuri Tatishchev
2024-12-25 17:00:32 -08:00
parent 015bb7b05b
commit 423165e105
3 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/routes/+layout.svelte
View File

@@ -1,35 +1,39 @@
<script lang="ts">
import '../app.css';
import { page } from '$app/stores';
import { cn } from '$lib/utils';
import { page } from '$app/state';
const { data, children } = $props();
const { user } = data;
function getNavClass(path: RegExp) {
return cn('hover:text-foreground/80 transition-colors',
path.test($page.url.pathname) ? 'text-foreground' : 'text-foreground/60');
return cn(
'hover:text-foreground/80 transition-colors',
path.test(page.url.pathname) ? 'text-foreground' : 'text-foreground/60',
);
}
</script>
<header class="p-4 sm:flex">
<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
<nav class="flex items-center gap-6 text-sm">
<a href="/" class={getNavClass(/^\/$/)}>Home</a>
{#if user}
<a href="/user" class={getNavClass(/^\/user$/)}>Profile</a>
<a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a>
<a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a>
{/if}
<nav>
<ul class="flex items-center gap-6 text-sm">
<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
{#if user}
<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
<li><a href="/connections" class={getNavClass(/^\/connections$/)}>Connections</a></li>
<li><a href="/clients" class={getNavClass(/^\/clients(\/\d+)?$/)}>Clients</a></li>
{/if}
</ul>
</nav>
</header>
<main class="flex flex-col flex-grow p-4">
<main class="flex flex-grow flex-col p-4">
{@render children()}
</main>
<!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
<!--Some shenanings needed to be done to get the footer position to stick correctly,
didn't work with display: contents-->
<footer class="p-4 relative text-center inset-x-0 bottom-0">
<footer class="relative inset-x-0 bottom-0 p-4 text-center">
<p>&copy; 2024</p>
</footer>

24
src/routes/+page.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { AuthForm } from '$lib/components/app/auth-form';
import { Button } from '$lib/components/ui/button';
const { data } = $props();
const { user } = data;
@@ -9,10 +10,27 @@
<title>VPGen</title>
</svelte:head>
<h1>Welcome to VPGen</h1>
<h1 class="mb-2 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
Welcome to VPGen
</h1>
{#if user }
<p>Hi {user.name}</p>
{#if user}
<p>
Hi {user.name}!
</p>
<section id="get-started" class="border-l-2 pl-6">
<p>
To get started,
<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
</p>
</section>
{:else}
<AuthForm class="p-4" />
<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
{/if}
<style>
p {
@apply my-2;
}
</style>