WaledRashed24/comics

1"use client"2 3import * as React from "react"4import * as SelectPrimitive from "@radix-ui/react-select"5import { Check, ChevronDown } from "lucide-react"6 7import { cn } from "@/lib/utils"8 9const Select = SelectPrimitive.Root10 11const SelectGroup = SelectPrimitive.Group12 13const SelectValue = SelectPrimitive.Value14 15const SelectTrigger = React.forwardRef<16  React.ElementRef<typeof SelectPrimitive.Trigger>,17  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>18>(({ className, children, ...props }, ref) => (19  <SelectPrimitive.Trigger20    ref={ref}21    className={cn(22      "flex h-10 w-full items-center justify-between rounded-md border border-stone-200 border-stone-200 bg-transparent px-3 py-2 text-base ring-offset-white placeholder:text-stone-500 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-stone-800 dark:border-stone-800 dark:ring-offset-stone-950 dark:placeholder:text-stone-400 dark:focus:ring-stone-800",23      className24    )}25    {...props}26  >27    {children}28    <SelectPrimitive.Icon asChild>29      <ChevronDown className="h-4 w-4 opacity-50" />30    </SelectPrimitive.Icon>31  </SelectPrimitive.Trigger>32))33SelectTrigger.displayName = SelectPrimitive.Trigger.displayName34 35const SelectContent = React.forwardRef<36  React.ElementRef<typeof SelectPrimitive.Content>,37  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>38>(({ className, children, position = "popper", ...props }, ref) => (39  <SelectPrimitive.Portal>40    <SelectPrimitive.Content41      ref={ref}42      className={cn(43        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-stone-200 bg-white text-stone-950 shadow-md 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 dark:border-stone-800 dark:bg-stone-950 dark:text-stone-50",44        position === "popper" &&45          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",46        className47      )}48      position={position}49      {...props}50    >51      <SelectPrimitive.Viewport52        className={cn(53          "p-1",54          position === "popper" &&55            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"56        )}57      >58        {children}59      </SelectPrimitive.Viewport>60    </SelectPrimitive.Content>61  </SelectPrimitive.Portal>62))63SelectContent.displayName = SelectPrimitive.Content.displayName64 65const SelectLabel = React.forwardRef<66  React.ElementRef<typeof SelectPrimitive.Label>,67  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>68>(({ className, ...props }, ref) => (69  <SelectPrimitive.Label70    ref={ref}71    className={cn("py-1.5 pl-8 pr-2 text-base font-semibold", className)}72    {...props}73  />74))75SelectLabel.displayName = SelectPrimitive.Label.displayName76 77const SelectItem = React.forwardRef<78  React.ElementRef<typeof SelectPrimitive.Item>,79  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>80>(({ className, children, ...props }, ref) => (81  <SelectPrimitive.Item82    ref={ref}83    className={cn(84      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-base outline-none focus:bg-stone-100 focus:text-stone-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-stone-800 dark:focus:text-stone-50",85      className86    )}87    {...props}88  >89    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">90      <SelectPrimitive.ItemIndicator>91        <Check className="h-4 w-4" />92      </SelectPrimitive.ItemIndicator>93    </span>94 95    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>96  </SelectPrimitive.Item>97))98SelectItem.displayName = SelectPrimitive.Item.displayName99 100const SelectSeparator = React.forwardRef<101  React.ElementRef<typeof SelectPrimitive.Separator>,102  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>103>(({ className, ...props }, ref) => (104  <SelectPrimitive.Separator105    ref={ref}106    className={cn("-mx-1 my-1 h-px bg-stone-100 dark:bg-stone-800", className)}107    {...props}108  />109))110SelectSeparator.displayName = SelectPrimitive.Separator.displayName111 112export {113  Select,114  SelectGroup,115  SelectValue,116  SelectTrigger,117  SelectContent,118  SelectLabel,119  SelectItem,120  SelectSeparator,121}122