mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 16:38:23 +00:00
667d3a7c93
* Imports are back!! * Settings UI v3 * Use Inertia forms for heartbeat imports * Update app/javascript/pages/Users/Settings/Data.svelte Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> * Update Bundle * Fix broken Form/Button markup in Data.svelte settings page * Update JS deps * Greptile fixes * Remove dead code --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
70 lines
1.6 KiB
Svelte
70 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
|
|
type Tone = "default" | "danger";
|
|
|
|
let {
|
|
id,
|
|
title,
|
|
description,
|
|
tone = "default",
|
|
wide = false,
|
|
hasBody = true,
|
|
footerClass = "flex items-center justify-end gap-3",
|
|
children,
|
|
footer,
|
|
}: {
|
|
id?: string;
|
|
title: string;
|
|
description: string;
|
|
tone?: Tone;
|
|
wide?: boolean;
|
|
hasBody?: boolean;
|
|
footerClass?: string;
|
|
children?: Snippet;
|
|
footer?: Snippet;
|
|
} = $props();
|
|
|
|
const toneClasses = $derived(
|
|
tone === "danger"
|
|
? "border-danger/35 bg-danger/5"
|
|
: "border-surface-200 bg-surface",
|
|
);
|
|
const contentWidth = $derived(wide ? "" : "max-w-2xl");
|
|
const descriptionWidth = $derived(wide ? "max-w-3xl" : "max-w-2xl");
|
|
</script>
|
|
|
|
<section
|
|
{id}
|
|
data-settings-card
|
|
data-settings-card-tone={tone}
|
|
class={`scroll-mt-24 overflow-hidden rounded-2xl border ${toneClasses}`}
|
|
>
|
|
<div class="border-b border-surface-200 px-5 py-4 sm:px-6 sm:py-5">
|
|
<div class={descriptionWidth}>
|
|
<h2 class="text-xl font-semibold tracking-tight text-surface-content">
|
|
{title}
|
|
</h2>
|
|
<p class="mt-1 text-sm leading-6 text-muted">{description}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{#if hasBody}
|
|
<div class="px-5 py-4 sm:px-6 sm:py-5">
|
|
<div class={contentWidth}>
|
|
{@render children?.()}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if footer}
|
|
<div
|
|
data-settings-footer
|
|
class="border-t border-surface-200 bg-surface-100/60 px-5 py-3.5 sm:px-6 sm:py-4"
|
|
>
|
|
<div class={`${contentWidth} ${footerClass}`}>
|
|
{@render footer()}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</section>
|