mirror of
https://github.com/Dvorinka/Trackeep.git
synced 2026-06-04 04:22:57 +00:00
80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import { ChevronDown } from 'lucide-solid';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface SelectProps {
|
|
value?: string;
|
|
onValueChange?: (value: string) => void;
|
|
children?: any;
|
|
class?: string;
|
|
}
|
|
|
|
export function Select(props: SelectProps) {
|
|
return props.children;
|
|
}
|
|
|
|
export interface SelectTriggerProps {
|
|
children?: any;
|
|
class?: string;
|
|
}
|
|
|
|
export function SelectTrigger(props: SelectTriggerProps) {
|
|
return (
|
|
<div class={cn(
|
|
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
props.class
|
|
)}>
|
|
{props.children}
|
|
<ChevronDown class="h-4 w-4 opacity-50" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface SelectValueProps {
|
|
placeholder?: string;
|
|
value?: string;
|
|
}
|
|
|
|
export function SelectValue(props: SelectValueProps) {
|
|
return <span>{props.value || props.placeholder}</span>;
|
|
}
|
|
|
|
export interface SelectContentProps {
|
|
children?: any;
|
|
class?: string;
|
|
}
|
|
|
|
export function SelectContent(props: SelectContentProps) {
|
|
return (
|
|
<div class={cn(
|
|
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
|
|
props.class
|
|
)}>
|
|
<div class="p-1">
|
|
{props.children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface SelectItemProps {
|
|
value: string;
|
|
children: any;
|
|
onClick?: (value: string) => void;
|
|
class?: string;
|
|
}
|
|
|
|
export function SelectItem(props: SelectItemProps) {
|
|
return (
|
|
<div
|
|
class={cn(
|
|
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent cursor-pointer",
|
|
props.class
|
|
)}
|
|
onClick={() => props.onClick?.(props.value)}
|
|
>
|
|
{props.children}
|
|
</div>
|
|
);
|
|
}
|