Nulo/schreiben
1
0
Fork 0
Code Issues 13 Pull requests Packages Projects Releases Wiki Activity

mejorar pagepicker

Browse source
This commit is contained in:
Cat /dev/Nulo 2023-08-29 11:05:12 -03:00
parent b8f3f3e2ae
commit 559f107b14
2 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/Modal.svelte
View file

@ -21,8 +21,8 @@
<div class="backdrop" />
<div class="content-alignment" on:click={click} on:keydown={keydown}>
<div class="content">
<h3 id="modal-title">
<div class="content shadow-xl">
<h3 class="text-2xl" id="modal-title">
<slot name="title" />
</h3>
<slot />
@ -127,13 +127,6 @@
background: var(--background);
padding: 16px 20px;
border-radius: 16px;
min-width: 50%;
min-height: 50%;
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
h3 {

30
src/components/PagePicker.svelte
View file

@ -6,6 +6,7 @@
import { makeYdocStore } from "../lib/makeYdocStore";
import { lastUpdated } from "../lib/lastUpdated";
import { nanoid } from "nanoid";
import PlusIcon from "eva-icons/fill/svg/plus.svg";
type Entry = {
id: string;
@ -52,14 +53,31 @@
const deriveEntries = makeYdocStore((_, __, ydoc) => getDocs(ydoc));
</script>
<input type="text" bind:value={filter} placeholder="Buscar..." autofocus />
<ul>
<button type="button" on:click={() => onChoose(nanoid())}>Página nueva</button
<!-- https://devdojo.com/pines/docs/text-input -->
<input
type="text"
bind:value={filter}
placeholder="Buscar..."
autofocus
class="h-10 w-full rounded-md rounded-b-none border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 dark:border-neutral-600 dark:bg-neutral-700 placeholder:dark:text-neutral-300"
/>
<ul
class="flex flex-col rounded-b-md border border-t-0 border-neutral-300 bg-white p-2 dark:border-neutral-600 dark:bg-neutral-700"
>
<button
type="button"
class="flex items-center gap-2 rounded px-2 py-2 text-left hover:bg-neutral-200 dark:hover:bg-neutral-600"
on:click={() => onChoose(nanoid())}
>
{#each sortedEntries as entry}
<PlusIcon class="w-6 fill-current" />
Página nueva
</button>
{#each sortedEntries as entry, index (entry.id)}
<li>
<button type="button" on:click={() => onChoose(entry.id)}
>{entry.title ?? entry.id}</button
<button
type="button"
class="flex w-full items-center gap-2 rounded px-2 py-2 text-left hover:bg-neutral-200 dark:hover:bg-neutral-600"
on:click={() => onChoose(entry.id)}>{entry.title ?? entry.id}</button
>
</li>
{/each}