AmineTMIRI/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reverting svelte-4

Browse Source
This commit is contained in:
MuslemRahimi 2024-12-23 23:56:07 +01:00
parent b2b356d322
commit f1d70e5d26
2 changed files with 244 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

407
src/lib/components/Searchbar.svelte
View File

@ -3,16 +3,22 @@
import { onMount } from "svelte";
import Search from "lucide-svelte/icons/search";
import { goto } from "$app/navigation";
import { Combobox } from "bits-ui";
import { page } from "$app/stores";
let searchHistory = [];
let updatedSearchHistory = [];
let searchBarData = [];
let isLoading = false;
let timeoutId;
let assetType = "";
let focusedSuggestion = "";
let arrowMovement = false;
let showSuggestions = false;
let searchQuery = "";
let touchedInput = false;
$: inputValue = "";
let searchOpen = false;
let searchBarModalChecked = false; // Initialize it to false
@ -46,6 +52,12 @@
},
];
async function handleSearch( symbol, assetType) {
//event.preventDefault();
searchBarTicker(symbol);
goto(`/${assetType === "ETF" ? "etf" : assetType === "Crypto" ? "crypto" : "stocks"}/${symbol}`)
}
async function popularTicker(state) {
searchOpen = false;
if (!state) return;
@ -80,9 +92,12 @@
!state ||
!searchBarData?.find((item) => item?.symbol === state?.toUpperCase())
) {
searchQuery = "";
const closePopup = document.getElementById("searchBarModal");
closePopup?.dispatchEvent(new MouseEvent("click"));
inputValue = "";
if ($screenWidth < 640) {
const closePopup = document.getElementById("searchBarModal");
closePopup?.dispatchEvent(new MouseEvent("click"));
}
return;
}
@ -101,21 +116,24 @@
...(searchHistory?.filter(
(item) => item?.symbol?.toUpperCase() !== upperState,
) || []),
].slice(0, 5);
]?.slice(0, 5);
}
// Close search modal
searchOpen = false;
const closePopup = document.getElementById("searchBarModal");
closePopup?.dispatchEvent(new MouseEvent("click"));
if ($screenWidth < 640) {
const closePopup = document.getElementById("searchBarModal");
closePopup?.dispatchEvent(new MouseEvent("click"));
}
searchQuery = "";
inputValue = "";
}
async function search() {
isLoading = true;
clearTimeout(timeoutId); // Clear any existing timeout
if (!searchQuery.trim()) {
if (!inputValue.trim()) {
// Skip if query is empty or just whitespace
searchBarData = []; // Clear previous results
return;
@ -123,21 +141,22 @@
timeoutId = setTimeout(async () => {
const response = await fetch(
`/api/searchbar?query=${encodeURIComponent(searchQuery)}&limit=10`,
`/api/searchbar?query=${encodeURIComponent(inputValue)}&limit=10`,
);
searchBarData = await response?.json();
}, 50); // delay
isLoading = false;
}
const onKeyPress = (e) => {
if (e?.charCode === 13 && searchBarData?.length > 0) {
const assetActions = {
ETF: () => goto(`/etf/${searchQuery}`),
Stock: () => goto(`/stocks/${searchQuery}`),
Crypto: () => goto(`/crypto/${searchQuery}`),
ETF: () => goto(`/etf/${inputValue}`),
Stock: () => goto(`/stocks/${inputValue}`),
Crypto: () => goto(`/crypto/${inputValue}`),
};
if (!arrowMovement && searchBarData?.length > 0) {
searchQuery = searchBarData.at(0).symbol;
inputValue = searchBarData.at(0).symbol;
assetType = searchBarData.at(0).type;
}
@ -145,7 +164,7 @@
assetActions[assetType]?.();
// Trigger search bar action
searchBarTicker(searchQuery);
searchBarTicker(inputValue);
}
};
@ -161,7 +180,7 @@
: popularList;
if (!list?.length) return;
const currentIndex = list.findIndex((item) => item?.symbol === searchQuery);
const currentIndex = list.findIndex((item) => item?.symbol === inputValue);
const isMovingDown = event.key === "ArrowDown";
// Check if movement is within bounds
@ -175,16 +194,18 @@
const selectedItem = list[newIndex];
// Update all related states at once
searchQuery = selectedItem?.symbol;
inputValue = selectedItem?.symbol;
assetType = selectedItem?.type;
focusedSuggestion = selectedItem?.symbol;
}
}
const handleControlD = async (event) => {
const handleControlK = 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"));
//const keyboardSearch = document.getElementById("searchBarModal");
//keyboardSearch?.dispatchEvent(new MouseEvent("click"));
touchedInput = true;
event.preventDefault();
}
};
@ -216,15 +237,14 @@
console.log(e);
}
window.addEventListener("keydown", handleControlD);
window.addEventListener("keydown", handleControlK);
window.addEventListener("keydown", handleEscape);
return () => {
window.removeEventListener("keydown", handleControlD);
window.removeEventListener("keydown", handleControlK);
window.removeEventListener("keydown", handleEscape);
};
});
let charNumber = 20;
$: {
if (searchBarModalChecked === true && typeof window !== "undefined") {
@ -238,7 +258,7 @@
$: {
if (searchBarModalChecked === false && typeof window !== "undefined") {
showSuggestions = searchQuery = "";
showSuggestions = inputValue = "";
document.body.classList?.remove("overflow-hidden");
}
}
@ -266,19 +286,113 @@
}
}
}
</script>
<div class="hidden sm:block w-full sm:max-w-[600px] grow">
<div >
<div class="relative flex items-center">
<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>
<Combobox.Root
items={searchBarData}
bind:inputValue
bind:touchedInput
>
<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
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 rounded-md border border-gray-500 px-2 py-0.5">
/
</div>
{/if}
</div>
</div>
{#if inputValue?.length > 0}
<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"
sideOffset={8}
>
{#each searchBarData as item}
<Combobox.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"
value={item?.symbol}
label={item?.name}
onclick={() => 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>
{:else}
<span class="block px-5 py-2 text-sm text-white">
No results found
</span>
{/each}
</Combobox.Content>
{/if}
</Combobox.Root>
</div>
</div>
</div>
<label
for="searchBarModal"
class="cursor-pointer p-2 sm:hover:bg-primary text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-md"
class="sm:hidden cursor-pointer p-2 sm:hover:bg-primary text-gray-300 sm:hover:text-white flex-shrink-0 flex items-center justify-center border border-gray-600 rounded-md"
>
<Search class="h-[20px] w-[20px]" />
</label>
<!--Start Desktop Searchbar-->
<!--Don't remove if since input.focus does not work anymore-->
{#if $screenWidth >= 640}
<input
type="checkbox"
id="searchBarModal"
@ -286,22 +400,39 @@
bind:checked={searchBarModalChecked}
/>
<dialog id="searchBarModal" class="modal modal-top z-[999]">
<dialog id="searchBarModal" class="modal p-3 sm:p-0">
<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"
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
for="searchBarModal"
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
>
</label>
<!-- Search layout -->
<div class="mt-5 sm:mt-0">
<div class="mt-8">
<div class="relative">
<label for="modal-search" class="sr-only">Search</label>
<input
id="modal-search"
class="rounded-md w-full text-white bg-[#09090B] border border-gray-600 focus:ring-transparent placeholder-gray-200 py-3 pl-10 pr-4"
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="Search Anything…"
bind:value={searchQuery}
bind:value={inputValue}
bind:this={inputElement}
on:input={search}
on:keydown={handleKeyDown}
@ -309,7 +440,7 @@
autocomplete="off"
/>
<button
on:click={() => searchBarTicker(searchQuery)}
on:click={() => searchBarTicker(inputValue)}
class="absolute inset-0 right-auto group"
type="submit"
aria-label="Search"
@ -347,20 +478,11 @@
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-[#09090B] sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white group'} w-full"
: '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="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">
<div class="flex flex-col">
<span class="text-blue-400">{item?.symbol}</span>
<span class="text-white"
>{item?.name.length > 150
@ -389,7 +511,7 @@
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-[#09090B] sm:hover:bg-primary rounded-md flex justify-start items-center p-2 text-white 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">
@ -432,191 +554,10 @@
</div>
</div>
<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-md 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>
<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'
: 'cursor-pointer bg-[#09090B] bg-opacity-[0.4] 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="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 && 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-[#09090B] bg-opacity-[0.4] 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 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 && 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="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-->
<!--End Drawer Sidewise for mobile-->

140
src/routes/+layout.svelte
View File

@ -11,7 +11,6 @@
import Footer from "$lib/components/Footer.svelte";
import Searchbar from "$lib/components/Searchbar.svelte";
import NotificationBell from "$lib/components/NotificationBell.svelte";
import { goto } from "$app/navigation";
//import PullToRefresh from '$lib/components/PullToRefresh.svelte';
//import DiscountBanner from '$lib/components/DiscountBanner.svelte';
@ -92,7 +91,7 @@
const output = event.data?.output;
notificationList = output?.notificationList;
hasUnreadElement = output?.hasUnreadElement;
$numberOfUnreadNotification = output?.numberOfUnreadNotification?.length;
numberOfUnreadNotification.set(output?.numberOfUnreadNotification?.length);
//pushNotification()
};
@ -164,7 +163,7 @@
(item?) => !item?.readed,
);
hasUnreadElement = numberOfUnreadNotification?.length !== 0 ? true : false;
$numberOfUnreadNotification = numberOfUnreadNotification?.length;
numberOfUnreadNotification.set(numberOfUnreadNotification?.length);
}
let Cookie;
@ -810,77 +809,78 @@
<span class="text-white font-semibold ml-2 text-lg">Stocknear</span>
</a>
<div class="relative ml-auto">
<!--
<Search class="absolute left-2.5 top-2.5 h-4 w-4 text-white" />
<Input
type="search"
placeholder="Search..."
class="w-full rounded-md bg-[#202327] placeholder-gray-400 border-none pl-8 md:w-[300px] xl:w-[700px] border-transparent focus:border-transparent focus:ring-0 "
autocomplete="off"
/>
-->
<Searchbar />
<NotificationBell {data} {hasUnreadElement} />
</div>
{#if data?.user}
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
size="icon"
class="overflow-hidden rounded-md bg-[#09090B] sm:hover:bg-primary border border-gray-600 w-10 h-10"
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
<div class="relative w-full flex flex-row justify-end sm:justify-between items-center">
<div class="sm:w-full lg:ml-16">
<Searchbar />
</div>
<NotificationBell {data} {hasUnreadElement} />
<div class="ml-3">
{#if data?.user}
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild let:builder>
<Button
size="icon"
class="overflow-hidden rounded-md bg-[#09090B] sm:hover:bg-primary border border-gray-600 w-10 h-10"
builders={[builder]}
>
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<a href="/profile" class="cursor-pointer">
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
My Account
</DropdownMenu.Item>
</a>
<DropdownMenu.Separator />
<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">
<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>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="end">
<a href="/profile" class="cursor-pointer ">
<DropdownMenu.Item class="sm:hover:bg-primary cursor-pointer">
<span class="text-start">Logout</span>
My Account
</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}
</a>
<DropdownMenu.Separator />
<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 class="flex w-full">