Add component name in children inspector

src/components/inspector/elements-list/ElementListItem.tsx

@@ -8,11 +8,20 @@ interface Props extends Pick<IComponent, 'type'> {
   onMouseOver: PseudoBoxProps['onMouseOver']
   onMouseOut: PseudoBoxProps['onMouseOut']
   draggable?: boolean
+  name?: string
 }
 
 const ElementListItem = forwardRef(
   (
-    { type, opacity = 1, onSelect, onMouseOut, onMouseOver, draggable }: Props,
+    {
+      type,
+      opacity = 1,
+      onSelect,
+      onMouseOut,
+      onMouseOver,
+      draggable,
+      name,
+    }: Props,
     ref: React.Ref<HTMLDivElement>,
   ) => {
     return (
@@ -34,7 +43,7 @@ const ElementListItem = forwardRef(
           <Flex align="center">
             {draggable && <Icon fontSize="xs" mr={2} name="arrow-up-down" />}
             <Text letterSpacing="wide" fontSize="sm" textTransform="capitalize">
-              {type}
+              {name || type}
             </Text>
           </Flex>
           <ActionButton

src/components/inspector/elements-list/ElementListItemDraggable.tsx

@@ -8,6 +8,7 @@ interface Props extends Pick<IComponent, 'type' | 'id'> {
   onSelect: (id: IComponent['id']) => void
   onHover: (id: IComponent['id']) => void
   onUnhover: () => void
+  name?: string
 }
 
 const ITEM_TYPE = 'elementItem'
@@ -20,6 +21,7 @@ const ElementListItemDraggable: React.FC<Props> = ({
   index,
   onHover,
   onUnhover,
+  name,
 }) => {
   const ref = useRef<HTMLDivElement>(null)
   const [, drop] = useDrop({
@@ -80,6 +82,7 @@ const ElementListItemDraggable: React.FC<Props> = ({
       onMouseOut={onUnhover}
       type={type}
       draggable
+      name={name}
     />
   )
 }

src/components/inspector/elements-list/ElementsList.tsx

@@ -31,6 +31,7 @@ const ElementsList: React.FC<Props> = ({
               onSelect={onSelect}
               onHover={onHover}
               onUnhover={onUnhover}
+              name={element.componentName}
             />
           ),
       )}