feat: add collection list

inertia/components/common/dropdown/dropdown.tsx

@@ -8,35 +8,39 @@ import useClickOutside from '~/hooks/use_click_outside';
 import useGlobalHotkeys from '~/hooks/use_global_hotkeys';
 import useToggle from '~/hooks/use_modal';
 
-const DropdownStyle = styled.div<{ opened: boolean }>(({ opened, theme }) => ({
-  cursor: 'pointer',
-  userSelect: 'none',
-  position: 'relative',
-  minWidth: 'fit-content',
-  width: 'fit-content',
-  maxWidth: '250px',
-  backgroundColor: opened ? theme.colors.secondary : theme.colors.background,
-  padding: '4px',
-  borderRadius: theme.border.radius,
+const DropdownStyle = styled.div<{ opened: boolean; svgSize?: number }>(
+  ({ opened, theme, svgSize = 24 }) => ({
+    cursor: 'pointer',
+    userSelect: 'none',
+    position: 'relative',
+    minWidth: 'fit-content',
+    width: 'fit-content',
+    maxWidth: '250px',
+    backgroundColor: opened ? theme.colors.secondary : theme.colors.background,
+    padding: '4px',
+    borderRadius: theme.border.radius,
 
-  '&:hover': {
-    backgroundColor: theme.colors.secondary,
-  },
+    '&:hover': {
+      backgroundColor: theme.colors.secondary,
+    },
 
-  '& svg': {
-    height: '24px',
-    width: '24px',
-  },
-}));
+    '& svg': {
+      height: `${svgSize}px`,
+      width: `${svgSize}px`,
+    },
+  })
+);
 
 export default function Dropdown({
   children,
   label,
   className,
+  svgSize,
 }: {
   children: ReactNode;
   label: ReactNode | string;
   className?: string;
+  svgSize?: number;
 }) {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { isShowing, toggle, close } = useToggle();
@@ -55,6 +59,7 @@ export default function Dropdown({
       onClick={toggle}
       ref={dropdownRef}
       className={className}
+      svgSize={svgSize}
     >
       <DropdownLabel>{label}</DropdownLabel>
       <DropdownContainer show={isShowing}>{children}</DropdownContainer>