chore: Replace inline CSS with styled components in Panel component

Signed-off-by: Vidit-Kushwaha <[email protected]>

Author: Vidit-Kushwaha

src/custom/Panel/Panel.tsx

@@ -6,9 +6,17 @@ import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons';
 import { PanelDragHandleIcon } from '../../icons/PanelDragHandle';
 import { useTheme } from '../../theme';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { DrawerHeader, PanelBody, ResizableContent } from './style';
+import {
+  DragHandle,
+  DrawerHeader,
+  HeaderActionsContainer,
+  HeaderContainer,
+  PanelBody,
+  PanelContainer,
+  ResizableContent
+} from './style';
 
-type PanelProps = {
+export type PanelProps = {
   isOpen: boolean;
   children: React.ReactNode;
   areAllExpanded?: boolean;
@@ -38,25 +46,7 @@ const Panel_: React.FC<PanelProps> = ({
   if (!isOpen) return null;
   return (
     <Draggable handle=".drag-handle">
-      <Box
-        sx={{
-          borderRadius: '8px',
-          overflow: 'hidden',
-          flexShrink: 0,
-          zIndex: 99999,
-          position: 'absolute',
-          backgroundColor: theme.palette.background.blur?.light,
-          boxShadow: '0 4px 16px #05003812',
-          maxHeight: '80%',
-          display: 'flex',
-          boxSizing: 'border-box',
-          ...(intitialPosition || {
-            top: '6rem',
-            right: '2rem'
-          }),
-          ...(sx || {})
-        }}
-      >
+      <PanelContainer theme={theme} intitialPosition={intitialPosition} sx={sx}>
         <Resizable
           defaultSize={{ width: '18rem', height: 'auto' }}
           onResize={() => {
@@ -86,37 +76,24 @@ const Panel_: React.FC<PanelProps> = ({
                       </Tooltip>
                     )}
                   </Box>
-                  <PanelDragHandleIcon
-                    style={{ marginTop: '-3rem', position: 'absolute', left: '50%' }}
-                  />
-                  <div
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'end',
-                      alignItems: 'center',
-                      flex: 1
-                    }}
-                  >
-                    <div
+                  <DragHandle>
+                    <PanelDragHandleIcon />
+                  </DragHandle>
+                  <HeaderContainer>
+                    <HeaderActionsContainer
                       id={`${id}-panel-header-actions-container`}
-                      style={{
-                        display: 'flex',
-                        gap: '1rem',
-                        justifyContent: 'flex-end',
-                        alignItems: 'center'
-                      }}
-                    ></div>
+                    ></HeaderActionsContainer>
                     <IconButton onClick={handleClose}>
                       <CloseIcon />
                     </IconButton>
-                  </div>
+                  </HeaderContainer>
                 </DrawerHeader>
               </div>
               <PanelBody className="panel-body">{children}</PanelBody>
             </ErrorBoundary>
           </ResizableContent>
         </Resizable>
-      </Box>
+      </PanelContainer>
     </Draggable>
   );
 };

src/custom/Panel/style.tsx

@@ -1,6 +1,7 @@
 import { ListItemProps } from '@mui/material';
 import { Box, ListItem } from '../../base';
 import { styled } from '../../theme';
+import { PanelProps } from './Panel';
 
 export const ListHeader = styled(ListItem)(({ theme }) => ({
   padding: theme.spacing(0.5, 0.5),
@@ -78,3 +79,39 @@ export const ResizableContent = styled('div')({
   flexDirection: 'column',
   minHeight: '3rem'
 });
+
+export const PanelContainer = styled(Box)<{ intitialPosition: PanelProps['intitialPosition'] }>(
+  ({ theme, intitialPosition }) => ({
+    borderRadius: '8px',
+    overflow: 'hidden',
+    flexShrink: 0,
+    zIndex: 99999,
+    position: 'absolute',
+    backgroundColor: theme.palette.background.blur?.light,
+    boxShadow: '0 4px 16px #05003812',
+    maxHeight: '80%',
+    display: 'flex',
+    boxSizing: 'border-box',
+    ...intitialPosition
+  })
+);
+
+export const DragHandle = styled('div')({
+  position: 'absolute',
+  top: '-3rem',
+  left: '50%'
+});
+
+export const HeaderActionsContainer = styled('div')({
+  display: 'flex',
+  gap: '1rem',
+  justifyContent: 'flex-end',
+  alignItems: 'center'
+});
+
+export const HeaderContainer = styled('div')({
+  display: 'flex',
+  justifyContent: 'end',
+  alignItems: 'center',
+  flex: '1'
+});