extract list expansion container to separate component

src/renderer/components/item-list/expanded-list-container.tsx

@@ -0,0 +1,32 @@
+import { motion, Variants } from 'motion/react';
+import { ReactNode } from 'react';
+
+import styles from './expanded-list-container.module.css';
+
+const expandedAnimationVariants: Variants = {
+    hidden: {
+        height: 0,
+        minHeight: 0,
+    },
+    show: {
+        minHeight: '300px',
+        transition: {
+            duration: 0.3,
+            ease: 'easeInOut',
+        },
+    },
+};
+
+export const ExpandedListContainer = ({ children }: { children: ReactNode }) => {
+    return (
+        <motion.div
+            animate="show"
+            className={styles.listExpandedContainer}
+            exit="hidden"
+            initial="hidden"
+            variants={expandedAnimationVariants}
+        >
+            {children}
+        </motion.div>
+    );
+};