update ui

src/ReplicatedStorage/ui/components/surface.tsx

@@ -0,0 +1,70 @@
+import Roact from "@rbxts/roact"
+import Canvas from "./canvas"
+import Acrylic from "./acrylic"
+import Fill from "./fill"
+import { BindingOrValue } from "ReplicatedStorage/utils/bindingUtil"
+
+interface surfaceProps extends Roact.JsxInstanceProperties<Frame> {
+	size: BindingOrValue<UDim2>
+    position: BindingOrValue<UDim2>
+    ratio?: BindingOrValue<number>
+    color?: BindingOrValue<Color3>
+    blur?: BindingOrValue<boolean>
+    [Roact.Children]?: Roact.Children
+
+	Event?: Roact.JsxInstanceEvents<Frame>
+	Change?: Roact.JsxInstanceChangeEvents<Frame>
+}
+
+function surface(props: surfaceProps): Roact.Element {
+    const { size, position, ratio, color, blur } = props
+
+	const spreadableProps = { ...props } as Partial<surfaceProps>
+    delete spreadableProps.size
+    delete spreadableProps.position
+    delete spreadableProps.ratio
+    delete spreadableProps.color
+    delete spreadableProps.blur
+	delete spreadableProps[Roact.Children]
+
+	return (
+		<Canvas
+            {...spreadableProps}
+            Key={"surface container"}
+            size={size}
+            position={position}
+        >
+            <>
+                {
+                    ratio !== undefined && <uiaspectratioconstraint 
+                        AspectRatio={ratio}
+                    />
+                }
+            </>
+
+            <>
+                {
+                    blur !== false && <Acrylic
+                        Key={"acrylic"}
+                        radius={5}
+                        distance={0.001}
+                    />
+                }
+            </>
+
+            <Fill
+                color={color ? color : Color3.fromHex("#1e1e2e")}
+                transparency={.3}
+                radius={5}
+            />
+
+            <Canvas
+                Key={"inner content"}
+            >
+                {props[Roact.Children]}
+            </Canvas>
+        </Canvas>
+	)
+}
+
+export default surface