blah/Weblah
1
0
Fork 0
mirror of https://github.com/Blah-IM/Weblah.git synced 2025-07-06 22:15:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: create account ui

Browse source
This commit is contained in:
Shibo Lyu 2024-10-16 02:22:31 +08:00
parent e3e3481739
commit 2b47eeb146
14 changed files with 303 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/Button.svelte
View file

@ -20,7 +20,7 @@
{href}
class={tw(
'inline-flex cursor-default items-center justify-center rounded-md px-2 py-1 text-sf-secondary shadow-sm ring-1 ring-ss-secondary',
'transition-shadow duration-200 hover:ring-ss-primary active:shadow-inner',
'font-normal transition-shadow duration-200 hover:ring-ss-primary active:shadow-inner',
variant === 'primary' && [
'relative text-slate-50 ring-0 duration-200',
'before:absolute before:-inset-px before:rounded-[7px]',

4
src/lib/components/GroupedList.ts
View file

@ -1,4 +1,6 @@
import GroupedListItem from './GroupedList/GroupedListItem.svelte';
import GroupedListInputItem from './GroupedList/GroupedListInputItem.svelte';
import GroupedListSection from './GroupedList/GroupedListSection.svelte';
import GroupedListContainer from './GroupedList/GroupedListContainer.svelte';
export { GroupedListItem, GroupedListSection };
export { GroupedListItem, GroupedListInputItem, GroupedListSection, GroupedListContainer };

1
src/lib/components/GroupedList/GroupedListContainer.svelte Normal file
View file

@ -0,0 +1 @@
<div class="mx-auto max-w-3xl"><slot /></div>

5
src/lib/components/GroupedList/GroupedListInputItem.svelte Normal file
View file

@ -0,0 +1,5 @@
<label
class="flex gap-2 px-4 py-3 font-medium text-sf-primary [align-items:first_baseline] [&>input]:flex-1 [&>input]:bg-transparent [&>input]:text-end [&>input]:outline-none [&>input]:placeholder:opacity-50"
>
<slot />
</label>

2
src/lib/components/GroupedList/GroupedListItem.svelte
View file

@ -11,7 +11,7 @@
this={href ? 'a' : 'div'}
{href}
class={tw(
'flex items-center gap-2 px-4 py-3 font-medium text-sf-primary first:rounded-t-lg last:rounded-b-lg',
'flex cursor-default items-center gap-2 px-4 py-3 font-medium text-sf-primary first:rounded-t-lg last:rounded-b-lg',
selected && 'bg-accent-500 text-white shadow-inner dark:bg-accent-900 dark:text-sf-primary'
)}
>

8
src/lib/components/GroupedList/GroupedListSection.svelte
View file

@ -1,16 +1,16 @@
<section class="my-4 px-4">
<section class="my-6 cursor-default px-4">
{#if $$slots.header}
<h3 class="mb-1 truncate text-sm font-medium uppercase text-sf-secondary">
<h3 class="mb-1 truncate px-4 text-sm font-medium uppercase text-sf-tertiary">
<slot name="header" />
</h3>
{/if}
<div
class="divide-y-[0.5px] divide-ss-secondary rounded-lg border-[0.5px] border-ss-secondary bg-sb-primary shadow-sm"
class="divide-y-[0.5px] divide-ss-secondary overflow-hidden rounded-lg border-[0.5px] border-ss-secondary bg-sb-primary shadow-sm"
>
<slot />
</div>
{#if $$slots.footer}
<div class="mt-1 text-sm font-medium uppercase text-sf-secondary">
<div class="mt-1 px-4 text-sm text-sf-tertiary">
<slot name="footer" />
</div>
{/if}

95
src/lib/components/LoadingIndicator.svelte Normal file
View file

@ -0,0 +1,95 @@
<script lang="ts">
import { tw } from '$lib/tw';
let className = '';
export { className as class };
</script>
<div class={tw('loading-indicator relative inline-block size-5 [&>div]:bg-sf-tertiary', className)}>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
<style>
.loading-indicator > div {
width: 6%;
height: 16%;
position: absolute;
left: 49%;
top: 43%;
opacity: 0;
border-radius: 50px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
animation: fade 1s linear infinite;
}
@keyframes fade {
from {
opacity: 1;
}
to {
opacity: 0.25;
}
}
.bar1 {
transform: rotate(0deg) translate(0, -130%);
animation-delay: 0s;
}
.bar2 {
transform: rotate(30deg) translate(0, -130%);
animation-delay: -0.9167s;
}
.bar3 {
transform: rotate(60deg) translate(0, -130%);
animation-delay: -0.833s;
}
.bar4 {
transform: rotate(90deg) translate(0, -130%);
animation-delay: -0.7497s;
}
.bar5 {
transform: rotate(120deg) translate(0, -130%);
animation-delay: -0.667s;
}
.bar6 {
transform: rotate(150deg) translate(0, -130%);
animation-delay: -0.5837s;
}
.bar7 {
transform: rotate(180deg) translate(0, -130%);
animation-delay: -0.5s;
}
.bar8 {
transform: rotate(210deg) translate(0, -130%);
animation-delay: -0.4167s;
}
.bar9 {
transform: rotate(240deg) translate(0, -130%);
animation-delay: -0.333s;
}
.bar10 {
transform: rotate(270deg) translate(0, -130%);
animation-delay: -0.2497s;
}
.bar11 {
transform: rotate(300deg) translate(0, -130%);
animation-delay: -0.167s;
}
.bar12 {
transform: rotate(330deg) translate(0, -130%);
animation-delay: -0.0833s;
}
</style>

15
src/lib/components/PageHeader.svelte Normal file
View file

@ -0,0 +1,15 @@
<script lang="ts">
import { tw } from '$lib/tw';
let className = '';
export { className as class };
</script>
<header
class={tw(
'flex min-h-[calc(3rem+1px)] cursor-default items-center border-b border-ss-secondary bg-sb-primary p-2 text-center font-semibold text-sf-primary shadow-sm',
className
)}
>
<slot />
</header>