feat: add abstract detail component

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/ResourceDetailFormatters/Details.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { OperatorDataContainer } from './styles';
+import { isEmptyAtAllDepths } from './utils';
+
+interface OperatorDataFormatterProps {
+  data: any;
+  FormatStructuredData: any;
+  propertyFormatter: any;
+}
+
+export const OperatorDataFormatter = ({
+  data,
+  FormatStructuredData,
+  propertyFormatter
+}: OperatorDataFormatterProps) => {
+  if (!data || isEmptyAtAllDepths(data)) {
+    return null;
+  }
+
+  return (
+    <OperatorDataContainer>
+      <FormatStructuredData data={data} propertyFormatters={propertyFormatter} isLevel={false} />
+    </OperatorDataContainer>
+  );
+};

src/custom/ResourceDetailFormatters/ExpandArrow.tsx

@@ -0,0 +1,19 @@
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { iconMedium } from '../../constants/iconsSizes';
+import { useTheme } from '../../theme';
+
+interface ExpandArrowProps {
+  expanded: boolean;
+}
+
+const ExpandArrow: React.FC<ExpandArrowProps> = ({ expanded }) => {
+  const theme = useTheme();
+  return expanded ? (
+    <ExpandLessIcon fill={theme.palette.icon.default} {...iconMedium} />
+  ) : (
+    <ExpandMoreIcon fill={theme.palette.icon.default} {...iconMedium} />
+  );
+};
+
+export default ExpandArrow;

src/custom/ResourceDetailFormatters/context.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const LevelContext = React.createContext<number>(0);
+
+interface LevelProps {
+  children: React.ReactNode;
+}
+
+export const Level: React.FC<LevelProps> = ({ children }) => {
+  const level = React.useContext(LevelContext);
+  return <LevelContext.Provider value={level + 1}>{children}</LevelContext.Provider>;
+};