[DONE] clone a course

src/components/Dropdown/index.svelte

@@ -2,14 +2,24 @@
   // import ChevronDown24 from "carbon-icons-svelte/lib/ChevronDown24";
 
   export let options = [];
-  export let handleOptionClick;
+  export let classNames = 'relative';
+  export let isIcon = false;
 
   let open = false;
 
-  function onClick(optionIndex) {
+  const notIconClass =
+    'border rounded-lg border-grey py-2 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200';
+
+  function isOptionLast(index) {
+    return index === options.length - 1;
+  }
+
+  function onClick(option) {
     return () => {
       open = !open;
-      handleOptionClick(optionIndex);
+      if (option && option.onClick) {
+        option.onClick();
+      }
     };
   }
 
@@ -19,10 +29,10 @@
   }
 </script>
 
-<div class="relative">
+<div class="{classNames} z-10d {!options.length && 'hidden'}">
   <button
-    class="flex flex-row items-center border rounded-lg border-grey py-2 px-3 focus:outline-none focus:border-gray-400 focus:bg-gray-200"
-    on:click={() => (open = !open)}
+    class="flex flex-row items-center {!isIcon && notIconClass}"
+    on:click={(e) => (open = !open)}
     on:blur={onBlur}
   >
     <slot />
@@ -31,14 +41,14 @@
 
   {#if open}
     <div
-      class="dropdown w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute -top-0.5"
+      class="dropdown w-48 bg-white border border-grey rounded-lg mt-2 py-2 absolute"
     >
       {#each options as option, index}
         <button
-          class="block px-4 py-2 border-b w-full"
-          on:click={onClick(index)}
+          class="block px-4 py-2 {!isOptionLast(index) && 'border-b'} w-full"
+          on:click={onClick(option)}
         >
-          {option}
+          {option.label}
         </button>
       {/each}
     </div>
@@ -49,5 +59,8 @@
   .dropdown {
     box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%),
       0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
+    right: 0px;
+    top: 20px;
+    left: unset;
   }
 </style>