mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 13:36:36 +00:00
76 lines
1.8 KiB
Svelte
76 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/stores";
|
|
import TopBar from "$lib/components/kit/TopBar.svelte";
|
|
import { Link2 } from "@lucide/svelte";
|
|
import "$lib/styles/design2.css";
|
|
import type { Snippet } from "svelte";
|
|
|
|
interface Props {
|
|
children: Snippet;
|
|
}
|
|
|
|
let { children }: Props = $props();
|
|
|
|
type Theme = "light" | "dark";
|
|
const stored =
|
|
typeof localStorage !== "undefined"
|
|
? (localStorage.getItem("easy-png-tools:theme") as Theme | null)
|
|
: null;
|
|
let theme = $state<Theme>(stored ?? "light");
|
|
|
|
function toggle() {
|
|
theme = theme === "light" ? "dark" : "light";
|
|
}
|
|
|
|
$effect(() => {
|
|
document.documentElement.dataset.theme = theme;
|
|
try {
|
|
localStorage.setItem("easy-png-tools:theme", theme);
|
|
} catch {
|
|
/* ignore */
|
|
}
|
|
});
|
|
|
|
let crumb = $derived(toCrumb($page.url.pathname));
|
|
|
|
function toCrumb(path: string): string {
|
|
const seg = path
|
|
.replace(/^\/preview/, "")
|
|
.replace(/^\//, "")
|
|
.split("/")
|
|
.filter(Boolean);
|
|
const map: Record<string, string> = { demo: "WORKSPACE" };
|
|
const label = seg.length
|
|
? seg.map((s) => map[s] ?? s.toUpperCase()).join(" / ")
|
|
: "PREVIEW";
|
|
return "/ " + label;
|
|
}
|
|
</script>
|
|
|
|
<main class="preview-root" data-theme={theme}>
|
|
<TopBar {theme} {crumb} ontoggle={toggle} />
|
|
{@render children()}
|
|
<footer class="preview-footer">
|
|
<span>easy-png-tools <b>v2.4.0</b></span>
|
|
<span><Link2 size={13} /> pipeline is local-only</span>
|
|
<span>© 2024</span>
|
|
</footer>
|
|
</main>
|
|
|
|
<style>
|
|
.preview-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 16px clamp(20px, 4vw, 64px);
|
|
border-top: 1px solid var(--line);
|
|
font: 10px var(--font-mono);
|
|
letter-spacing: 0.08em;
|
|
color: var(--muted);
|
|
}
|
|
.preview-footer .version {
|
|
color: var(--blue);
|
|
}
|
|
</style>
|