init
This commit is contained in:
commit
d761a10bf7
102 changed files with 4761 additions and 0 deletions
15
lib/components/dashboard/editor/Handle.svelte
Normal file
15
lib/components/dashboard/editor/Handle.svelte
Normal file
|
@ -0,0 +1,15 @@
|
|||
<script lang="ts">
|
||||
import HandleDot from './HandleDot.svelte';
|
||||
|
||||
export let pad: boolean = false;
|
||||
</script>
|
||||
|
||||
<div class="handle flex gap-1 items-center cursor-grab z-[1]" class:p-6={pad}>
|
||||
{#each Array(2) as _}
|
||||
<div class="flex flex-col gap-1">
|
||||
{#each Array(3) as _}
|
||||
<HandleDot />
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
1
lib/components/dashboard/editor/HandleDot.svelte
Normal file
1
lib/components/dashboard/editor/HandleDot.svelte
Normal file
|
@ -0,0 +1 @@
|
|||
<div class="bg-text-secondary w-1 h-1 rounded-full" />
|
3
lib/components/dashboard/editor/List.svelte
Normal file
3
lib/components/dashboard/editor/List.svelte
Normal file
|
@ -0,0 +1,3 @@
|
|||
<div class="flex flex-col gap-2">
|
||||
<slot />
|
||||
</div>
|
7
lib/components/dashboard/editor/ListElement.svelte
Normal file
7
lib/components/dashboard/editor/ListElement.svelte
Normal file
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
export let id: string | number | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<div class="list-element h-11 rounded-xl bg-field" data-id={id}>
|
||||
<slot />
|
||||
</div>
|
26
lib/components/dashboard/editor/Toggle.svelte
Normal file
26
lib/components/dashboard/editor/Toggle.svelte
Normal file
|
@ -0,0 +1,26 @@
|
|||
<script lang="ts">
|
||||
import Toggle from '../elements/Toggle.svelte';
|
||||
|
||||
const id = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString();
|
||||
export let title: string | undefined = undefined;
|
||||
export let subtitle: string | undefined = undefined;
|
||||
export let name: string | undefined = undefined;
|
||||
export let checked: boolean = false;
|
||||
</script>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex justify-between">
|
||||
{#if title}
|
||||
<p class="text-text-header font-semibold text-2xl leading-[.8] whitespace-nowrap">
|
||||
{title}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{#if subtitle}
|
||||
<p class="text-text-primary">{subtitle}</p>
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
<Toggle {id} {name} {checked} />
|
||||
</div>
|
|
@ -0,0 +1,32 @@
|
|||
<script lang="ts">
|
||||
import { clamp } from '$lib/utils';
|
||||
import Spinner from '../elements/Spinner.svelte';
|
||||
|
||||
export let fetchingPreview: boolean | undefined = undefined;
|
||||
export let scaleFactor: number = 1.0;
|
||||
</script>
|
||||
|
||||
<div class="relative h-80 overflow-hidden -mt-4 -mx-4 p-4 border-b border-widget-stroke">
|
||||
<div
|
||||
class="relative widget-preview-container h-72 select-none flex justify-center items-center transition-opacity opacity-100"
|
||||
class:opacity-60={fetchingPreview}>
|
||||
<div
|
||||
class="relative widget flex justify-center items-center pointer-events-none"
|
||||
style="--scale: {clamp(scaleFactor, 0, 1) ?? 1.0}">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 left-0 bottom-0 right-0 flex justify-center items-center pointer-events-none transition-opacity opacity-0"
|
||||
class:opacity-100={fetchingPreview}>
|
||||
<div class="relative w-12 h-12 flex justify-center items-center bg-black/40 rounded-lg">
|
||||
<Spinner />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
.widget {
|
||||
transform: scale(var(--scale, 1));
|
||||
}
|
||||
</style>
|
8
lib/components/dashboard/editor/types/DiscordUser.svelte
Normal file
8
lib/components/dashboard/editor/types/DiscordUser.svelte
Normal file
|
@ -0,0 +1,8 @@
|
|||
<script lang="ts">
|
||||
import Button from '$lib/components/dashboard/elements/Button.svelte';
|
||||
import { faDiscord } from '@fortawesome/free-brands-svg-icons';
|
||||
</script>
|
||||
|
||||
<Button icon={faDiscord}>Link Discord</Button>
|
||||
|
||||
<Button style="red">Remove</Button>
|
27
lib/components/dashboard/editor/types/ExternalSite.svelte
Normal file
27
lib/components/dashboard/editor/types/ExternalSite.svelte
Normal file
|
@ -0,0 +1,27 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetExternalSite;
|
||||
$: widgetData = type[Widget.EXTERNAL_SITE].data as WidgetExternalSite;
|
||||
</script>
|
||||
|
||||
<InputGroup title="Title" style="title">
|
||||
<TextInput
|
||||
name="title"
|
||||
placeholder={widgetData.title}
|
||||
value={data.title}
|
||||
minlength={editorConstraints.externalSite.title.min}
|
||||
maxlength={editorConstraints.externalSite.title.max} />
|
||||
</InputGroup>
|
||||
|
||||
<InputGroup title="URL" style="title">
|
||||
<TextInput
|
||||
name="url"
|
||||
placeholder={widgetData.url}
|
||||
value={data.url}
|
||||
minlength={editorConstraints.externalSite.url.min}
|
||||
maxlength={editorConstraints.externalSite.url.max} />
|
||||
</InputGroup>
|
18
lib/components/dashboard/editor/types/InstagramPost.svelte
Normal file
18
lib/components/dashboard/editor/types/InstagramPost.svelte
Normal file
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetInstagramPost;
|
||||
$: widgetData = type[Widget.INSTAGRAM_POST].data as WidgetInstagramPost;
|
||||
</script>
|
||||
|
||||
<InputGroup title="URL" style="title">
|
||||
<TextInput
|
||||
name="url"
|
||||
placeholder={widgetData.url}
|
||||
value={data.url}
|
||||
minlength={editorConstraints.instagramPost.url.min}
|
||||
maxlength={editorConstraints.instagramPost.url.max} />
|
||||
</InputGroup>
|
19
lib/components/dashboard/editor/types/Markdown.svelte
Normal file
19
lib/components/dashboard/editor/types/Markdown.svelte
Normal file
|
@ -0,0 +1,19 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import MultilineTextInput from '$lib/components/dashboard/elements/MultilineTextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetMarkdown;
|
||||
$: widgetData = type[Widget.MARKDOWN].data as WidgetMarkdown;
|
||||
</script>
|
||||
|
||||
<InputGroup title="Markdown Text" style="title">
|
||||
<MultilineTextInput
|
||||
name="content"
|
||||
rows={8}
|
||||
value={data.content}
|
||||
placeholder={widgetData.content}
|
||||
minlength={editorConstraints.markdown.content.min}
|
||||
maxlength={editorConstraints.markdown.content.max} />
|
||||
</InputGroup>
|
18
lib/components/dashboard/editor/types/PinterestPin.svelte
Normal file
18
lib/components/dashboard/editor/types/PinterestPin.svelte
Normal file
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetPinterestPin;
|
||||
$: widgetData = type[Widget.PINTEREST_PIN].data as WidgetPinterestPin;
|
||||
</script>
|
||||
|
||||
<InputGroup title="URL" style="title">
|
||||
<TextInput
|
||||
name="url"
|
||||
placeholder={widgetData.url}
|
||||
value={data.url}
|
||||
minlength={editorConstraints.pinterestPin.url.min}
|
||||
maxlength={editorConstraints.pinterestPin.url.max} />
|
||||
</InputGroup>
|
18
lib/components/dashboard/editor/types/SoundCloudTrack.svelte
Normal file
18
lib/components/dashboard/editor/types/SoundCloudTrack.svelte
Normal file
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetSoundCloudTrack;
|
||||
$: widgetData = type[Widget.SOUNDCLOUD_TRACK].data as WidgetSoundCloudTrack;
|
||||
</script>
|
||||
|
||||
<InputGroup title="URL" style="title">
|
||||
<TextInput
|
||||
name="url"
|
||||
placeholder={widgetData.url}
|
||||
value={data.url}
|
||||
minlength={editorConstraints.soundCloudTrack.url.min}
|
||||
maxlength={editorConstraints.soundCloudTrack.url.max} />
|
||||
</InputGroup>
|
|
@ -0,0 +1,3 @@
|
|||
<script lang="ts">
|
||||
export let data: WidgetSpotifyNowPlaying;
|
||||
</script>
|
18
lib/components/dashboard/editor/types/Title.svelte
Normal file
18
lib/components/dashboard/editor/types/Title.svelte
Normal file
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetTitle;
|
||||
$: widgetData = type[Widget.TITLE].data as WidgetTitle;
|
||||
</script>
|
||||
|
||||
<InputGroup title="Title" style="title">
|
||||
<TextInput
|
||||
name="content"
|
||||
value={data.content}
|
||||
placeholder={widgetData.content}
|
||||
minlength={editorConstraints.markdown.content.min}
|
||||
maxlength={editorConstraints.markdown.content.max} />
|
||||
</InputGroup>
|
18
lib/components/dashboard/editor/types/TwitchLive.svelte
Normal file
18
lib/components/dashboard/editor/types/TwitchLive.svelte
Normal file
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetTwitchLive;
|
||||
$: widgetData = type[Widget.TWITCH_LIVE].data as WidgetTwitchLive;
|
||||
</script>
|
||||
|
||||
<InputGroup title="URL" style="title">
|
||||
<TextInput
|
||||
name="url"
|
||||
placeholder={widgetData.url}
|
||||
value={data.url}
|
||||
minlength={editorConstraints.twitchLive.url.min}
|
||||
maxlength={editorConstraints.twitchLive.url.max} />
|
||||
</InputGroup>
|
18
lib/components/dashboard/editor/types/TwitterPost.svelte
Normal file
18
lib/components/dashboard/editor/types/TwitterPost.svelte
Normal file
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetTwitterPost;
|
||||
$: widgetData = type[Widget.TWITTER_POST].data as WidgetTwitterPost;
|
||||
</script>
|
||||
|
||||
<InputGroup title="URL" style="title">
|
||||
<TextInput
|
||||
name="url"
|
||||
placeholder={widgetData.url}
|
||||
value={data.url}
|
||||
minlength={editorConstraints.twitterPost.url.min}
|
||||
maxlength={editorConstraints.twitterPost.url.max} />
|
||||
</InputGroup>
|
18
lib/components/dashboard/editor/types/YouTubeVideo.svelte
Normal file
18
lib/components/dashboard/editor/types/YouTubeVideo.svelte
Normal file
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import InputGroup from '$lib/components/dashboard/elements/InputGroup.svelte';
|
||||
import TextInput from '$lib/components/dashboard/elements/TextInput.svelte';
|
||||
import { editorConstraints } from '$lib/constraints';
|
||||
import Widget, { type } from '$lib/models/widget';
|
||||
|
||||
export let data: WidgetYouTubeVideo;
|
||||
$: widgetData = type[Widget.YOUTUBE_VIDEO].data as WidgetYouTubeVideo;
|
||||
</script>
|
||||
|
||||
<InputGroup title="URL" style="title">
|
||||
<TextInput
|
||||
name="url"
|
||||
placeholder={widgetData.url}
|
||||
value={data.url}
|
||||
minlength={editorConstraints.youTubeVideo.url.min}
|
||||
maxlength={editorConstraints.youTubeVideo.url.max} />
|
||||
</InputGroup>
|
Loading…
Add table
Add a link
Reference in a new issue