optimize MultipleContainers

apps/quick-dapp/src/components/MultipleContainers/components/Container/Container.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import { Handle, Remove } from '../Item';
+import { Handle } from '../Item';
+import { Remove } from './Remove'
 
 export interface Props {
   children: React.ReactNode;

apps/quick-dapp/src/components/MultipleContainers/components/Container/Remove.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
 
-import { Action, ActionProps } from '../Action';
+import { Action, Props as ActionProps } from '../Item/Action';
 
 export function Remove(props: ActionProps) {
   return (
     <Action
       {...props}
-      active={{
-        fill: 'rgba(255, 70, 70, 0.95)',
-        background: 'rgba(255, 70, 70, 0.1)',
-      }}
     >
       <i className="fas fa-times"></i>
     </Action>

apps/quick-dapp/src/components/MultipleContainers/components/Item/Action.tsx

@@ -20,8 +20,6 @@ export const Action = forwardRef<HTMLButtonElement, Props>(
           {
             ...style,
             cursor,
-            '--fill': active?.fill,
-            '--background': active?.background,
             width: 12,
           } as CSSProperties
         }

apps/quick-dapp/src/components/MultipleContainers/components/Item/Handle.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 
-import { Action, ActionProps } from '../Action';
+import { Action, Props as ActionProps } from './Action';
 
 export const Handle = forwardRef<HTMLButtonElement, ActionProps>(
   (props, ref) => {

apps/quick-dapp/src/components/MultipleContainers/components/Item/Item.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import type { DraggableSyntheticListeners } from '@dnd-kit/core';
 import type { Transform } from '@dnd-kit/utilities';
-import { Handle } from './components/Handle';
+import { Handle } from './Handle';
 
 export interface Props {
   dragOverlay?: boolean;

apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Action/index.ts

@@ -1,2 +0,0 @@
-export { Action } from './Action';
-export type { Props as ActionProps } from './Action';

apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Handle/index.ts

@@ -1 +0,0 @@
-export { Handle } from './Handle';

apps/quick-dapp/src/components/MultipleContainers/components/Item/components/Remove/index.ts

@@ -1 +0,0 @@
-export { Remove } from './Remove';

apps/quick-dapp/src/components/MultipleContainers/components/Item/components/index.ts

@@ -1,3 +0,0 @@
-export { Action } from './Action';
-export { Handle } from './Handle';
-export { Remove } from './Remove';

apps/quick-dapp/src/components/MultipleContainers/components/Item/index.ts

@@ -1,2 +1,3 @@
 export { Item } from './Item';
-export { Action, Handle, Remove } from './components';
+export { Action } from './Action';
+export { Handle } from './Handle';

apps/quick-dapp/src/components/MultipleContainers/components/index.ts

@@ -1,3 +1,3 @@
 export { Container } from './Container';
 export type { ContainerProps } from './Container';
-export { Item, Action, Handle, Remove } from './Item';
+export { Item, Action, Handle } from './Item';