Aspect Ratio

1import type { Component, ComponentProps } 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"])
9  return (
10    <div
11      style={{
12        position: "relative",
13        width: "100%",
14        "padding-bottom": `${100 / local.ratio}%`
15      }}
16    >
17      <div
18        style={{
19          position: "absolute",
20          top: 0,
21          right: 0,
22          bottom: 0,
23          left: 0
24        }}
25        {...others}
26      />
27    </div>
28  )
29}
30 
31export { AspectRatio }