chore: add crossfade to tab selector
This commit is contained in:
		| @@ -53,7 +53,7 @@ | ||||
|     releaseStreamToReadable, | ||||
|     urlIsValidImage, | ||||
|   } from '@/utils'; | ||||
|   import { fade, scale } from 'svelte/transition'; | ||||
|   import { crossfade, fade, scale } from 'svelte/transition'; | ||||
|   import { Checkbox } from '@/components/ui/checkbox'; | ||||
|   import Label from '@/components/ui/label/label.svelte'; | ||||
|   import { | ||||
| @@ -111,7 +111,17 @@ | ||||
|   import { EZPPActionStatus } from '@/types'; | ||||
|   import * as presence from '@/presence'; | ||||
|  | ||||
|   const tabs = [ | ||||
|     { name: 'Home', key: 'home' }, | ||||
|     { | ||||
|       name: 'Settings', | ||||
|       key: 'settings', | ||||
|     }, | ||||
|   ]; | ||||
|   let selectedTab = $state('home'); | ||||
|   let [tab_send, tab_receive] = crossfade({ | ||||
|     duration: $reduceAnimations ? 0 : 400, | ||||
|   }); | ||||
|   let progress = $state(-1); | ||||
|   let launchInfo = $state(''); | ||||
|   let launchError = $state<Error | undefined>(undefined); | ||||
| @@ -889,7 +899,7 @@ | ||||
|     <div | ||||
|       class="flex flex-row flex-nowrap h-11 gap-1 w-full bg-theme-800/50 border border-theme-800/90 rounded-lg p-[4px]" | ||||
|     > | ||||
|       <button | ||||
|       <!-- <button | ||||
|         class="w-full flex justify-center items-center font-semibold text-sm rounded-lg {selectedTab === | ||||
|         'home' | ||||
|           ? 'bg-white/70 border border-white/60 text-theme-950' | ||||
| @@ -906,7 +916,24 @@ | ||||
|         onclick={() => (selectedTab = 'settings')} | ||||
|       > | ||||
|         Settings | ||||
|       </button> | ||||
|       </button> --> | ||||
|       {#each tabs as tab (tab.key)} | ||||
|         <button | ||||
|           class="inline-block relative py-2 px-2 disabled:opacity-25 transition-opacity w-full text-center" | ||||
|           onclick={() => selectedTab = tab.key} | ||||
|         > | ||||
|           <div class="flex flex-row items-center justify-center gap-1 text-xs md:text-sm font-semibold w-full text-center"> | ||||
|             <div>{tab.name}</div> | ||||
|           </div> | ||||
|           {#if selectedTab === tab.key} | ||||
|             <div | ||||
|               in:tab_receive={{ key: 'tab' }} | ||||
|               out:tab_send={{ key: 'tab' }} | ||||
|               class="absolute left-0 bottom-0 w-full h-full rounded-lg bg-white/10 border border-white/10" | ||||
|             ></div> | ||||
|           {/if} | ||||
|         </button> | ||||
|       {/each} | ||||
|     </div> | ||||
|     {#if selectedTab === 'home'} | ||||
|       <div | ||||
|   | ||||
		Reference in New Issue
	
	Block a user