mirror of
https://github.com/gevera/hot-cold-cities.git
synced 2025-12-06 07:08:20 +00:00
95 lines
3.1 KiB
Svelte
95 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import type { PageProps } from './$types';
|
|
|
|
let { data }: PageProps = $props();
|
|
// let dropdownElement: HTMLDivElement;
|
|
// let searchTerm: string = $state('');
|
|
// let value: option = $state();
|
|
// let isOpen: boolean = $state(false);
|
|
// let option: any = $state();
|
|
// let filteredOptions = $derived(
|
|
// searchTerm
|
|
// ? data.countries.filter((c) => c.name.toLowerCase().startsWith(searchTerm.toLowerCase()))
|
|
// : data.countries
|
|
// );
|
|
//
|
|
// const handleInputChange = () => {};
|
|
// const handleOptionSelect = (item: any) => {};
|
|
// TODO: pick search library
|
|
// fuse - 6.2
|
|
// @nozbe/microfuzz 1.3
|
|
// fast-fuzzy 8.6
|
|
// fuzzy-search 1
|
|
</script>
|
|
|
|
<main class="container mx-auto my-3 max-w-4xl p-4">
|
|
<h1 class="my-5 text-center text-4xl font-light">HotColdCities</h1>
|
|
<h2 class="mx-auto max-w-xl text-center text-xl leading-tight md:text-2xl">
|
|
Compare the hottest 🌡️ and coldest ❄️ cities in any region to plan 📅, move 🚚, or explore 🌍
|
|
with ease! 🎉✨
|
|
</h2>
|
|
|
|
<button class="btn btn-lg btn-soft btn-primary"> Hi </button>
|
|
|
|
<!-- <section> -->
|
|
<!-- <div class="relative w-full" bind:this={dropdownElement}> -->
|
|
<!-- <div class="form-control w-full"> -->
|
|
<!-- <div class="input input-bordered flex items-center"> -->
|
|
<!-- <input -->
|
|
<!-- type="text" -->
|
|
<!-- class="flex-grow bg-transparent focus:outline-none" -->
|
|
<!-- placeholder="Type in to filter countries" -->
|
|
<!-- bind:value={searchTerm} -->
|
|
<!-- oninput={handleInputChange} -->
|
|
<!-- onfocus={() => (isOpen = true)} -->
|
|
<!-- /> -->
|
|
<!-- <button class="btn btn-ghost btn-sm" onclick={() => (isOpen = !isOpen)} type="button"> -->
|
|
<!-- <svg -->
|
|
<!-- xmlns="http://www.w3.org/2000/svg" -->
|
|
<!-- class="h-4 w-4" -->
|
|
<!-- fill="none" -->
|
|
<!-- viewBox="0 0 24 24" -->
|
|
<!-- stroke="currentColor" -->
|
|
<!-- > -->
|
|
<!-- <path -->
|
|
<!-- stroke-linecap="round" -->
|
|
<!-- stroke-linejoin="round" -->
|
|
<!-- stroke-width="2" -->
|
|
<!-- d={isOpen ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7'} -->
|
|
<!-- /> -->
|
|
<!-- </svg> -->
|
|
<!-- </button> -->
|
|
<!-- </div> -->
|
|
<!-- </div> -->
|
|
<!---->
|
|
<!-- {#if isOpen} -->
|
|
<!-- <ul -->
|
|
<!-- class="dropdown-content menu bg-base-100 rounded-box z-50 max-h-60 w-full overflow-auto p-2 shadow" -->
|
|
<!-- > -->
|
|
<!-- {#if filteredOptions.length > 0} -->
|
|
<!-- {#each filteredOptions as option, i} -->
|
|
<!-- <li> -->
|
|
<!-- <button -->
|
|
<!-- onclick={() => handleOptionSelect(option)} -->
|
|
<!-- class={value === option ? 'active' : ''} -->
|
|
<!-- > -->
|
|
<!-- {option} -->
|
|
<!-- </button> -->
|
|
<!-- </li> -->
|
|
<!-- {/each} -->
|
|
<!-- {:else} -->
|
|
<!-- <li class="p-2 text-gray-500">No options found</li> -->
|
|
<!-- {/if} -->
|
|
<!-- </ul> -->
|
|
<!-- {/if} -->
|
|
<!-- </div> -->
|
|
<!-- </section> -->
|
|
|
|
<ul>
|
|
{#each data.countries as country, idx (country.id)}
|
|
<li>{country.name} - {country.emoji}</li>
|
|
{/each}
|
|
</ul>
|
|
<!-- <code>{JSON.stringify(data, null, 2)}</code> -->
|
|
</main>
|