Fix hotbar story

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

Author: ryanlua

src/Components/Hotbar.luau

@@ -1,25 +1,26 @@
 local React = require("../Packages/React")
 
-local Theme = require("../Theme")
-
-export type Props = {}
-
-local function HotbarFrame(props: Props)
+local function HotbarFrame(props: {
+	child: () -> (),
+})
 	return React.createElement("Frame", {
 		AutomaticSize = Enum.AutomaticSize.XY,
-		BackgroundTransparency = 1,
+		-- BackgroundTransparency = 1,
 	}, {
 		React.createElement("UIListLayout", {
 			Padding = UDim.new(0, 5),
+			FillDirection = Enum.FillDirection.Horizontal,
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 		}),
 	}, {
 		React.createElement("UIPadding", {
-			PaddingBottom = UDim.new(0, 5),
+			PaddingBottom = UDim.new(0, 0),
 			PaddingLeft = UDim.new(0, 5),
 			PaddingRight = UDim.new(0, 5),
-			PaddingTop = UDim.new(0, 5),
+			PaddingTop = UDim.new(0, 0),
 		}),
+	}, {
+		Child = props.child,
 	})
 end
 

src/Stories/Hotbar.story.luau

@@ -9,40 +9,11 @@ return {
 	react = React,
 	reactRoblox = ReactRoblox,
 	story = function()
-		return React.createElement(Hotbar, {}, {
-			React.createElement(Slot, {
-				toolName = "Sword",
-				textureIcon = "rbxassetid://7743866529",
-				tooltip = "A sharp blade",
-				slotNumber = "1",
-				equipped = true,
-				paddingOffset = 0,
-				Parent = script.Parent,
+		return React.createElement(Hotbar, {
+			child = React.createElement(Slot, {
+				toolName = "Tool",
+				slotNumber = "0",
 			}),
-			React.createElement(Slot, {
-				toolName = "Bow",
-				textureIcon = "rbxassetid://7743878358",
-				tooltip = "For ranged attacks",
-				slotNumber = "2",
-				equipped = false,
-				paddingOffset = 0,
-			}),
-			React.createElement(Slot, {
-				toolName = "Shield",
-				textureIcon = "rbxassetid://7743867987",
-				tooltip = "Defensive item",
-				slotNumber = "3",
-				equipped = false,
-				paddingOffset = 0,
-			}),
-			React.createElement(Slot, {
-				toolName = "Potion",
-				textureIcon = "rbxassetid://7743871218",
-				tooltip = "Healing potion",
-				slotNumber = "4",
-				equipped = false,
-				paddingOffset = 0,
-			}),
-		})
+		}, {})
 	end,
 }