carousel in course home page and create filters in student page

package.json

@@ -11,15 +11,18 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.1.5",
     "lucide-react": "^0.383.0",
     "next": "14.2.3",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.52.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },

src/app/estudantes/page.tsx

 import { BannerCategory } from '@/components/banner-category'
 import { NavLinkCategory } from '@/components/nav-link-category'
+import SearchFilter from '@/components/search-filter'
 
 export default function Students() {
   return (
     <main>
-      <BannerCategory />
+      <BannerCategory title="Estudante" />
       <NavLinkCategory />
+      <SearchFilter />
     </main>
   )
 }

src/components/banner-category.tsx

-export function BannerCategory() {
+type BannerProps = {
+  title: string
+}
+export function BannerCategory({ title }: BannerProps) {
   return (
     <div className=" h-[300px] flex items-center justify-end bg-green-900">
       <div className="container">
-        <h1>ESTUDANTE</h1>
+        <h1>{title}</h1>
       </div>
     </div>
   )

src/components/course-category.tsx

@@ -8,9 +8,9 @@ import Link from 'next/link'
 export function CourseCategory() {
   return (
     <section className="hidden md:block">
-      <div className="container h-auto flex justify-center items-center my-20">
+      <div className="h-auto flex justify-center items-center my-20 px-6">
         <ul className="flex justify-center items-center gap-4">
-          <li className="max-w-[420px] bg-green-600 rounded-lg pb-4">
+          <li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
             <Link href="#" className="flex flex-col gap-4">
               <Image
                 src={ImageFast}
@@ -25,7 +25,7 @@ export function CourseCategory() {
               </p>
             </Link>
           </li>
-          <li className="max-w-[420px] bg-green-600 rounded-lg pb-4">
+          <li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
             <Link href="#" className="flex flex-col gap-4">
               <Image
                 src={ImageDeepen}
@@ -40,7 +40,7 @@ export function CourseCategory() {
               </p>
             </Link>
           </li>
-          <li className="max-w-[420px] bg-green-600 rounded-lg pb-4">
+          <li className="max-w-[472px] bg-green-600 rounded-lg pb-4">
             <Link href="#" className="flex flex-col gap-4">
               <Image
                 src={ImageCorporate}

src/components/courses.tsx

@@ -6,7 +6,75 @@ import { Input } from './ui/input'
 import { Calendar, Clock4, Search, User } from 'lucide-react'
 
 import ImageCoverCourse from '../../public/images/cover-course.png'
+import banner from '../../public/images/banner.png'
 import { NavLinkCategory } from './nav-link-category'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from './ui/carousel'
+
+type CoursesCardTypes = {
+  id: string
+  image: { src: string; width: number; height: number }
+  title: string
+  hours: string
+  category: string
+  calender: string
+}
+console.log(ImageCoverCourse)
+const coursesCard: CoursesCardTypes[] = [
+  {
+    id: '1',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'Estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '2',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'Estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '3',
+    image: banner,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'Estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '4',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'Estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '5',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'Estudante',
+    calender: 'Início imediato',
+  },
+  {
+    id: '6',
+    image: ImageCoverCourse,
+    title: 'Gestão em Saúde',
+    hours: '30 h / Curso rápido',
+    category: 'Estudante',
+    calender: 'Início imediato',
+  },
+]
 
 export function Courses() {
   return (
@@ -15,140 +83,47 @@ export function Courses() {
         <NavLinkCategory />
         <div className="flex justify-center items-center w-full md:w-1/2 mx-auto mb-8">
           <Input placeholder="O que você quer aprender hoje?" />
-          <Search />
-        </div>
-        <ul className="w-full flex justify-start xl:justify-center gap-6 overflow-x-auto">
-          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
-            <Link href="#">
-              <div className="relative">
-                <Image
-                  src={ImageCoverCourse}
-                  alt="Capa do curso"
-                  className="object-cover rounded-lg w-full h-auto"
-                />
-                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
-                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
-                </div>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <Clock4 size={16} />
-                <span className="text-sm">30 h / Curso rápido</span>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <User size={16} />
-                <span className="text-sm">Estudante</span>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <Calendar size={16} />
-                <span className="text-sm">Início imediato</span>
-              </div>
-            </Link>
-          </li>
-          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
-            <Link href="#">
-              <div className="relative">
-                <Image
-                  src={ImageCoverCourse}
-                  alt="Capa do curso"
-                  className="object-cover rounded-lg w-full h-auto"
-                />
-                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
-                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
-                </div>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <Clock4 size={16} />
-                <span className="text-sm">30 h / Curso rápido</span>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <User size={16} />
-                <span className="text-sm">Estudante</span>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <Calendar size={16} />
-                <span className="text-sm">Início imediato</span>
-              </div>
-            </Link>
-          </li>
-          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
-            <Link href="#">
-              <div className="relative">
-                <Image
-                  src={ImageCoverCourse}
-                  alt="Capa do curso"
-                  className="object-cover rounded-lg w-full h-auto"
-                />
-                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
-                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
-                </div>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <Clock4 size={16} />
-                <span className="text-sm">30 h / Curso rápido</span>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <User size={16} />
-                <span className="text-sm">Estudante</span>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <Calendar size={16} />
-                <span className="text-sm">Início imediato</span>
-              </div>
-            </Link>
-          </li>
-          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
-            <Link href="#">
-              <div className="relative">
-                <Image
-                  src={ImageCoverCourse}
-                  alt="Capa do curso"
-                  className="object-cover rounded-lg w-full h-auto"
-                />
-                <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
-                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
-                </div>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <Clock4 size={16} />
-                <span className="text-sm">30 h / Curso rápido</span>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <User size={16} />
-                <span className="text-sm">Estudante</span>
-              </div>
-              <div className="flex items-center gap-2 p-2">
-                <Calendar size={16} />
-                <span className="text-sm">Início imediato</span>
-              </div>
-            </Link>
-          </li>
-          <li className="flex flex-col bg-green-50 min-w-[240px] rounded-lg">
+          <Search size={24} />
+        </div>
+        <Carousel className="w-full flex justify-center">
+          <CarouselContent className="flex gap-2">
+            {coursesCard.map((course) => (
+              <CarouselItem
+                key={course.id}
+                className="basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5 bg-green-50 max-w-[240px] pl-0 rounded-lg ml-4"
+              >
                 <Link href="#">
                   <div className="relative">
                     <Image
-                  src={ImageCoverCourse}
+                      src={course.image.src}
+                      width={240}
+                      height={320}
                       alt="Capa do curso"
-                  className="object-cover rounded-lg w-full h-auto"
+                      className="object-cover rounded-lg w-[240px] h-[320px]"
                     />
                     <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end">
-                  <span className="pb-8 text-2xl">Gestão em Saúde</span>
+                      <span className="pb-8 text-2xl">{course.title}</span>
                     </div>
                   </div>
                   <div className="flex items-center gap-2 p-2">
                     <Clock4 size={16} />
-                <span className="text-sm">30 h / Curso rápido</span>
+                    <span className="text-sm">{course.hours}</span>
                   </div>
                   <div className="flex items-center gap-2 p-2">
                     <User size={16} />
-                <span className="text-sm">Estudante</span>
+                    <span className="text-sm">{course.category}</span>
                   </div>
                   <div className="flex items-center gap-2 p-2">
                     <Calendar size={16} />
-                <span className="text-sm">Início imediato</span>
+                    <span className="text-sm">{course.calender}</span>
                   </div>
                 </Link>
-          </li>
-        </ul>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
         <Button variant="secondary" className="uppercase mx-auto my-8" asChild>
           <Link href="#">Ver todos os cursos</Link>
         </Button>

src/components/search-filter.tsx

+import { Search } from 'lucide-react'
+import { Input } from './ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select'
+import { Label } from './ui/label'
+
+export default function SearchFilter() {
+  return (
+    <div className="container grid md:grid-cols-2 gap-8 items-end mb-8">
+      <div className="flex items-center max-w-[712px] flex-1">
+        <Input className="pr-8" />
+        <Search size={24} className="-ml-6" />
+      </div>
+      <div>
+        <Label>Filtrados por</Label>
+        <Select defaultValue="recent">
+          <SelectTrigger className="flex items-center max-w-[712px] flex-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="recent">Mais recentes</SelectItem>
+              <SelectItem value="fast">Cursos rápidos</SelectItem>
+              <SelectItem value="students">Estudantes</SelectItem>
+              <SelectItem value="immediate">Início imediato</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}

src/components/sign-up.tsx

+'use client'
+
 import Image from 'next/image'
 
 import signUpImage from '../../public/images/sign-up.png'
@@ -5,8 +7,21 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Button } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
+import { SubmitHandler, useForm } from 'react-hook-form'
+
+type FormSignUpTypes = {
+  name: string
+  email: string
+  whatsapp: string
+  interest: string
+  course: string
+}
 
 export function SignUp() {
+  const { register, handleSubmit } = useForm<FormSignUpTypes>()
+
+  const onSubmit: SubmitHandler<FormSignUpTypes> = (data) => console.log(data)
+
   return (
     <section className="w-full bg-gradient-to-r from-green-700 to-green-50 pb-6 md:py-6 md:pb-0">
       <div className="container overflow-hidden relative h-auto flex flex-col md:flex-row gap-2 justify-between items-center ">
@@ -22,40 +37,66 @@ export function SignUp() {
         />
         <Separator className="h-2 w-screen order-2 md:hidden -mt-3 bg-yellow-100" />
         <form
-          action=""
+          onSubmit={handleSubmit(onSubmit)}
           className="w-full md:w-[600px] flex flex-col gap-8 order-4"
         >
           <div>
             <Label htmlFor="name" className="text-gray-300 text-xs">
               Nome
             </Label>
-            <Input type="text" id="name" placeholder="Digite aqui" />
+            <Input
+              type="text"
+              id="name"
+              placeholder="Digite aqui"
+              {...register('name')}
+            />
           </div>
           <div>
             <Label htmlFor="email" className="text-gray-300 text-xs">
               E-mail
             </Label>
-            <Input type="email" id="email" placeholder="Digite aqui" />
+            <Input
+              type="email"
+              id="email"
+              placeholder="Digite aqui"
+              {...register('email')}
+            />
           </div>
           <div>
             <Label htmlFor="whatsapp" className="text-gray-300 text-xs">
               Whatsapp
             </Label>
-            <Input type="number" id="whatsapp" placeholder="Digite aqui" />
+            <Input
+              type="number"
+              id="whatsapp"
+              placeholder="Digite aqui"
+              {...register('whatsapp')}
+            />
           </div>
           <div>
             <Label htmlFor="interest" className="text-gray-300 text-xs">
               Área de interesse
             </Label>
-            <Input type="text" id="interest" placeholder="Digite aqui" />
+            <Input
+              type="text"
+              id="interest"
+              placeholder="Digite aqui"
+              {...register('interest')}
+            />
           </div>
           <div>
             <Label htmlFor="course" className="text-gray-300 text-xs">
               Curso desejado
             </Label>
-            <Input type="text" id="course" placeholder="Digite aqui" />
+            <Input
+              type="text"
+              id="course"
+              placeholder="Digite aqui"
+              {...register('course')}
+            />
           </div>
           <Button
+            type="submit"
             variant="secondary"
             className="uppercase max-w-32 mx-auto md:mb-6"
           >

src/components/ui/carousel.tsx

+'use client'
+
+import * as React from 'react'
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from 'embla-carousel-react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = 'horizontal',
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === 'horizontal' ? 'x' : 'y',
+      },
+      plugins,
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'ArrowLeft') {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === 'ArrowRight') {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext],
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on('reInit', onSelect)
+      api.on('select', onSelect)
+
+      return () => {
+        api?.off('select', onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn('relative', className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  },
+)
+Carousel.displayName = 'Carousel'
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = 'CarouselContent'
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        'min-w-0 shrink-0 grow-0 basis-full',
+        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+        className,
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = 'CarouselItem'
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full border-none text-green-400',
+        orientation === 'horizontal'
+          ? '-left-8 top-1/2 -translate-y-1/2'
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ChevronLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = 'CarouselPrevious'
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        'absolute h-8 w-8 rounded-full border-none text-green-400',
+        orientation === 'horizontal'
+          ? '-right-8 top-1/2 -translate-y-1/2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ChevronRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = 'CarouselNext'
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full border border-t-0 border-x-0 border-gray-300 px-2 py-2 text-md text-white ile:border-0 bg-transparent file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 focus-visible:outline-none focus-visible:border-b-white disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full border border-t-0 border-x-0 border-gray-300 px-2 py-2 text-md text-white ile:border-0 bg-transparent file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 focus-visible:outline-none focus-visible:border-b-white focus-visible:border-b-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

src/components/ui/select.tsx

+'use client'
+
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-10 w-full items-center justify-between border border-t-0 border-x-0 border-gray-300 px-2 py-2 text-md text-white ile:border-0 bg-transparent file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 focus-visible:outline-none focus-visible:border-b-white focus-visible:border-b-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground 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',
+        position === 'popper' &&
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}