File size: 2,740 Bytes
693ced9 3df1e9f 693ced9 53e0cfa 3df1e9f 693ced9 3df1e9f 693ced9 3df1e9f 693ced9 3df1e9f 693ced9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<script lang="ts">
import { dev } from "$app/environment";
import { session } from "$lib/stores/session.js";
import { createPopover } from "@melt-ui/svelte";
import { prompt } from "./Prompts.svelte";
import { token } from "$lib/stores/token.js";
import { compareStr } from "$lib/utils/compare.js";
import type { ToastData } from "./toaster.svelte.js";
import { addToast } from "./toaster.svelte.js";
let innerWidth: number;
let innerHeight: number;
function toggleTheme() {
document.body.classList.toggle("dark");
}
const {
elements: { trigger, content },
} = createPopover();
type Action = {
label: string;
cb: () => void;
};
const actions: Action[] = [
{ label: "Toggle Theme", cb: toggleTheme },
{
label: "Log session to console",
cb: () => {
console.log($session);
},
},
{
label: "Test prompt",
cb: async () => {
console.log(await prompt("Test prompt"));
},
},
{
label: "Show token modal",
cb: () => {
$token.showModal = true;
},
},
{
label: "Test toast",
cb: () => {
const toastData: ToastData[] = [
{
title: "Success",
description: "Congratulations! It worked!",
variant: "success",
},
{
title: "Warning",
description: "Please check again.",
variant: "warning",
},
{
title: "Error",
description: "Something did not work!",
variant: "error",
},
];
addToast({
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
data: toastData[Math.floor(Math.random() * toastData.length)]!,
});
},
},
].toSorted((a, b) => compareStr(a.label, b.label));
</script>
<svelte:window bind:innerWidth bind:innerHeight />
{#if dev}
<div class="abs-x-center fixed bottom-0 z-50">
<button class="rounded-t-md bg-gray-500 px-3 py-1 text-xs text-white hover:bg-gray-600" {...$trigger} use:trigger>
Debug
</button>
<div
class="mb-2 w-128 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800"
{...$content}
use:content
>
<h3 class="mb-3 text-lg font-semibold dark:text-white">Debug Menu</h3>
<div class="space-y-3">
<div class="text-sm dark:text-gray-300">
<p>Viewport: {innerWidth}x{innerHeight}</p>
<p>Environment: {import.meta.env.MODE}</p>
</div>
<div class="grid grid-cols-2 gap-2">
{#each actions as { label, cb }}
<button
class="rounded-md bg-gray-200 px-3 py-1 text-sm hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
on:click={cb}
>
{label}
</button>
{/each}
</div>
</div>
</div>
</div>
{/if}
<style>
/* Add any additional styles here */
</style>
|