mazyar/tm_panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(select): enhance dropdown positioning and filtering functionality

Browse Source 
- Introduced a new measureDropdownRect function to accurately position the dropdown menu based on viewport dimensions, improving usability.
- Updated the Select component to utilize the new dropdown measurement logic, ensuring consistent placement above or below the trigger.
- Refactored panelRect state management to use a more structured DropdownRect type, enhancing type safety and clarity.
- Improved event handling for dropdown visibility and positioning during scroll and resize events, ensuring a responsive user experience.
- Adjusted styling in related components for better alignment and visual consistency.
This commit is contained in:
AmirReza Jamali
2026-05-17 10:15:25 +03:30
parent de92137ec4
commit 0d8300493e
4 changed files with 133 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/tenders/[details]/components/tender-details-header.tsx
+7 -4
View File
@@ -43,16 +43,19 @@ export function TenderDetailsHeader({
<div className="flex w-full min-w-0 shrink-0 flex-col">
<div
className={cn(
"relative overflow-hidden rounded-[1.35rem] border border-stroke/55 bg-white/75 p-4 shadow-[0_12px_42px_-14px_rgba(15,23,42,0.14),0_0_0_1px_rgba(87,80,241,0.05)] backdrop-blur-md dark:border-white/[0.09] dark:bg-gradient-to-br dark:from-dark-2/95 dark:via-dark-3/55 dark:to-violet-600/[0.12] dark:shadow-[0_18px_50px_-18px_rgba(0,0,0,0.5),inset_0_1px_0_0_rgba(255,255,255,0.04)] sm:p-5",
"relative overflow-hidden rounded-[1.35rem] border border-stroke/55 p-4 sm:p-5",
"bg-white/75 shadow-[0_12px_42px_-14px_rgba(15,23,42,0.14),0_0_0_1px_rgba(87,80,241,0.05)] backdrop-blur-md",
"dark:border-white/[0.08] dark:bg-transparent dark:bg-gradient-to-br dark:from-dark-2 dark:via-dark-3 dark:to-violet-950/35",
"dark:shadow-none dark:backdrop-blur-none",
)}
>
<div
className="pointer-events-none absolute -right-6 -top-10 h-28 w-28 rounded-full bg-gradient-to-br from-primary/25 to-violet-500/10 blur-2xl dark:from-violet-500/30 dark:to-primary/5"
className="pointer-events-none absolute -right-6 -top-10 h-28 w-28 rounded-full bg-gradient-to-br from-primary/25 to-violet-500/10 blur-2xl dark:from-violet-500/15 dark:to-transparent dark:opacity-50"
aria-hidden
/>
<div className="relative space-y-4">
<div className="flex gap-3">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-primary/20 to-violet-600/10 text-primary shadow-inner ring-1 ring-primary/15 dark:from-primary/30 dark:to-violet-500/15 dark:ring-white/10">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-primary/20 to-violet-600/10 text-primary shadow-inner ring-1 ring-primary/15 dark:from-primary/30 dark:to-violet-500/15 dark:shadow-none dark:ring-white/10">
<GlobeIcon className="h-5 w-5 opacity-95" />
</div>
<div className="min-w-0 flex-1 pt-0.5">
@@ -79,7 +82,7 @@ export function TenderDetailsHeader({
className={cn(
"w-full shrink-0 space-y-0",
"[&_label]:sr-only",
"[&_button]:h-11 [&_button]:min-h-[2.75rem] [&_button]:rounded-full [&_button]:border-stroke/60 [&_button]:bg-white/95 [&_button]:py-0 [&_button]:text-sm [&_button]:shadow-sm dark:[&_button]:border-white/10 dark:[&_button]:bg-dark-2/92",
"[&_button]:h-11 [&_button]:min-h-[2.75rem] [&_button]:rounded-full [&_button]:border-stroke/60 [&_button]:bg-white/95 [&_button]:py-0 [&_button]:text-sm [&_button]:shadow-sm dark:[&_button]:border-white/10 dark:[&_button]:bg-dark-2 dark:[&_button]:shadow-none",
)}
value={selectedLanguage}
onChange={onLanguageChange as LanguageSelectOnChange}