Add search bar

Signed-off-by: GitHub <noreply@github.com>

Author: ryanlua

src/Components/SearchBar.luau

@@ -0,0 +1,44 @@
+--!strict
+
+local React = require("../Packages/React")
+local constants = require("../Constants")
+
+local function SearchBarTextBox()
+	return React.createElement("Frame", {
+		Size = UDim2.new(0, 190, 0, 30),
+		BackgroundColor3 = constants.theme.backgroundColor,
+		BackgroundTransparency = constants.theme.containerBackgroundTransparency,
+	}, {
+		React.createElement("UICorner", {
+			CornerRadius = constants.theme.cornerRadiusSmall,
+		}),
+	}, {
+		React.createElement("UIPadding", {
+			PaddingBottom = constants.theme.paddingLarge,
+			PaddingLeft = constants.theme.paddingLarge,
+			PaddingRight = UDim.new(0, 28),
+			PaddingTop = constants.theme.paddingLarge,
+		}),
+	}, {
+		React.createElement("UIStroke", {
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+			Color = constants.theme.containerStrokeColor,
+			Transparency = constants.theme.containerStrokeTransparency,
+		}),
+	}, {
+		React.createElement("TextBox", {
+			BackgroundTransparency = 1,
+			Size = UDim2.new(1, 0, 1, 0),
+			Font = constants.theme.font,
+			Text = "",
+			PlaceholderText = "Search",
+			TextColor3 = constants.theme.textColor,
+			TextSize = constants.theme.textSize,
+			TextStrokeTransparency = constants.theme.textStrokeTransparency,
+			TextStrokeColor3 = constants.theme.textStrokeColor,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		}),
+	})
+end
+
+return SearchBarTextBox

src/Stories/SearchBar.story.luau

@@ -0,0 +1,15 @@
+--!strict
+
+local React = require("../Packages/React")
+local ReactRoblox = require("../Packages/ReactRoblox")
+
+local SearchBar = require("../Components/SearchBar")
+
+return {
+	summary = "A search bar for finding tools",
+	react = React,
+	reactRoblox = ReactRoblox,
+	story = function()
+		return React.createElement(SearchBar)
+	end,
+}