aspect-ratio

1import type { Component, ComponentProps, JSX } from "solid-js";
2import { mergeProps, splitProps } from "solid-js";
3 
4type AspectRatioProps = ComponentProps<"div"> & { ratio?: number };
5 
6const AspectRatio: Component<AspectRatioProps> = (rawProps) => {
7  const props = mergeProps({ ratio: 1 / 1 }, rawProps);
8  const [local, others] = splitProps(props, ["ratio", "style"]);
9  const style = (): JSX.CSSProperties => ({
10    ...(typeof local.style === "object" ? local.style : {}),
11    position: "absolute",
12    top: 0,
13    right: 0,
14    bottom: 0,
15    left: 0,
16  });
17  return (
18    <div
19      style={{
20        position: "relative",
21        width: "100%",
22        "padding-bottom": `${100 / local.ratio}%`,
23      }}
24    >
25      <div data-slot="aspect-ratio" style={style()} {...others} />
26    </div>
27  );
28};
29 
30export { AspectRatio };