DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
46 lines
1.2 KiB
Text
46 lines
1.2 KiB
Text
// packages/react/aspect-ratio/src/AspectRatio.tsx
|
|
import * as React from "react";
|
|
import { Primitive } from "@radix-ui/react-primitive";
|
|
import { jsx } from "react/jsx-runtime";
|
|
var NAME = "AspectRatio";
|
|
var AspectRatio = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { ratio = 1 / 1, style, ...aspectRatioProps } = props;
|
|
return /* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
style: {
|
|
// ensures inner element is contained
|
|
position: "relative",
|
|
// ensures padding bottom trick maths works
|
|
width: "100%",
|
|
paddingBottom: `${100 / ratio}%`
|
|
},
|
|
"data-radix-aspect-ratio-wrapper": "",
|
|
children: /* @__PURE__ */ jsx(
|
|
Primitive.div,
|
|
{
|
|
...aspectRatioProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...style,
|
|
// ensures children expand in ratio
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0
|
|
}
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
AspectRatio.displayName = NAME;
|
|
var Root = AspectRatio;
|
|
export {
|
|
AspectRatio,
|
|
Root
|
|
};
|
|
//# sourceMappingURL=index.mjs.map
|