792 lines
29 KiB
Svelte
792 lines
29 KiB
Svelte
<script lang="ts">
|
|
import { searchBarData, screenWidth } from "$lib/store";
|
|
import { onMount } from "svelte";
|
|
import Search from "lucide-svelte/icons/search";
|
|
import { goto } from "$app/navigation";
|
|
let searchHistory = [];
|
|
let searchResults = [];
|
|
let updatedSearchHistory = [];
|
|
|
|
let dataLoaded = false; // Flag to track data loading
|
|
|
|
let assetType = "";
|
|
let focusedSuggestion = "";
|
|
let arrowMovement = false;
|
|
let showSuggestions = false;
|
|
let notFoundTicker = false;
|
|
let searchQuery = "";
|
|
|
|
let searchOpen = false;
|
|
let searchBarModalChecked = false; // Initialize it to false
|
|
let inputElement;
|
|
|
|
async function loadSearchData() {
|
|
if ($searchBarData.length !== 0 || dataLoaded) return;
|
|
else {
|
|
dataLoaded = true;
|
|
// make the GET request to the endpoint
|
|
const response = await fetch("/api/searchbar-data", {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
});
|
|
|
|
$searchBarData = await response.json();
|
|
}
|
|
}
|
|
|
|
async function popularTicker(state) {
|
|
searchOpen = false;
|
|
if (!state) return;
|
|
|
|
// Convert state to uppercase once
|
|
const upperState = state.toUpperCase();
|
|
|
|
// Find the matching ticker data
|
|
const newSearchItem = $searchBarData?.find(
|
|
({ symbol }) => symbol === upperState,
|
|
);
|
|
|
|
if (newSearchItem) {
|
|
// Ensure `upperState` matches the case of `item.symbol`
|
|
updatedSearchHistory = [
|
|
newSearchItem,
|
|
...(searchHistory?.filter(
|
|
(item) => item?.symbol?.toUpperCase() !== upperState,
|
|
) || []),
|
|
].slice(0, 5);
|
|
}
|
|
|
|
// Close search modal
|
|
const closePopup = document.getElementById("searchBarModal");
|
|
closePopup?.dispatchEvent(new MouseEvent("click"));
|
|
}
|
|
|
|
function searchBarTicker(state) {
|
|
showSuggestions = false;
|
|
// Early return if state is empty or ticker not found
|
|
if (
|
|
!state ||
|
|
!$searchBarData?.find((item) => item?.symbol === state?.toUpperCase())
|
|
) {
|
|
notFoundTicker = false;
|
|
searchQuery = "";
|
|
return;
|
|
}
|
|
|
|
// Convert state to uppercase once
|
|
const upperState = state.toUpperCase();
|
|
|
|
// Find the matching ticker data
|
|
const newSearchItem = $searchBarData?.find(
|
|
({ symbol }) => symbol === upperState,
|
|
);
|
|
|
|
if (newSearchItem) {
|
|
// Ensure `upperState` matches the case of `item.symbol`
|
|
updatedSearchHistory = [
|
|
newSearchItem,
|
|
...(searchHistory?.filter(
|
|
(item) => item?.symbol?.toUpperCase() !== upperState,
|
|
) || []),
|
|
].slice(0, 5);
|
|
}
|
|
|
|
// Close search modal
|
|
searchOpen = false;
|
|
const closePopup = document.getElementById("searchBarModal");
|
|
closePopup?.dispatchEvent(new MouseEvent("click"));
|
|
|
|
searchQuery = "";
|
|
}
|
|
|
|
function search() {
|
|
const normalizedSearchQuery = searchQuery?.toLowerCase();
|
|
|
|
// Define names for which symbols without dots should be prioritized
|
|
const prioritizeWithoutDotsForNames = [
|
|
"apple" /* Add more names as needed */,
|
|
];
|
|
|
|
const filteredList = $searchBarData
|
|
?.map((item) => ({
|
|
...item,
|
|
nameLower: item?.name?.toLowerCase(),
|
|
symbolLower: item?.symbol?.toLowerCase(),
|
|
}))
|
|
?.filter(
|
|
({ nameLower, symbolLower }) =>
|
|
nameLower?.includes(normalizedSearchQuery) ||
|
|
symbolLower?.includes(normalizedSearchQuery),
|
|
);
|
|
|
|
filteredList?.sort((a, b) => {
|
|
const aSymbolLower = a?.symbolLower;
|
|
const bSymbolLower = b?.symbolLower;
|
|
const aNameLower = a?.nameLower;
|
|
const bNameLower = b?.nameLower;
|
|
|
|
// Check for exact symbol matches
|
|
const isExactMatchA = aSymbolLower === normalizedSearchQuery;
|
|
const isExactMatchB = bSymbolLower === normalizedSearchQuery;
|
|
|
|
if (isExactMatchA && !isExactMatchB) {
|
|
return -1; // Prioritize exact symbol match for A
|
|
} else if (!isExactMatchA && isExactMatchB) {
|
|
return 1; // Prioritize exact symbol match for B
|
|
}
|
|
|
|
const aSymbolIndex = aSymbolLower?.indexOf(normalizedSearchQuery);
|
|
const bSymbolIndex = bSymbolLower?.indexOf(normalizedSearchQuery);
|
|
|
|
const aNameIndex = aNameLower?.indexOf(normalizedSearchQuery);
|
|
const bNameIndex = bNameLower?.indexOf(normalizedSearchQuery);
|
|
|
|
// If no exact symbol match, prioritize based on the combined position in name and symbol
|
|
const positionComparison =
|
|
aSymbolIndex + aNameIndex - (bSymbolIndex + bNameIndex);
|
|
|
|
// Additional condition for prioritizing symbols without dots for specific names
|
|
if (prioritizeWithoutDotsForNames.includes(normalizedSearchQuery)) {
|
|
const aHasDot = aSymbolLower?.includes(".") || false;
|
|
const bHasDot = bSymbolLower?.includes(".") || false;
|
|
|
|
// Prioritize results without dots for the specified names
|
|
return aHasDot - bHasDot || positionComparison;
|
|
}
|
|
|
|
return positionComparison;
|
|
});
|
|
|
|
searchResults = filteredList?.slice(0, 5);
|
|
showSuggestions = normalizedSearchQuery !== "";
|
|
}
|
|
|
|
const onKeyPress = (e) => {
|
|
if (e?.charCode === 13) {
|
|
const assetActions = {
|
|
ETF: () => goto(`/etf/${searchQuery}`),
|
|
Stock: () => goto(`/stocks/${searchQuery}`),
|
|
Crypto: () => goto(`/crypto/${searchQuery}`),
|
|
};
|
|
console.log(arrowMovement);
|
|
if (!arrowMovement && searchResults?.length > 0) {
|
|
searchQuery = searchResults.at(0).symbol;
|
|
assetType = searchResults.at(0).type;
|
|
}
|
|
|
|
// Call the function for the selected asset type
|
|
assetActions[assetType]?.();
|
|
|
|
// Trigger search bar action
|
|
searchBarTicker(searchQuery);
|
|
}
|
|
|
|
console.log(focusedSuggestion);
|
|
};
|
|
|
|
function handleKeyDown(event) {
|
|
if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
|
|
|
|
event.preventDefault(); // Prevent scrolling
|
|
|
|
const list = showSuggestions
|
|
? searchResults
|
|
: searchHistory?.length > 0
|
|
? searchHistory
|
|
: popularList;
|
|
if (!list?.length) return;
|
|
|
|
const currentIndex = list.findIndex((item) => item?.symbol === searchQuery);
|
|
const isMovingDown = event.key === "ArrowDown";
|
|
|
|
// Check if movement is within bounds
|
|
const isValidMove = isMovingDown
|
|
? currentIndex < list.length - 1
|
|
: currentIndex > 0;
|
|
|
|
if (isValidMove) {
|
|
arrowMovement = true;
|
|
const newIndex = currentIndex + (isMovingDown ? 1 : -1);
|
|
const selectedItem = list[newIndex];
|
|
|
|
// Update all related states at once
|
|
searchQuery = selectedItem?.symbol;
|
|
assetType = selectedItem?.type;
|
|
focusedSuggestion = selectedItem?.symbol;
|
|
}
|
|
}
|
|
const handleControlD = async (event) => {
|
|
if (event.ctrlKey && event.key === "k") {
|
|
// Ctrl+F is pressed, open the modal
|
|
const keyboardSearch = document.getElementById("searchBarModal");
|
|
keyboardSearch?.dispatchEvent(new MouseEvent("click"));
|
|
event.preventDefault();
|
|
|
|
await loadSearchData();
|
|
}
|
|
};
|
|
|
|
const handleEscape = (event) => {
|
|
if (event.key === "Escape") {
|
|
// Escape key is pressed, close the modal
|
|
searchBarModalChecked = false;
|
|
}
|
|
};
|
|
|
|
function saveRecentTicker() {
|
|
try {
|
|
// Save the version along with the rules
|
|
localStorage?.setItem("search-history", JSON?.stringify(searchHistory));
|
|
} catch (e) {
|
|
console.log("Failed saving indicator rules: ", e);
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
try {
|
|
const savedRules = localStorage?.getItem("search-history");
|
|
|
|
if (savedRules) {
|
|
searchHistory = JSON.parse(savedRules);
|
|
}
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
|
|
window.addEventListener("keydown", handleControlD);
|
|
window.addEventListener("keydown", handleEscape);
|
|
return () => {
|
|
window.removeEventListener("keydown", handleControlD);
|
|
window.removeEventListener("keydown", handleEscape);
|
|
};
|
|
});
|
|
|
|
let charNumber = 20;
|
|
|
|
let popularList = [];
|
|
const popularSymbols = [
|
|
"BTCUSD",
|
|
"ETHUSD",
|
|
"SOLUSD",
|
|
"SPY",
|
|
"ADBE",
|
|
"DBX",
|
|
"HOOD",
|
|
"AMZN",
|
|
"TSLA",
|
|
"AMD",
|
|
"MCD",
|
|
"NVDA",
|
|
"PYPL",
|
|
"AAPL",
|
|
"BYND",
|
|
"KO",
|
|
];
|
|
|
|
$: {
|
|
if ($searchBarData && popularList?.length === 0) {
|
|
popularList = $searchBarData?.filter(({ symbol }) =>
|
|
popularSymbols?.includes(symbol),
|
|
);
|
|
|
|
// Fisher-Yates (Knuth) Shuffle Algorithm
|
|
for (let i = popularList?.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[popularList[i], popularList[j]] = [popularList[j], popularList[i]];
|
|
}
|
|
|
|
popularList = popularList?.slice(0, 5);
|
|
}
|
|
}
|
|
|
|
$: {
|
|
if (searchBarModalChecked === true && typeof window !== "undefined") {
|
|
if ($screenWidth > 640) {
|
|
inputElement.focus();
|
|
}
|
|
//Page is not scrollable now
|
|
document.body.classList.add("overflow-hidden");
|
|
}
|
|
}
|
|
|
|
$: {
|
|
if (searchBarModalChecked === false && typeof window !== "undefined") {
|
|
showSuggestions = searchQuery = "";
|
|
document.body.classList?.remove("overflow-hidden");
|
|
}
|
|
}
|
|
|
|
$: {
|
|
if (searchQuery?.length !== 0) {
|
|
notFoundTicker = false;
|
|
}
|
|
}
|
|
|
|
$: {
|
|
if (updatedSearchHistory?.length > 0 && searchBarModalChecked === false) {
|
|
(async () => {
|
|
// Add 500 ms delay is important otherwise bug since #each has searchHistory and updates too quickly and redirects to wrong symbol
|
|
await new Promise((resolve) => setTimeout(resolve, 500));
|
|
|
|
// Update search history after delay
|
|
searchHistory = updatedSearchHistory;
|
|
updatedSearchHistory = [];
|
|
saveRecentTicker();
|
|
})();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<label
|
|
on:mouseover={loadSearchData}
|
|
on:click={loadSearchData}
|
|
for="searchBarModal"
|
|
class="cursor-pointer p-2 sm:hover:bg-[#27272A] text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-lg"
|
|
>
|
|
<Search class="h-[20px] w-[20px]" />
|
|
</label>
|
|
|
|
<!--
|
|
<div class="ml-5 w-96 grow">
|
|
<div class="relative flex items-center">
|
|
<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>
|
|
<input
|
|
class="rounded-lg py-1.5 pl-10 text-sm placeholder-gray-400 border border-[#313131] delay-100 transition ease-out focus:outline-none focus:ring-1 tiny:pl-8 xs:pl-10 xs:text-base md:py-2 w-full bg-[#313131]"
|
|
type="text"
|
|
aria-label="Search"
|
|
role="combobox"
|
|
aria-expanded="false"
|
|
aria-controls="owned_listbox"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
aria-autocomplete="list"
|
|
placeholder="Company or stock symbol..."
|
|
name="q"
|
|
>
|
|
</div>
|
|
|
|
<div class="absolute top-11 z-40 max-h-[265px] w-96 overflow-y-auto border-default bg-[#313131] border border-[#313131]">
|
|
<h4 class="border-b px-2 py-1.5 text-left text-md font-semibold sm:px-3">
|
|
Popular
|
|
</h4>
|
|
<ul class="text-sm" >
|
|
{#if !showSuggestions }
|
|
{#each popularList as item}
|
|
<li>
|
|
<a href={`/${item?.type === 'ETF' ? 'etf' : item?.type === 'Crypto' ? 'crypto' : 'stocks'}/${item?.symbol}`} on:click={() => popularTicker(item?.symbol, item?.assetType) } class="mb-2 {item?.symbol === focusedSuggestion ? 'shake-ticker cursor-pointer flex justify-start items-center p-2 text-white bg-[#27272A] rounded group' : 'shake-ticker cursor-pointer border-b border-gray-600 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 ml-2">
|
|
<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 text-sm font-medium ml-auto">
|
|
{item?.type}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</a>
|
|
|
|
</li>
|
|
{/each}
|
|
{/if}
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
-->
|
|
|
|
<!--Start Desktop Searchbar-->
|
|
<!--Don't remove if since input.focus does not work anymore-->
|
|
|
|
{#if $screenWidth >= 640}
|
|
<input
|
|
type="checkbox"
|
|
id="searchBarModal"
|
|
class="modal-toggle"
|
|
bind:checked={searchBarModalChecked}
|
|
/>
|
|
|
|
<dialog id="searchBarModal" class="modal modal-top z-[999]">
|
|
<label for="searchBarModal" class="cursor-pointer modal-backdrop"></label>
|
|
|
|
<div
|
|
class="z-[999] modal-box overflow-hidden rounded-xl bg-[#09090B] border border-gray-600 sm:my-8 sm:m-auto sm:h-auto w-full sm:w-1/2 md:w-3/4 lg:w-1/2 2xl:w-1/3"
|
|
>
|
|
<!-- Search layout -->
|
|
<div class="mt-5 sm:mt-0">
|
|
<div class="relative">
|
|
<label for="modal-search" class="sr-only">Search</label>
|
|
<input
|
|
id="modal-search"
|
|
class="rounded-lg w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
|
|
type="search"
|
|
placeholder="Search Anything…"
|
|
bind:value={searchQuery}
|
|
bind:this={inputElement}
|
|
on:input={search}
|
|
on:keydown={handleKeyDown}
|
|
on:keypress={onKeyPress}
|
|
autocomplete="off"
|
|
/>
|
|
<button
|
|
on:click={() => searchBarTicker(searchQuery)}
|
|
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>
|
|
|
|
{#if $searchBarData?.length !== 0}
|
|
<div class="py-4">
|
|
<!-- Popular searches -->
|
|
<div class="mb-3 last:mb-0 mt-3">
|
|
{#if notFoundTicker}
|
|
<p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">
|
|
Oh snapp, ticker does not exist in our database
|
|
</p>
|
|
{/if}
|
|
{#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-[#27272A] rounded group'
|
|
: 'shake-ticker cursor-pointer bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"
|
|
>
|
|
<div class="flex flex-row items-center w-full">
|
|
<div
|
|
class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
|
|
>
|
|
<img
|
|
style="clip-path: circle(50%);"
|
|
class="w-6 h-6"
|
|
src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col ml-2">
|
|
<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 && searchResults?.length > 0}
|
|
<div class="text-start text-sm font-semibold text-white mb-2">
|
|
Suggestions
|
|
</div>
|
|
{#each searchResults 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-[#27272A] rounded group'
|
|
: 'cursor-pointer mb-2 bg-[#09090B] sm:hover:bg-[#27272A] rounded-lg 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 && searchResults?.length === 0}
|
|
<li>
|
|
<label
|
|
class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] 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>
|
|
{:else}
|
|
<div class="flex justify-center items-center m-auto mt-4 py-20">
|
|
<div class="relative">
|
|
<label
|
|
class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<span class="loading loading-spinner loading-md text-gray-400"
|
|
></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
|
|
<svg
|
|
class="w-6 h-6 inline-block mb-0.5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="#fff"
|
|
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
|
|
/></svg
|
|
>
|
|
<span class="text-white text-md font-medium"> Return </span>
|
|
</label>
|
|
</div>
|
|
</dialog>
|
|
{:else}
|
|
<!--End Desktop Searchbar-->
|
|
|
|
<!--Start Drawer Sidewise for mobile-->
|
|
|
|
<div class="drawer drawer-end z-40 overflow-hidden">
|
|
<input
|
|
id="searchBarModal"
|
|
type="checkbox"
|
|
class="drawer-toggle"
|
|
bind:checked={searchBarModalChecked}
|
|
/>
|
|
|
|
<div class="drawer-side overflow-hidden">
|
|
<div
|
|
class="p-3 bg-[#09090B] min-h-screen w-screen pb-20 overflow-hidden pt-10"
|
|
>
|
|
<!-- Search layout -->
|
|
<div class="mt-5 lg:mt-0">
|
|
<div class="relative">
|
|
<label for="modal-search" class="sr-only">Search</label>
|
|
<input
|
|
id="modal-search"
|
|
class="rounded-lg w-full text-white bg-[#09090B] border border-slate-800 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
|
|
type="search"
|
|
placeholder="Search Anything…"
|
|
bind:value={searchQuery}
|
|
bind:this={inputElement}
|
|
on:input={search}
|
|
on:keydown={handleKeyDown}
|
|
on:keypress={onKeyPress}
|
|
autocomplete="off"
|
|
/>
|
|
<button
|
|
on:click={() => searchBarTicker(searchQuery)}
|
|
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>
|
|
|
|
{#if $searchBarData?.length !== 0}
|
|
<div class="py-4">
|
|
<!-- Popular searches -->
|
|
<div class="mb-3 last:mb-0 mt-3">
|
|
{#if notFoundTicker}
|
|
<p class="text-xs font-semibold text-[#FB6A67] px-2 mb-4">
|
|
Oh snapp, ticker does not exist in our database
|
|
</p>
|
|
{/if}
|
|
{#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-[#27272A] rounded group'
|
|
: 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'} w-full"
|
|
>
|
|
<div class="flex flex-row items-center w-full">
|
|
<div
|
|
class="rounded-full w-10 h-10 relative bg-[#000] flex items-center justify-center"
|
|
>
|
|
<img
|
|
style="clip-path: circle(50%);"
|
|
class="w-6 h-6"
|
|
src={`https://financialmodelingprep.com/image-stock/${item?.symbol}.png`}
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
<div class="flex flex-col ml-2">
|
|
<span class="text-blue-400">{item?.symbol}</span>
|
|
<span class="text-white"
|
|
>{item?.name.length > charNumber
|
|
? item?.name.slice(0, charNumber) + "..."
|
|
: item?.name}</span
|
|
>
|
|
</div>
|
|
|
|
<div class="text-white font-medium ml-auto mr-2">
|
|
{item?.type}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
{:else if showSuggestions && searchResults?.length > 0}
|
|
<div class="text-start text-sm font-semibold text-white mb-2">
|
|
Suggestions
|
|
</div>
|
|
{#each searchResults 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-[#27272A] rounded group'
|
|
: 'cursor-pointer mb-2 bg-[#09090B] bg-opacity-[0.4] rounded-lg flex justify-start items-center p-2 text-white group'}"
|
|
>
|
|
<div class="flex flex-row items-center w-full">
|
|
<div class="flex flex-col ml-1">
|
|
<span class="text-blue-400">{item?.symbol}</span>
|
|
<span class="text-white"
|
|
>{item?.name.length > charNumber
|
|
? item?.name.slice(0, charNumber) + "..."
|
|
: item?.name}</span
|
|
>
|
|
</div>
|
|
|
|
<div class="text-white font-medium ml-auto mr-2">
|
|
{item?.type}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
{/each}
|
|
{:else if showSuggestions && searchResults?.length === 0}
|
|
<li>
|
|
<label
|
|
class="flex items-center p-2 text-white hover:text-white hover:bg-[#27272A] 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>
|
|
{:else}
|
|
<div class="flex justify-center items-center m-auto mt-4 py-20">
|
|
<span class="loading loading-lg loading-spinner text-success"
|
|
></span>
|
|
</div>
|
|
{/if}
|
|
|
|
<label for="searchBarModal" class="absolute left-6 top-4 sm:hidden">
|
|
<svg
|
|
class="w-6 h-6 inline-block mb-0.5"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
fill="#fff"
|
|
d="M9.125 21.1L.7 12.7q-.15-.15-.213-.325T.425 12q0-.2.063-.375T.7 11.3l8.425-8.425q.35-.35.875-.35t.9.375q.375.375.375.875t-.375.875L3.55 12l7.35 7.35q.35.35.35.863t-.375.887q-.375.375-.875.375t-.875-.375Z"
|
|
/></svg
|
|
>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!--End Drawer Sidewise for mobile-->
|