From 4a87c100d67cf67944248b76c6673a43e5038865 Mon Sep 17 00:00:00 2001
From: Andre H <andrehadiantolesmana@gmail.com>
Date: Wed, 28 Feb 2024 14:20:12 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore:=20use=20proper=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/IconWithFrame/IconWithFrame.tsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx
index 10eba40c..77bea57a 100644
--- a/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx
+++ b/packages/frontend/src/components/shared/IconWithFrame/IconWithFrame.tsx
@@ -1,9 +1,8 @@
-import React, { ReactNode } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { cn } from 'utils/classnames';
 
-interface IconWithFrameProps {
+interface IconWithFrameProps extends ComponentPropsWithoutRef<'div'> {
   icon: ReactNode;
-  className?: string;
   hasHighlight?: boolean;
 }
 
@@ -11,6 +10,7 @@ export const IconWithFrame = ({
   icon,
   className,
   hasHighlight = true,
+  ...props
 }: IconWithFrameProps) => {
   return (
     <div
@@ -21,6 +21,7 @@ export const IconWithFrame = ({
         'bg-controls-secondary',
         className,
       )}
+      {...props}
     >
       {hasHighlight && (
         <div className="bottom-0 absolute w-[37px] h-px bg-gradient-to-r from-gray-0/0 via-gray-0/50 to-gray-0/0" />