feat(agents): Add identity and soul template fields to board creation
This commit is contained in:
Abhimanyu Saharan
@@ -14,8 +14,8 @@ export function LandingHero() {
|
||||
<SignedOut>
|
||||
<SignInButton
|
||||
mode="modal"
|
||||
forceRedirectUrl="/boards"
|
||||
signUpForceRedirectUrl="/boards"
|
||||
forceRedirectUrl="/onboarding"
|
||||
signUpForceRedirectUrl="/onboarding"
|
||||
>
|
||||
<Button size="lg" className="w-full sm:w-auto">
|
||||
Sign in to open mission control
|
||||
|
||||
91
frontend/src/components/organisms/UserMenu.tsx
Normal file
91
frontend/src/components/organisms/UserMenu.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { SignOutButton, useUser } from "@clerk/nextjs";
|
||||
import { LogOut } from "lucide-react";
|
||||
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function UserMenu({ className }: { className?: string }) {
|
||||
const { user } = useUser();
|
||||
if (!user) return null;
|
||||
|
||||
const avatarUrl = user.imageUrl ?? null;
|
||||
const avatarLabelSource = user.firstName ?? user.username ?? user.id ?? "U";
|
||||
const avatarLabel = avatarLabelSource.slice(0, 1).toUpperCase();
|
||||
const displayName =
|
||||
user.fullName ?? user.firstName ?? user.username ?? "Account";
|
||||
const displayEmail = user.primaryEmailAddress?.emailAddress ?? "";
|
||||
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex h-12 items-center gap-2 rounded-lg px-2.5 text-gray-900 transition hover:bg-gray-100",
|
||||
className,
|
||||
)}
|
||||
aria-label="Open user menu"
|
||||
>
|
||||
<span className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-gray-100 text-sm font-semibold text-gray-900">
|
||||
{avatarUrl ? (
|
||||
<Image
|
||||
src={avatarUrl}
|
||||
alt="User avatar"
|
||||
width={40}
|
||||
height={40}
|
||||
className="h-10 w-10 object-cover"
|
||||
/>
|
||||
) : (
|
||||
avatarLabel
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
className="w-64 rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-0 shadow-lg"
|
||||
>
|
||||
<div className="border-b border-[color:var(--border)] px-4 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[color:var(--surface-muted)] text-sm font-semibold text-strong">
|
||||
{avatarUrl ? (
|
||||
<Image
|
||||
src={avatarUrl}
|
||||
alt="User avatar"
|
||||
width={40}
|
||||
height={40}
|
||||
className="h-10 w-10 object-cover"
|
||||
/>
|
||||
) : (
|
||||
avatarLabel
|
||||
)}
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-semibold text-strong">
|
||||
{displayName}
|
||||
</div>
|
||||
{displayEmail ? (
|
||||
<div className="truncate text-xs text-muted">{displayEmail}</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2">
|
||||
<SignOutButton>
|
||||
<button
|
||||
type="button"
|
||||
className="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm font-semibold text-strong transition hover:bg-[color:var(--surface-strong)]"
|
||||
>
|
||||
<LogOut className="h-4 w-4 text-[color:var(--text-quiet)]" />
|
||||
Sign out
|
||||
</button>
|
||||
</SignOutButton>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
@@ -2,9 +2,10 @@
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import { SignedIn, UserButton } from "@clerk/nextjs";
|
||||
import { SignedIn } from "@clerk/nextjs";
|
||||
|
||||
import { BrandMark } from "@/components/atoms/BrandMark";
|
||||
import { UserMenu } from "@/components/organisms/UserMenu";
|
||||
|
||||
export function DashboardShell({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
@@ -14,12 +15,10 @@ export function DashboardShell({ children }: { children: ReactNode }) {
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="relative flex min-h-screen w-full flex-col">
|
||||
<header className="flex flex-wrap items-center justify-between gap-4 border-b border-[color:var(--border)] bg-[color:rgba(244,246,250,0.8)] px-6 py-5 backdrop-blur">
|
||||
<header className="flex flex-wrap items-center justify-between gap-4 border-b border-[color:var(--border)] bg-[color:rgba(244,246,250,0.8)] px-6 py-3 backdrop-blur">
|
||||
<BrandMark />
|
||||
<SignedIn>
|
||||
<div className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-2 py-1 shadow-sm">
|
||||
<UserButton />
|
||||
</div>
|
||||
<UserMenu />
|
||||
</SignedIn>
|
||||
</header>
|
||||
<div className="flex-1 px-6 py-6">
|
||||
|
||||
@@ -2,9 +2,10 @@
|
||||
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
import { SignedIn, UserButton } from "@clerk/nextjs";
|
||||
import { SignedIn } from "@clerk/nextjs";
|
||||
|
||||
import { BrandMark } from "@/components/atoms/BrandMark";
|
||||
import { UserMenu } from "@/components/organisms/UserMenu";
|
||||
|
||||
export function LandingShell({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
@@ -27,9 +28,7 @@ export function LandingShell({ children }: { children: ReactNode }) {
|
||||
<header className="flex items-center justify-between gap-4">
|
||||
<BrandMark />
|
||||
<SignedIn>
|
||||
<div className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-2 py-1 shadow-sm">
|
||||
<UserButton />
|
||||
</div>
|
||||
<UserMenu />
|
||||
</SignedIn>
|
||||
</header>
|
||||
<main>{children}</main>
|
||||
|
||||
133
frontend/src/components/ui/command.tsx
Normal file
133
frontend/src/components/ui/command.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Command as CommandPrimitive } from "cmdk";
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Command = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Command.displayName = CommandPrimitive.displayName;
|
||||
|
||||
const CommandInput = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Input>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="border-b border-slate-200 p-2" cmdk-input-wrapper="">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-slate-400" />
|
||||
<CommandPrimitive.Input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"w-full rounded-md border border-slate-300 bg-white py-2 pl-8 pr-3 text-sm text-slate-900 placeholder:text-slate-500 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
));
|
||||
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
||||
|
||||
const CommandList = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.List
|
||||
ref={ref}
|
||||
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandList.displayName = CommandPrimitive.List.displayName;
|
||||
|
||||
const CommandEmpty = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Empty>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
|
||||
>((props, ref) => (
|
||||
<CommandPrimitive.Empty
|
||||
ref={ref}
|
||||
className="py-6 text-center text-sm"
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
||||
|
||||
const CommandGroup = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Group>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Group
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
||||
|
||||
const CommandSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
||||
|
||||
const CommandItem = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
||||
|
||||
const CommandShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
CommandShortcut.displayName = "CommandShortcut";
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandSeparator,
|
||||
CommandShortcut,
|
||||
};
|
||||
215
frontend/src/components/ui/dropdown-select.tsx
Normal file
215
frontend/src/components/ui/dropdown-select.tsx
Normal file
@@ -0,0 +1,215 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { Check, ChevronDown } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
|
||||
export type DropdownSelectOption = {
|
||||
value: string;
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
icon?: React.ElementType<{ className?: string }>;
|
||||
iconClassName?: string;
|
||||
};
|
||||
|
||||
type DropdownSelectProps = {
|
||||
value?: string;
|
||||
onValueChange: (value: string) => void;
|
||||
options: DropdownSelectOption[];
|
||||
placeholder?: string;
|
||||
ariaLabel: string;
|
||||
disabled?: boolean;
|
||||
triggerClassName?: string;
|
||||
contentClassName?: string;
|
||||
itemClassName?: string;
|
||||
searchEnabled?: boolean;
|
||||
searchPlaceholder?: string;
|
||||
emptyMessage?: string;
|
||||
};
|
||||
|
||||
const resolvePlaceholder = (ariaLabel: string, placeholder?: string) => {
|
||||
if (placeholder) {
|
||||
return placeholder;
|
||||
}
|
||||
const trimmed = ariaLabel.trim();
|
||||
if (!trimmed) {
|
||||
return "Select an option";
|
||||
}
|
||||
return trimmed.endsWith("...") ? trimmed : `${trimmed}...`;
|
||||
};
|
||||
|
||||
const resolveSearchPlaceholder = (
|
||||
ariaLabel: string,
|
||||
searchPlaceholder?: string,
|
||||
) => {
|
||||
if (searchPlaceholder) {
|
||||
return searchPlaceholder;
|
||||
}
|
||||
const cleaned = ariaLabel.replace(/^select\\s+/i, "").trim();
|
||||
if (!cleaned) {
|
||||
return "Search...";
|
||||
}
|
||||
const value = `Search ${cleaned}`;
|
||||
return value.endsWith("...") ? value : `${value}...`;
|
||||
};
|
||||
|
||||
export default function DropdownSelect({
|
||||
value,
|
||||
onValueChange,
|
||||
options,
|
||||
placeholder,
|
||||
ariaLabel,
|
||||
disabled = false,
|
||||
triggerClassName,
|
||||
contentClassName,
|
||||
itemClassName,
|
||||
searchEnabled = true,
|
||||
searchPlaceholder,
|
||||
emptyMessage,
|
||||
}: DropdownSelectProps) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const [searchValue, setSearchValue] = React.useState("");
|
||||
const listRef = React.useRef<HTMLDivElement | null>(null);
|
||||
const selectedOption = options.find((option) => option.value === value);
|
||||
const resolvedPlaceholder = resolvePlaceholder(ariaLabel, placeholder);
|
||||
const triggerLabel = selectedOption?.label ?? value ?? "";
|
||||
const SelectedIcon = selectedOption?.icon;
|
||||
const selectedIconClassName = selectedOption?.iconClassName;
|
||||
const showPlaceholder = !triggerLabel;
|
||||
const resolvedSearchPlaceholder = searchEnabled
|
||||
? resolveSearchPlaceholder(ariaLabel, searchPlaceholder)
|
||||
: "";
|
||||
|
||||
const handleOpenChange = (nextOpen: boolean) => {
|
||||
setOpen(nextOpen);
|
||||
if (!nextOpen) {
|
||||
setSearchValue("");
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (nextValue: string) => {
|
||||
if (nextValue !== value) {
|
||||
onValueChange(nextValue);
|
||||
}
|
||||
handleOpenChange(false);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!open) {
|
||||
return;
|
||||
}
|
||||
if (listRef.current) {
|
||||
listRef.current.scrollTop = 0;
|
||||
}
|
||||
}, [open, searchValue]);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={handleOpenChange}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={ariaLabel}
|
||||
aria-expanded={open}
|
||||
aria-haspopup="listbox"
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
"inline-flex h-10 w-auto cursor-pointer items-center justify-between gap-2 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
|
||||
open && "bg-slate-50",
|
||||
triggerClassName,
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"flex min-w-0 items-center gap-2 truncate",
|
||||
showPlaceholder && "text-slate-500",
|
||||
)}
|
||||
>
|
||||
{SelectedIcon ? (
|
||||
<SelectedIcon
|
||||
className={cn("h-4 w-4 text-slate-600", selectedIconClassName)}
|
||||
/>
|
||||
) : null}
|
||||
<span className="truncate">
|
||||
{showPlaceholder ? resolvedPlaceholder : triggerLabel}
|
||||
</span>
|
||||
</span>
|
||||
<ChevronDown
|
||||
className={cn(
|
||||
"h-4 w-4 shrink-0 text-slate-400 transition-transform",
|
||||
open && "rotate-180",
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align="start"
|
||||
sideOffset={6}
|
||||
className={cn(
|
||||
"w-[var(--radix-popover-trigger-width)] min-w-[12rem] overflow-hidden rounded-md border border-slate-200 bg-white p-0 text-slate-900 shadow-lg",
|
||||
contentClassName,
|
||||
)}
|
||||
>
|
||||
<Command label={ariaLabel} className="w-full">
|
||||
{searchEnabled ? (
|
||||
<CommandInput
|
||||
value={searchValue}
|
||||
onValueChange={setSearchValue}
|
||||
placeholder={resolvedSearchPlaceholder}
|
||||
autoFocus
|
||||
className="text-sm"
|
||||
/>
|
||||
) : null}
|
||||
<CommandList ref={listRef} className="max-h-64 p-1">
|
||||
<CommandEmpty className="px-3 py-6 text-center text-sm text-slate-500">
|
||||
{emptyMessage ?? "No results found."}
|
||||
</CommandEmpty>
|
||||
{options.map((option) => {
|
||||
const isSelected = value === option.value;
|
||||
const OptionIcon = option.icon;
|
||||
return (
|
||||
<CommandItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
keywords={[option.label, option.value]}
|
||||
disabled={option.disabled}
|
||||
onSelect={handleSelect}
|
||||
className={cn(
|
||||
"flex items-center justify-between gap-2 rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors data-[selected=true]:bg-gray-50 data-[selected=true]:text-gray-900",
|
||||
isSelected && "font-semibold",
|
||||
!isSelected && "hover:bg-gray-50",
|
||||
itemClassName,
|
||||
)}
|
||||
>
|
||||
<span className="flex min-w-0 items-center gap-2">
|
||||
{OptionIcon ? (
|
||||
<OptionIcon
|
||||
className={cn(
|
||||
"h-4 w-4",
|
||||
isSelected ? "text-gray-700" : "text-gray-500",
|
||||
option.iconClassName,
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
<span className="truncate font-medium">{option.label}</span>
|
||||
</span>
|
||||
{isSelected ? (
|
||||
<Check className="h-4 w-4 text-gray-400" />
|
||||
) : null}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
31
frontend/src/components/ui/popover.tsx
Normal file
31
frontend/src/components/ui/popover.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Popover = PopoverPrimitive.Root;
|
||||
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||
const PopoverAnchor = PopoverPrimitive.Anchor;
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
"z-50 w-72 rounded-md border border-popover bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
));
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||
62
frontend/src/components/ui/searchable-select.tsx
Normal file
62
frontend/src/components/ui/searchable-select.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
"use client";
|
||||
|
||||
import DropdownSelect, {
|
||||
type DropdownSelectOption,
|
||||
} from "@/components/ui/dropdown-select";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type SearchableSelectOption = DropdownSelectOption;
|
||||
|
||||
type SearchableSelectProps = {
|
||||
value?: string;
|
||||
onValueChange: (value: string) => void;
|
||||
options: SearchableSelectOption[];
|
||||
placeholder?: string;
|
||||
ariaLabel: string;
|
||||
disabled?: boolean;
|
||||
triggerClassName?: string;
|
||||
contentClassName?: string;
|
||||
itemClassName?: string;
|
||||
searchEnabled?: boolean;
|
||||
searchPlaceholder?: string;
|
||||
emptyMessage?: string;
|
||||
};
|
||||
|
||||
const baseTriggerClassName =
|
||||
"w-auto h-auto rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-left text-sm font-semibold text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 focus:border-gray-900 focus:ring-4 focus:ring-gray-100";
|
||||
const baseContentClassName =
|
||||
"rounded-xl border-2 border-gray-200 bg-white shadow-xl";
|
||||
const baseItemClassName =
|
||||
"px-4 py-3 text-sm text-gray-700 transition-colors data-[selected=true]:bg-gray-50 data-[selected=true]:text-gray-900 data-[selected=true]:font-semibold hover:bg-gray-50";
|
||||
|
||||
export default function SearchableSelect({
|
||||
value,
|
||||
onValueChange,
|
||||
options,
|
||||
placeholder,
|
||||
ariaLabel,
|
||||
disabled = false,
|
||||
triggerClassName,
|
||||
contentClassName,
|
||||
itemClassName,
|
||||
searchEnabled,
|
||||
searchPlaceholder,
|
||||
emptyMessage,
|
||||
}: SearchableSelectProps) {
|
||||
return (
|
||||
<DropdownSelect
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
options={options}
|
||||
placeholder={placeholder}
|
||||
ariaLabel={ariaLabel}
|
||||
disabled={disabled}
|
||||
triggerClassName={cn(baseTriggerClassName, triggerClassName)}
|
||||
contentClassName={cn(baseContentClassName, contentClassName)}
|
||||
itemClassName={cn(baseItemClassName, itemClassName)}
|
||||
searchEnabled={searchEnabled}
|
||||
searchPlaceholder={searchPlaceholder}
|
||||
emptyMessage={emptyMessage}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user