zias/serengo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use:components and remove storybook integration

Browse Source
This commit is contained in:
ッ
2025-09-28 15:44:02 +02:00
parent bc8a76b9f5
commit 62b2108434
44 changed files with 273 additions and 1019 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/routes/+page.svelte
View File

@@ -1,14 +1,31 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { Button, UserInfo } from '$lib';
import type { PageServerData } from './$types';
let { data }: { data: PageServerData } = $props();
</script>
<h1>Welcome to Serengo</h1>
<p>Hi, {data.user.username}!</p>
<p>Your user ID is {data.user.id}.</p>
<div class="home-container">
<h1>Welcome to Serengo</h1>
<UserInfo username={data.user.username} id={data.user.id} />
<form method="post" action="/logout" use:enhance>
<button>Sign out</button>
</form>
<form method="post" action="/logout" use:enhance>
<Button type="submit" variant="secondary">Sign out</Button>
</form>
</div>
<style>
.home-container {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.home-container h1 {
font-size: 2.5rem;
color: #333;
margin-bottom: 2rem;
}
</style>

85
src/routes/login/+page.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { enhance } from '$app/forms';
import { Input, Button, ErrorMessage } from '$lib';
import type { ActionData } from './$types';
import './login.css';
let { form }: { form: ActionData } = $props();
</script>
@@ -10,33 +10,68 @@
<h1 class="login-title">Serengo</h1>
<form class="login-form" method="post" action="?/login" use:enhance>
<div class="input-group">
<input
class="input-field"
name="username"
type="text"
placeholder="Username or Email"
required
/>
</div>
<Input name="username" type="text" placeholder="Username or Email" required />
<div class="input-group">
<input
class="input-field"
name="password"
type="password"
placeholder="Password"
required
/>
</div>
<Input name="password" type="password" placeholder="Password" required />
<div class="button-group">
<button class="login-button" type="submit">Login</button>
<button class="register-button" type="submit" formaction="?/register">Register</button>
<Button type="submit" variant="primary">Login</Button>
<Button type="submit" variant="primary" formaction="?/register">Register</Button>
</div>
</form>
{#if form?.message}
<p class="error-message">{form.message}</p>
{/if}
<ErrorMessage message={form?.message} />
</form>
</div>
<style>
.login-container {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 4rem 2rem;
background-color: #f8f8f8;
align-items: center;
justify-content: flex-start;
max-width: 400px;
margin: 0 auto;
}
.login-title {
font-family: 'Washington', serif;
font-size: 3.5rem;
color: #000000;
margin-bottom: 6rem;
text-align: center;
font-weight: normal;
letter-spacing: -0.02em;
}
.login-form {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.5rem;
}
.button-group {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
/* Mobile responsiveness */
@media (max-width: 480px) {
.login-container {
padding: 3rem 1.5rem;
}
.login-title {
font-size: 3rem;
margin-bottom: 4rem;
}
.button-group {
margin-top: 2rem;
}
}
</style>

115
src/routes/login/login.css
View File

@@ -1,115 +0,0 @@
.login-container {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 4rem 2rem;
background-color: #f8f8f8;
align-items: center;
justify-content: flex-start;
max-width: 400px;
margin: 0 auto;
}
.login-title {
font-family: 'Washington', serif;
font-size: 3.5rem;
color: #000000;
margin-bottom: 6rem;
text-align: center;
font-weight: normal;
letter-spacing: -0.02em;
}
.login-form {
display: flex;
flex-direction: column;
width: 100%;
gap: 1.5rem;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-field {
padding: 1.25rem 1.5rem;
border: none;
border-radius: 2rem;
background-color: #e0e0e0;
font-size: 1rem;
color: #333;
outline: none;
transition: background-color 0.2s ease;
height: 3.5rem;
}
.input-field:focus {
background-color: #d5d5d5;
}
.input-field::placeholder {
color: #888;
}
.button-group {
display: flex;
gap: 1rem;
}
.login-button,
.register-button {
flex: 1;
padding: 1.25rem 2rem;
border: none;
border-radius: 2rem;
font-size: 1rem;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
height: 3.5rem;
}
.login-button {
background-color: #3a4553;
color: white;
}
.login-button:hover {
background-color: #2d3441;
transform: translateY(-1px);
}
.register-button {
background-color: #3a4553;
color: white;
}
.register-button:hover {
background-color: #2d3441;
transform: translateY(-1px);
}
.error-message {
color: #e53e3e;
font-size: 0.875rem;
text-align: center;
margin-top: 1rem;
padding: 0.5rem;
}
/* Mobile responsiveness */
@media (max-width: 480px) {
.login-container {
padding: 3rem 1.5rem;
}
.login-title {
font-size: 3rem;
margin-bottom: 4rem;
}
.button-group {
margin-top: 3rem;
}
}