From aa02f87f044a7545b530cfc5510339e3e84bbb9f Mon Sep 17 00:00:00 2001
From: Johnson Mao <tutelary.maomao@gmail.com>
Date: Mon, 2 Oct 2023 20:51:12 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20add=20ref=20support=20to=20Containe?=
 =?UTF-8?q?r=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Container/Container.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
index 794cdfe0..8b87f5c2 100644
--- a/src/components/Container/Container.tsx
+++ b/src/components/Container/Container.tsx
@@ -1,14 +1,18 @@
-import type { HTMLAttributes } from 'react';
+import { HTMLAttributes, forwardRef } from 'react';
 import cn from '@/utils/cn';
 
 type ContainerProps = {
   as?: 'main' | 'header' | 'footer' | 'div';
 } & HTMLAttributes<HTMLElement>;
 
-function Container({ as = 'div', className, ...props }: ContainerProps) {
-  const Component = as;
+const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  function InternalContainer({ as = 'div', className, ...props }, ref) {
+    const Component = as;
 
-  return <Component className={cn('mx-auto', className)} {...props} />;
-}
+    return (
+      <Component className={cn('mx-auto', className)} ref={ref} {...props} />
+    );
+  }
+);
 
 export default Container;