Aspect ratio component

src/components/AspectRatio.tsx

@@ -0,0 +1,38 @@
+import classNames from "classnames";
+import React from "react";
+
+export type Props = {
+  /**
+   * The style of component
+   */
+  className?: string;
+  /**
+   * The optional child
+   */
+  children?: React.ReactNode;
+};
+const AspectRatio = ({ className, children }: Props) => {
+  return (
+    <div
+      className={classNames(
+        "relative overflow-hidden pt-[55%] rounded w-full",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+AspectRatio.Content = function AspectRatioContent({
+  className,
+  children,
+}: Props) {
+  return (
+    <div className={classNames([className, "absolute top-0 w-full h-full"])}>
+      {children}
+    </div>
+  );
+};
+
+export default AspectRatio;