Expounded on select.tsx to make it fully functional

components/ui/select.tsx

@@ -7,3 +7,24 @@ export function Select({ children, ...props }: React.SelectHTMLAttributes<HTMLSe
     </select>
   )
 }
+
+export function SelectTrigger({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button {...props} className="border border-gray-300 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500">
+      {children}
+    </button>
+  )
+}
+
+export function SelectContent({ children }: { children: React.ReactNode }) {
+  return <div className="absolute bg-white shadow-md rounded-md p-2">{children}</div>
+}
+
+export function SelectItem({ children, ...props }: React.OptionHTMLAttributes<HTMLOptionElement>) {
+  return <option {...props}>{children}</option>
+}
+
+export function SelectValue({ children }: { children: React.ReactNode }) {
+  return <span>{children}</span>
+}
+