Add search functionality to Sidebar and create Input component

src/components/Sidebar.tsx

@@ -1,10 +1,11 @@
 'use client'
 
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import { useDrag } from 'react-dnd'
 import { Button } from "@/components/ui/button"
 import { roboto } from '../app/fonts'
 import { useElements } from '../context/ElementsContext'
+import { Input } from "@/components/ui/input"
 
 interface DraggableElementProps {
   type: string
@@ -40,20 +41,41 @@ const DraggableElement: React.FC<DraggableElementProps> = ({ type, content }) =>
 
 export const Sidebar: React.FC = () => {
   const { elements, getElementContent } = useElements()
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const filteredElements = Array.from(elements.values()).filter(element => 
+    getElementContent(element.type).toLowerCase().includes(searchQuery.toLowerCase())
+  )
 
   return (
-    <div className="w-64 h-full bg-gray-100 p-4 overflow-y-auto fixed top-0 right-0">
-      <h2 className="text-xl font-bold mb-4">Elements</h2>
-      <div className="flex flex-wrap gap-2">
-        {Array.from(elements.values()).map((element) => (
-          <DraggableElement 
-            key={element.type} 
-            type={element.type} 
-            content={getElementContent(element.type)} 
-          />
-        ))}
+    <div className="w-[350px] h-full flex flex-col fixed top-0 right-0 border-l-2 border-l-rgb(200,200,200)">
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex flex-wrap gap-2">
+          {filteredElements.map((element) => (
+            <DraggableElement 
+              key={element.type} 
+              type={element.type} 
+              content={getElementContent(element.type)} 
+            />
+          ))}
+        </div>
+      </div>
+      <div className="border-t">
+        {/* <div className="flex w-full">
+          <Button variant="ghost" className="w-1/2 rounded-none border-r">
+            Discoveries
+          </Button>
+          <Button variant="ghost" className="w-1/2 rounded-none">
+            Sort by Time
+          </Button>
+        </div> */}
+        <Input 
+          className="w-full px-4 py-3 rounded-none" 
+          placeholder="Search..." 
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
       </div>
     </div>
   )
-}
-
+}

src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }