add custom hotbar

src/ReplicatedStorage/ui/padding.tsx

@@ -0,0 +1,33 @@
+import Hooks from "@rbxts/roact-hooks"
+import Roact from "@rbxts/roact"
+
+interface PaddingProps extends Roact.JsxInstanceProperties<UIPadding> {
+	Padding?: UDim | Roact.Binding<UDim>
+	PaddingX?: UDim | Roact.Binding<UDim>
+	PaddingY?: UDim | Roact.Binding<UDim>
+
+	Event?: Roact.JsxInstanceEvents<UIPadding>
+	Change?: Roact.JsxInstanceChangeEvents<UIPadding>
+}
+
+const padding: Hooks.FC<PaddingProps> = (props, hooks) => {
+	const {} = hooks
+	const { Padding, PaddingX, PaddingY } = props
+
+	const spreadableProps = { ...props } as Partial<PaddingProps>
+	delete spreadableProps.Padding
+	delete spreadableProps.PaddingX
+	delete spreadableProps.PaddingY
+
+	return (
+		<uipadding
+			{...spreadableProps}
+			PaddingBottom={PaddingY ?? Padding}
+			PaddingTop={PaddingY ?? Padding}
+			PaddingLeft={PaddingX || Padding}
+			PaddingRight={PaddingX || Padding}
+		/>
+	)
+}
+
+export default new Hooks(Roact)(padding)