Split out SortableItem to new file

src/components/edit/AreaCRUD.tsx

@@ -21,9 +21,8 @@ import {
   SortableContext,
   sortableKeyboardCoordinates,
   rectSortingStrategy
-  , useSortable
 } from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
+import { SortableItem } from './SortableItem'
 
 export type AreaCRUDProps = Pick<AreaType, 'uuid' | 'areaName'> & {
   childAreas: AreaType[]
@@ -77,7 +76,7 @@ export const AreaCRUD = ({ uuid: parentUuid, areaName: parentName, childAreas, e
   }
 
   return (
-    <div>
+    <>
       <div className='flex items-center justify-between'>
         <div className='flex items-center gap-3'>
           <h3 className='flex items-center gap-4'><AreaEntityIcon />Areas</h3>
@@ -153,35 +152,7 @@ export const AreaCRUD = ({ uuid: parentUuid, areaName: parentName, childAreas, e
             <AddAreaTriggerButtonMd />
           </AddAreaTrigger>
         </div>)}
-    </div>
-  )
-}
-
-interface SortableItemProps {
-  id: string
-  children: JSX.Element
-}
-
-export const SortableItem = (props: SortableItemProps): JSX.Element => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = useSortable({ id: props.id })
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.3 : 1
-  }
-
-  return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      {props.children}
-    </div>
+    </>
   )
 }
 

src/components/edit/SortableItem.tsx

@@ -0,0 +1,30 @@
+import { CSS } from '@dnd-kit/utilities'
+import { useSortable } from '@dnd-kit/sortable'
+
+interface SortableItemProps {
+  id: string
+  children: JSX.Element
+}
+
+export const SortableItem = (props: SortableItemProps): JSX.Element => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: props.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.3 : 1
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      {props.children}
+    </div>
+  )
+}