Glass Select

1"use client"
2 
3import * as React from "react"
4import * as SelectPrimitive from "@radix-ui/react-select"
5import { Check, ChevronDown, ChevronUp } from "lucide-react"
6import { cn } from "@/lib/utils"
7 
8const GlassSelect = SelectPrimitive.Root
9 
10const GlassSelectGroup = SelectPrimitive.Group
11 
12const GlassSelectValue = SelectPrimitive.Value
13 
14const GlassSelectTrigger = React.forwardRef<
15  React.ElementRef<typeof SelectPrimitive.Trigger>,
16  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
17>(({ className, children, ...props }, ref) => (
18  <SelectPrimitive.Trigger
19    ref={ref}
20    className={cn(
21      "flex h-10 w-full items-center justify-between gap-2 rounded-xl px-4 py-2 text-sm",
22      "bg-white/10 backdrop-blur-xl border border-white/20",
23      "text-white placeholder:text-white/40",
24      "shadow-[0_4px_16px_rgba(0,0,0,0.2)]",
25      "transition-all duration-300",
26      "focus:outline-none focus:border-white/40 focus:bg-white/15",
27      "focus:ring-2 focus:ring-cyan-400/30 focus:ring-offset-0",
28      "disabled:cursor-not-allowed disabled:opacity-50",
29      "[&>span]:line-clamp-1",
30      className,
31    )}
32    {...props}
33  >
34    {children}
35    <SelectPrimitive.Icon asChild>
36      <ChevronDown className="h-4 w-4 text-white/60" />
37    </SelectPrimitive.Icon>
38  </SelectPrimitive.Trigger>
39))
40GlassSelectTrigger.displayName = SelectPrimitive.Trigger.displayName
41 
42const GlassSelectScrollUpButton = React.forwardRef<
43  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
44  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
45>(({ className, ...props }, ref) => (
46  <SelectPrimitive.ScrollUpButton
47    ref={ref}
48    className={cn("flex cursor-default items-center justify-center py-1", className)}
49    {...props}
50  >
51    <ChevronUp className="h-4 w-4 text-white/60" />
52  </SelectPrimitive.ScrollUpButton>
53))
54GlassSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
55 
56const GlassSelectScrollDownButton = React.forwardRef<
57  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
58  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
59>(({ className, ...props }, ref) => (
60  <SelectPrimitive.ScrollDownButton
61    ref={ref}
62    className={cn("flex cursor-default items-center justify-center py-1", className)}
63    {...props}
64  >
65    <ChevronDown className="h-4 w-4 text-white/60" />
66  </SelectPrimitive.ScrollDownButton>
67))
68GlassSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
69 
70// … truncated