feat: multiple selected notes panel

app/assets/javascripts/components/Switch.tsx

@@ -11,6 +11,7 @@ import '@reach/checkbox/styles.css';
 export type SwitchProps = HTMLProps<HTMLInputElement> & {
   checked?: boolean;
   onChange: (checked: boolean) => void;
+  className?: string;
   children: ComponentChildren;
 };
 
@@ -19,8 +20,9 @@ export const Switch: FunctionalComponent<SwitchProps> = (
 ) => {
   const [checkedState, setChecked] = useState(props.checked || false);
   const checked = props.checked ?? checkedState;
+  const className = props.className ?? '';
   return (
-    <label className="sn-component flex justify-between items-center cursor-pointer hover:bg-contrast py-2 px-3">
+    <label className={`sn-component flex justify-between items-center cursor-pointer hover:bg-contrast px-3 ${className}`}>
       {props.children}
       <CustomCheckboxContainer
         checked={checked}
@@ -33,6 +35,7 @@ export const Switch: FunctionalComponent<SwitchProps> = (
         <CustomCheckboxInput
           {...({
             ...props,
+            className: undefined,
             children: undefined,
           } as CustomCheckboxInputProps)}
         />