ui fix
This commit is contained in:
MuslemRahimi
parent
d9dc0a0284
commit
a21eab3cfb
@ -19,7 +19,6 @@
|
|||||||
|
|
||||||
$: inputValue = "";
|
$: inputValue = "";
|
||||||
|
|
||||||
|
|
||||||
let searchOpen = false;
|
let searchOpen = false;
|
||||||
let searchBarModalChecked = false; // Initialize it to false
|
let searchBarModalChecked = false; // Initialize it to false
|
||||||
let inputElement;
|
let inputElement;
|
||||||
@ -54,9 +53,9 @@
|
|||||||
|
|
||||||
async function handleSearch(symbol, assetType) {
|
async function handleSearch(symbol, assetType) {
|
||||||
searchBarTicker(symbol);
|
searchBarTicker(symbol);
|
||||||
goto(`/${assetType === "ETF" ? "etf" : assetType === "Crypto" ? "crypto" : "stocks"}/${symbol}`)
|
goto(
|
||||||
|
`/${assetType === "ETF" ? "etf" : assetType === "Crypto" ? "crypto" : "stocks"}/${symbol}`,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function popularTicker(state) {
|
async function popularTicker(state) {
|
||||||
@ -122,9 +121,9 @@
|
|||||||
// Close search modal
|
// Close search modal
|
||||||
searchOpen = false;
|
searchOpen = false;
|
||||||
if ($screenWidth < 640) {
|
if ($screenWidth < 640) {
|
||||||
const closePopup = document.getElementById("searchBarModal");
|
const closePopup = document.getElementById("searchBarModal");
|
||||||
closePopup?.dispatchEvent(new MouseEvent("click"));
|
closePopup?.dispatchEvent(new MouseEvent("click"));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function search() {
|
async function search() {
|
||||||
@ -145,7 +144,6 @@
|
|||||||
searchBarData = await response?.json();
|
searchBarData = await response?.json();
|
||||||
}, 50); // delay
|
}, 50); // delay
|
||||||
isLoading = false;
|
isLoading = false;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const onKeyPress = (e) => {
|
const onKeyPress = (e) => {
|
||||||
@ -198,12 +196,11 @@
|
|||||||
assetType = selectedItem?.type;
|
assetType = selectedItem?.type;
|
||||||
focusedSuggestion = selectedItem?.symbol;
|
focusedSuggestion = selectedItem?.symbol;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
const handleControlK = async (event) => {
|
const handleControlK = async (event) => {
|
||||||
if (event.ctrlKey && event.key === "k") {
|
if (event.ctrlKey && event.key === "k") {
|
||||||
//const keyboardSearch = document.getElementById("searchBarModal");
|
const keyboardSearch = document.getElementById("combobox-input");
|
||||||
//keyboardSearch?.dispatchEvent(new MouseEvent("click"));
|
keyboardSearch?.dispatchEvent(new MouseEvent("click"));
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -243,7 +240,6 @@
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (searchBarModalChecked === true && typeof window !== "undefined") {
|
if (searchBarModalChecked === true && typeof window !== "undefined") {
|
||||||
if ($screenWidth > 640) {
|
if ($screenWidth > 640) {
|
||||||
@ -284,105 +280,121 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="hidden sm:block w-full sm:max-w-[600px] grow">
|
<div class="hidden sm:block w-full sm:max-w-[600px]">
|
||||||
<div >
|
<div>
|
||||||
<div class="relative flex items-center">
|
<div class="relative flex items-center">
|
||||||
<div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
|
<div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
|
||||||
<svg class="h-4 w-4 text-icon xs:h-5 xs:w-5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" style="max-width: 40px" aria-hidden="true"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div>
|
<svg
|
||||||
<Combobox.Root
|
class="h-4 w-4 text-icon xs:h-5 xs:w-5"
|
||||||
items={searchBarData}
|
fill="none"
|
||||||
bind:inputValue
|
stroke-linecap="round"
|
||||||
bind:touchedInput
|
stroke-linejoin="round"
|
||||||
>
|
stroke-width="3"
|
||||||
<div class="relative w-full">
|
stroke="currentColor"
|
||||||
<div
|
|
||||||
class="absolute inset-y-0 left-0 flex items-center pl-2.5"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="text-icon h-5 w-5"
|
|
||||||
fill="none"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="3"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
style="max-width: 40px"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<Combobox.Input
|
|
||||||
on:input={search}
|
|
||||||
class="grow rounded-sm border border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-400 focus:border-default focus:shadow-lg focus:outline-none focus:ring-0 tiny:pl-8 xs:pl-10 text-white md:py-2 w-full bg-secondary sm:hover:bg-[#09090B] focus:bg-[#09090B] dark:bg-dark-700 dark:hover:bg-dark-700 dark:focus:bg-dark-700"
|
|
||||||
placeholder="Company or stock symbol..."
|
|
||||||
aria-label="Company or stock symbol..."
|
|
||||||
/>
|
|
||||||
<div class="absolute inset-y-0 right-0 flex items-center gap-x-2 px-3 text-gray-350 font-semibold">
|
|
||||||
{#if isLoading}
|
|
||||||
<span class="loading loading-spinner loading-sm"></span>
|
|
||||||
{:else if inputValue?.length > 0}
|
|
||||||
<label class="cursor-pointer" on:click={() => inputValue = ""}>
|
|
||||||
<svg
|
|
||||||
class="w-6 h-6 "
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
><path
|
style="max-width: 40px"
|
||||||
fill="white"
|
aria-hidden="true"
|
||||||
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg
|
||||||
/></svg
|
|
||||||
>
|
>
|
||||||
</label>
|
</div>
|
||||||
{:else}
|
<Combobox.Root items={searchBarData} bind:inputValue bind:touchedInput>
|
||||||
<div class="pointer-events-none rounded-md border border-gray-500 px-2 py-0.5">
|
<div class="relative w-full">
|
||||||
/
|
<div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
|
||||||
|
<svg
|
||||||
|
class="text-icon h-5 w-5"
|
||||||
|
fill="none"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
style="max-width: 40px"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<Combobox.Input
|
||||||
|
id="combobox-input"
|
||||||
|
on:input={search}
|
||||||
|
class="grow rounded-sm border border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-400 focus:border-default focus:shadow-lg focus:outline-none focus:ring-0 tiny:pl-8 xs:pl-10 text-white md:py-2 w-full bg-secondary sm:hover:bg-[#09090B] focus:bg-[#09090B] dark:bg-dark-700 dark:hover:bg-dark-700 dark:focus:bg-dark-700"
|
||||||
|
placeholder="Company or stock symbol..."
|
||||||
|
aria-label="Company or stock symbol..."
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute inset-y-0 right-0 flex items-center gap-x-2 px-3 text-gray-350 font-semibold"
|
||||||
|
>
|
||||||
|
{#if isLoading}
|
||||||
|
<span class="loading loading-spinner loading-sm"></span>
|
||||||
|
{:else if inputValue?.length > 0}
|
||||||
|
<label class="cursor-pointer" on:click={() => (inputValue = "")}>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
fill="white"
|
||||||
|
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="pointer-events-none absolute end-6 top-2.5 gap-1 opacity-80 rtl:flex-row-reverse hidden lg:flex"
|
||||||
|
>
|
||||||
|
<kbd class="kbd kbd-sm">ctrl</kbd>
|
||||||
|
<kbd class="kbd kbd-sm">K</kbd>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if inputValue?.length > 0}
|
|
||||||
<Combobox.Content
|
<Combobox.Content
|
||||||
class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-[#09090B] px-1 py-3 shadow-popover outline-none"
|
class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-[#09090B] px-1 py-3 shadow-popover outline-none"
|
||||||
sideOffset={8}
|
sideOffset={8}
|
||||||
|
on:keydown={handleKeyDown}
|
||||||
>
|
>
|
||||||
{#each searchBarData as item}
|
{#if inputValue?.length > 0 && searchBarData?.length > 0}
|
||||||
<Combobox.Item
|
{#each searchBarData as item}
|
||||||
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
|
<Combobox.Item
|
||||||
value={item?.symbol}
|
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
|
||||||
label={item?.name}
|
value={item?.symbol}
|
||||||
on:click={() => handleSearch(item?.symbol, item?.type)}
|
label={item?.name}
|
||||||
>
|
on:click={() => handleSearch(item?.symbol, item?.type)}
|
||||||
<div
|
>
|
||||||
class="flex flex-row items-center justify-between w-full">
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
<span class="text-sm text-blue-400"
|
<span class="text-sm text-blue-400">{item?.symbol}</span>
|
||||||
>{item?.symbol}</span
|
<span class="ml-3 text-sm text-white">{item?.name}</span>
|
||||||
>
|
<span class="ml-auto text-sm text-white">{item?.type}</span>
|
||||||
<span class="ml-3 text-sm text-white"
|
</div>
|
||||||
>{item?.name}</span
|
</Combobox.Item>
|
||||||
>
|
{/each}
|
||||||
<span class="ml-auto text-sm text-white"
|
{:else if inputValue?.length === 0}
|
||||||
>{item?.type}</span
|
{#each searchHistory as item}
|
||||||
>
|
<Combobox.Item
|
||||||
</div>
|
class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
|
||||||
</Combobox.Item>
|
value={item?.symbol}
|
||||||
|
label={item?.name}
|
||||||
|
on:click={() => handleSearch(item?.symbol, item?.type)}
|
||||||
|
>
|
||||||
|
<div class="flex flex-row items-center justify-between w-full">
|
||||||
|
<span class="text-sm text-blue-400">{item?.symbol}</span>
|
||||||
|
<span class="ml-3 text-sm text-white">{item?.name}</span>
|
||||||
|
<span class="ml-auto text-sm text-white">{item?.type}</span>
|
||||||
|
</div>
|
||||||
|
</Combobox.Item>
|
||||||
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
<span class="block px-5 py-2 text-sm text-white">
|
<span class="block px-5 py-2 text-sm text-white">
|
||||||
No results found
|
No results found
|
||||||
</span>
|
</span>
|
||||||
{/each}
|
{/if}
|
||||||
</Combobox.Content>
|
</Combobox.Content>
|
||||||
{/if}
|
</Combobox.Root>
|
||||||
</Combobox.Root>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label
|
<label
|
||||||
for="searchBarModal"
|
for="searchBarModal"
|
||||||
@ -391,171 +403,187 @@
|
|||||||
<Search class="h-[20px] w-[20px]" />
|
<Search class="h-[20px] w-[20px]" />
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="searchBarModal"
|
id="searchBarModal"
|
||||||
class="modal-toggle"
|
class="modal-toggle"
|
||||||
bind:checked={searchBarModalChecked}
|
bind:checked={searchBarModalChecked}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<dialog id="searchBarModal" class="modal p-3 sm:p-0">
|
<dialog id="searchBarModal" class="modal p-3 sm:p-0">
|
||||||
<label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
|
<label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
|
||||||
|
|
||||||
|
<div
|
||||||
<div
|
class="z-[999] modal-box overflow-hidden rounded-md bg-secondary border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3"
|
||||||
class="z-[999] modal-box overflow-hidden rounded-md bg-secondary border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-3/4 lg:w-1/2 2xl:w-1/3"
|
>
|
||||||
>
|
|
||||||
<label
|
<label
|
||||||
for="searchBarModal"
|
for="searchBarModal"
|
||||||
class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem] text-white"
|
class="inline-block cursor-pointer absolute right-3 top-3 text-[1.3rem] sm:text-[1.8rem] text-white"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-6 h-6 sm:w-8 sm:h-8"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
><path
|
||||||
|
fill="white"
|
||||||
|
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
||||||
|
/></svg
|
||||||
>
|
>
|
||||||
<svg
|
</label>
|
||||||
class="w-6 h-6 sm:w-8 sm:h-8"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<!-- Search layout -->
|
||||||
viewBox="0 0 24 24"
|
<div class="mt-8">
|
||||||
><path
|
<div class="relative">
|
||||||
fill="white"
|
<div
|
||||||
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
class="inline-block cursor-pointer absolute right-5 top-1.5 text-[1.3rem] sm:text-[1.5rem] text-white"
|
||||||
/></svg
|
|
||||||
>
|
>
|
||||||
</label>
|
{#if isLoading}
|
||||||
|
<span class="loading loading-spinner loading-sm"></span>
|
||||||
<!-- Search layout -->
|
{:else if inputValue?.length > 0}
|
||||||
<div class="mt-8">
|
<label class="cursor-pointer" on:click={() => (inputValue = "")}>
|
||||||
<div class="relative">
|
<svg
|
||||||
<label for="modal-search" class="sr-only">Search</label>
|
class="w-6 h-6 mt-2 ml-1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<input
|
viewBox="0 0 24 24"
|
||||||
id="modal-search"
|
><path
|
||||||
class="rounded-md w-full text-white bg-secondary border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
|
fill="white"
|
||||||
type="search"
|
d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
|
||||||
placeholder="Search Anything…"
|
/></svg
|
||||||
bind:value={inputValue}
|
>
|
||||||
bind:this={inputElement}
|
</label>
|
||||||
on:input={search}
|
{:else}
|
||||||
on:keydown={handleKeyDown}
|
/
|
||||||
on:keypress={onKeyPress}
|
|
||||||
autocomplete="off"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
on:click={() => searchBarTicker(inputValue)}
|
|
||||||
class="absolute inset-0 right-auto group"
|
|
||||||
type="submit"
|
|
||||||
aria-label="Search"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
><path
|
|
||||||
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="py-4">
|
|
||||||
<!-- Popular searches -->
|
|
||||||
<div class="mb-3 last:mb-0 mt-3">
|
|
||||||
{#if !showSuggestions}
|
|
||||||
<div class="text-start text-sm font-semibold text-white mb-2">
|
|
||||||
{searchHistory?.length > 0 ? "Recent" : "Popular"}
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<ul class="text-sm">
|
|
||||||
{#if !showSuggestions}
|
|
||||||
{#each searchHistory?.length > 0 ? searchHistory : popularList as item}
|
|
||||||
<li class="border-b border-gray-600">
|
|
||||||
<a
|
|
||||||
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
|
|
||||||
on:click={() => popularTicker(item?.symbol)}
|
|
||||||
class="mb-2 {item?.symbol === focusedSuggestion
|
|
||||||
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
|
|
||||||
: 'shake-ticker cursor-pointer bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'} w-full"
|
|
||||||
>
|
|
||||||
<div class="flex flex-row items-center w-full">
|
|
||||||
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400">{item?.symbol}</span>
|
|
||||||
<span class="text-white"
|
|
||||||
>{item?.name.length > 150
|
|
||||||
? item?.name?.slice(0, 150) + "..."
|
|
||||||
: item?.name}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-white font-medium ml-auto">
|
|
||||||
{item?.type}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
{:else if showSuggestions && searchBarData?.length > 0}
|
|
||||||
<div class="text-start text-sm font-semibold text-white mb-2">
|
|
||||||
Suggestions
|
|
||||||
</div>
|
|
||||||
{#each searchBarData as item}
|
|
||||||
<li class="border-b border-gray-600">
|
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
||||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
|
||||||
<a
|
|
||||||
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
|
|
||||||
on:click={() => searchBarTicker(item?.symbol)}
|
|
||||||
class="mb-2 {item?.symbol === focusedSuggestion
|
|
||||||
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
|
|
||||||
: 'cursor-pointer mb-2 bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'}"
|
|
||||||
>
|
|
||||||
<div class="flex flex-row items-center w-full">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-blue-400">{item?.symbol}</span>
|
|
||||||
<span class="text-white"
|
|
||||||
>{item?.name?.length > 150
|
|
||||||
? item?.name?.slice(0, 150) + "..."
|
|
||||||
: item?.name}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text-white font-medium ml-auto">
|
|
||||||
{item?.type}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
{:else if showSuggestions && searchBarData?.length === 0}
|
|
||||||
<li>
|
|
||||||
<label
|
|
||||||
class="flex items-center p-2 text-white hover:text-white hover:bg-primary rounded group"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
viewBox="0 0 12 12"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>No results found</span>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<label for="modal-search" class="sr-only">Search</label>
|
||||||
|
|
||||||
|
<input
|
||||||
|
id="modal-search"
|
||||||
|
class="rounded-md w-full text-white bg-secondary border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
|
||||||
|
type="search"
|
||||||
|
placeholder="Company or stock symbol..."
|
||||||
|
bind:value={inputValue}
|
||||||
|
bind:this={inputElement}
|
||||||
|
on:input={search}
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<button
|
||||||
|
on:click={() => searchBarTicker(inputValue)}
|
||||||
|
class="absolute inset-0 right-auto group"
|
||||||
|
type="submit"
|
||||||
|
aria-label="Search"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 shrink-0 fill-current text-white ml-4 mr-2 text-slate-400"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
><path
|
||||||
|
d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
|
||||||
|
|
||||||
|
<div class="py-4">
|
||||||
|
<!-- Popular searches -->
|
||||||
|
<div class="mb-3 last:mb-0 mt-3">
|
||||||
|
{#if !showSuggestions}
|
||||||
|
<div class="text-start text-sm font-semibold text-white mb-2">
|
||||||
|
{searchHistory?.length > 0 ? "Recent" : "Popular"}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<ul class="text-sm">
|
||||||
|
{#if !showSuggestions}
|
||||||
|
{#each searchHistory?.length > 0 ? searchHistory : popularList as item}
|
||||||
|
<li class="border-b border-gray-600">
|
||||||
|
<a
|
||||||
|
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
|
||||||
|
on:click={() => popularTicker(item?.symbol)}
|
||||||
|
class="mb-2 {item?.symbol === focusedSuggestion
|
||||||
|
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
|
||||||
|
: 'shake-ticker cursor-pointer bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'} w-full"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row items-center w-full">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-blue-400">{item?.symbol}</span>
|
||||||
|
<span class="text-white"
|
||||||
|
>{item?.name.length > 150
|
||||||
|
? item?.name?.slice(0, 150) + "..."
|
||||||
|
: item?.name}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-white font-medium ml-auto">
|
||||||
|
{item?.type}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
{:else if showSuggestions && searchBarData?.length > 0}
|
||||||
|
<div class="text-start text-sm font-semibold text-white mb-2">
|
||||||
|
Suggestions
|
||||||
|
</div>
|
||||||
|
{#each searchBarData as item}
|
||||||
|
<li class="border-b border-gray-600">
|
||||||
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
|
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||||
|
<a
|
||||||
|
href={`/${item?.type === "ETF" ? "etf" : item?.type === "Crypto" ? "crypto" : "stocks"}/${item?.symbol}`}
|
||||||
|
on:click={() => searchBarTicker(item?.symbol)}
|
||||||
|
class="mb-2 {item?.symbol === focusedSuggestion
|
||||||
|
? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-primary rounded group'
|
||||||
|
: 'cursor-pointer mb-2 bg-secondary sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'}"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row items-center w-full">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-blue-400">{item?.symbol}</span>
|
||||||
|
<span class="text-white"
|
||||||
|
>{item?.name?.length > 150
|
||||||
|
? item?.name?.slice(0, 150) + "..."
|
||||||
|
: item?.name}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-white font-medium ml-auto">
|
||||||
|
{item?.type}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
{:else if showSuggestions && searchBarData?.length === 0}
|
||||||
|
<li>
|
||||||
|
<label
|
||||||
|
class="flex items-center p-2 text-white hover:text-white hover:bg-primary rounded group"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="w-3 h-3 fill-slate-400 shrink-0 mr-3 dark:fill-slate-500"
|
||||||
|
width="12"
|
||||||
|
height="12"
|
||||||
|
viewBox="0 0 12 12"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M11.953 4.29a.5.5 0 0 0-.454-.292H6.14L6.984.62A.5.5 0 0 0 6.12.173l-6 7a.5.5 0 0 0 .379.825h5.359l-.844 3.38a.5.5 0 0 0 .864.445l6-7a.5.5 0 0 0 .075-.534Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span>No results found</span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
{/if}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
<!--End Drawer Sidewise for mobile-->
|
<!--End Drawer Sidewise for mobile-->
|
||||||
<!--End Drawer Sidewise for mobile-->
|
<!--End Drawer Sidewise for mobile-->
|
||||||
@ -795,8 +795,6 @@
|
|||||||
</Sheet.Close>
|
</Sheet.Close>
|
||||||
{/if}
|
{/if}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
</Sheet.Content>
|
</Sheet.Content>
|
||||||
</Sheet.Root>
|
</Sheet.Root>
|
||||||
|
|
||||||
@ -809,78 +807,84 @@
|
|||||||
<span class="text-white font-semibold ml-2 text-lg">Stocknear</span>
|
<span class="text-white font-semibold ml-2 text-lg">Stocknear</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="relative w-full flex flex-row justify-end sm:justify-between items-center"
|
||||||
<div class="relative w-full flex flex-row justify-end sm:justify-between items-center">
|
>
|
||||||
<div class="sm:w-full lg:ml-16">
|
<div class="sm:w-full xl:ml-16">
|
||||||
<Searchbar />
|
<Searchbar />
|
||||||
</div>
|
</div>
|
||||||
<NotificationBell {data} {hasUnreadElement} />
|
<NotificationBell {data} {hasUnreadElement} />
|
||||||
|
|
||||||
<div class="ml-3">
|
<div class="ml-4">
|
||||||
{#if data?.user}
|
{#if data?.user}
|
||||||
<DropdownMenu.Root>
|
<DropdownMenu.Root>
|
||||||
<DropdownMenu.Trigger asChild let:builder>
|
<DropdownMenu.Trigger asChild let:builder>
|
||||||
<Button
|
<Button
|
||||||
size="icon"
|
size="icon"
|
||||||
class="overflow-hidden rounded-md bg-[#09090B] sm:hover:bg-primary border border-gray-600 w-10 h-10"
|
class="overflow-hidden rounded-md bg-[#09090B] sm:hover:bg-primary border border-gray-600 w-10 h-10"
|
||||||
builders={[builder]}
|
builders={[builder]}
|
||||||
>
|
|
||||||
<svg
|
|
||||||
class="h-[28px] w-[28px] overflow-hidden rounded-full text-gray-300"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
><path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"
|
|
||||||
/></svg
|
|
||||||
>
|
>
|
||||||
</Button>
|
<svg
|
||||||
</DropdownMenu.Trigger>
|
class="h-[28px] w-[28px] overflow-hidden rounded-full text-gray-300"
|
||||||
<DropdownMenu.Content align="end">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
<a href="/profile" class="cursor-pointer ">
|
viewBox="0 0 24 24"
|
||||||
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
|
><path
|
||||||
My Account
|
fill="currentColor"
|
||||||
</DropdownMenu.Item>
|
d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"
|
||||||
</a>
|
/></svg
|
||||||
<DropdownMenu.Separator />
|
>
|
||||||
|
</Button>
|
||||||
<a href="/watchlist/stocks" class="cursor-pointer">
|
</DropdownMenu.Trigger>
|
||||||
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
|
<DropdownMenu.Content align="end">
|
||||||
Watchlist
|
<a href="/profile" class="cursor-pointer">
|
||||||
</DropdownMenu.Item>
|
<DropdownMenu.Item
|
||||||
</a>
|
class="sm:hover:bg-primary cursor-pointer"
|
||||||
<a href="/price-alert" class="cursor-pointer">
|
>
|
||||||
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
|
My Account
|
||||||
Price Alert
|
|
||||||
</DropdownMenu.Item>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<DropdownMenu.Separator />
|
|
||||||
<form class="cursor-pointer" action="/logout" method="POST">
|
|
||||||
<button type="submit" class="w-full text-start cursor-pointer">
|
|
||||||
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
|
|
||||||
<span class="text-start">Logout</span>
|
|
||||||
</DropdownMenu.Item>
|
</DropdownMenu.Item>
|
||||||
</button>
|
</a>
|
||||||
</form>
|
<DropdownMenu.Separator />
|
||||||
</DropdownMenu.Content>
|
|
||||||
</DropdownMenu.Root>
|
|
||||||
{:else}
|
|
||||||
<a
|
|
||||||
href="/login"
|
|
||||||
class="inline-flex items-center justify-center rounded-md bg-[#fff] px-4 py-2 text-sm font-semibold text-black shadow-sm transition-all duration-150 sm:hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
|
|
||||||
>
|
|
||||||
Login
|
|
||||||
</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<a href="/watchlist/stocks" class="cursor-pointer">
|
||||||
|
<DropdownMenu.Item
|
||||||
|
class="sm:hover:bg-primary cursor-pointer"
|
||||||
|
>
|
||||||
|
Watchlist
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</a>
|
||||||
|
<a href="/price-alert" class="cursor-pointer">
|
||||||
|
<DropdownMenu.Item
|
||||||
|
class="sm:hover:bg-primary cursor-pointer"
|
||||||
|
>
|
||||||
|
Price Alert
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<DropdownMenu.Separator />
|
||||||
|
<form class="cursor-pointer" action="/logout" method="POST">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="w-full text-start cursor-pointer"
|
||||||
|
>
|
||||||
|
<DropdownMenu.Item
|
||||||
|
class="sm:hover:bg-primary cursor-pointer"
|
||||||
|
>
|
||||||
|
<span class="text-start">Logout</span>
|
||||||
|
</DropdownMenu.Item>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</DropdownMenu.Content>
|
||||||
|
</DropdownMenu.Root>
|
||||||
|
{:else}
|
||||||
|
<a
|
||||||
|
href="/login"
|
||||||
|
class="inline-flex items-center justify-center rounded-md bg-[#fff] px-4 py-2 text-sm font-semibold text-black shadow-sm transition-all duration-150 sm:hover:bg-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex w-full">
|
<div class="flex w-full">
|
||||||
@ -1172,7 +1176,6 @@
|
|||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full xl:w-5/6">
|
<div class="w-full xl:w-5/6">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user