feat: expiration helper

src/lib/elements/forms/inputSelect.svelte

@@ -61,5 +61,7 @@
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
+    {:else}
+        <slot name="helper" />
     {/if}
 </FormItem>

src/routes/console/project-[project]/overview/keys/expirationInput.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+    import Helper from '$lib/elements/forms/helper.svelte';
     import InputDateTime from '$lib/elements/forms/inputDateTime.svelte';
     import InputSelect from '$lib/elements/forms/inputSelect.svelte';
-    import { isSameDay, isValidDate } from '$lib/helpers/date';
+    import { isSameDay, isValidDate, toLocaleDate } from '$lib/helpers/date';
 
     function incrementToday(value: number, type: 'day' | 'month' | 'year'): string {
         const date = new Date();
@@ -74,7 +75,13 @@
     }
 </script>
 
-<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date" />
+<InputSelect bind:value={expirationSelect} {options} id="preset" label="Expiration Date">
+    <svelte:fragment slot="helper">
+        {#if expirationSelect !== 'custom'}
+            <Helper type="neutral">Your key will expire in {toLocaleDate(value)}</Helper>
+        {/if}
+    </svelte:fragment>
+</InputSelect>
 {#if expirationSelect === 'custom'}
     <InputDateTime id="expire" label="" bind:value={expirationCustom} showLabel={false} />
 {/if}