feat(ui): added c-select in the ui lib (#550)

* feat(ui): added c-select in the ui lib

* refactor(ui): switched n-select to c-select

src/tools/eta-calculator/eta-calculator.vue

@@ -39,13 +39,15 @@ const endAt = computed(() =>
       </n-form-item>
     </div>
 
-    <n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
+    <p>Amount of unit consumed by time span</p>
+    <div flex flex-col items-baseline gap-y-2 md:flex-row>
       <n-input-number v-model:value="unitPerTimeSpan" :min="1" />
-      <span mx-3>in</span>
-      <n-input-group>
-        <n-input-number v-model:value="timeSpan" :min="1" />
-        <n-select
+      <div flex items-baseline gap-2>
+        <span ml-2>in</span>
+        <n-input-number v-model:value="timeSpan" min-w-130px :min="1" />
+        <c-select
           v-model:value="timeSpanUnitMultiplier"
+          min-w-130px
           :options="[
             { label: 'milliseconds', value: 1 },
             { label: 'seconds', value: 1000 },
@@ -54,8 +56,8 @@ const endAt = computed(() =>
             { label: 'days', value: 1000 * 60 * 60 * 24 },
           ]"
         />
-      </n-input-group>
-    </n-form-item>
+      </div>
+    </div>
 
     <n-divider />
     <c-card mb-2>