|
@@ -12,18 +12,13 @@
|
|
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
|
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
|
import { onMount } from 'svelte';
|
|
import { onMount } from 'svelte';
|
|
import { flip } from 'svelte/animate';
|
|
import { flip } from 'svelte/animate';
|
|
|
|
+ import Dropdown from '$lib/components/elements/dropdown.svelte';
|
|
|
|
|
|
export let data: PageData;
|
|
export let data: PageData;
|
|
|
|
|
|
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
|
|
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
|
|
-
|
|
|
|
let selectedSortBy = sortByOptions[0];
|
|
let selectedSortBy = sortByOptions[0];
|
|
|
|
|
|
- const handleChangeSortBy = (e: Event) => {
|
|
|
|
- const target = e.target as HTMLSelectElement;
|
|
|
|
- selectedSortBy = target.value;
|
|
|
|
- };
|
|
|
|
-
|
|
|
|
const {
|
|
const {
|
|
albums: unsortedAlbums,
|
|
albums: unsortedAlbums,
|
|
isShowContextMenu,
|
|
isShowContextMenu,
|
|
@@ -84,25 +79,14 @@
|
|
|
|
|
|
<UserPageLayout user={data.user} title={data.meta.title}>
|
|
<UserPageLayout user={data.user} title={data.meta.title}>
|
|
<div class="flex place-items-center gap-2" slot="buttons">
|
|
<div class="flex place-items-center gap-2" slot="buttons">
|
|
- <label class="text-xs" for="sortBy">Sort by:</label>
|
|
|
|
- <select
|
|
|
|
- class="text-sm bg-slate-200 p-2 rounded-lg dark:bg-gray-600 hover:cursor-pointer"
|
|
|
|
- name="sortBy"
|
|
|
|
- id="sortBy-select"
|
|
|
|
- bind:value={selectedSortBy}
|
|
|
|
- on:change={handleChangeSortBy}
|
|
|
|
- >
|
|
|
|
- {#each sortByOptions as option}
|
|
|
|
- <option value={option}>{option}</option>
|
|
|
|
- {/each}
|
|
|
|
- </select>
|
|
|
|
-
|
|
|
|
<LinkButton on:click={handleCreateAlbum}>
|
|
<LinkButton on:click={handleCreateAlbum}>
|
|
<div class="flex place-items-center gap-2 text-sm">
|
|
<div class="flex place-items-center gap-2 text-sm">
|
|
<PlusBoxOutline size="18" />
|
|
<PlusBoxOutline size="18" />
|
|
Create album
|
|
Create album
|
|
</div>
|
|
</div>
|
|
</LinkButton>
|
|
</LinkButton>
|
|
|
|
+
|
|
|
|
+ <Dropdown options={sortByOptions} bind:value={selectedSortBy} />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Album Card -->
|
|
<!-- Album Card -->
|