From 6d36b774b2b85dcf46b73c6984631fd0c32fc598 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CSalar?= <“salar.sali97@gmail.com”>
Date: Tue, 30 Aug 2022 15:31:23 +0300
Subject: [PATCH] Aspect ratio component

---
 src/components/AspectRatio.tsx | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src/components/AspectRatio.tsx

diff --git a/src/components/AspectRatio.tsx b/src/components/AspectRatio.tsx
new file mode 100644
index 0000000..be6a1b8
--- /dev/null
+++ b/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;