button-layout-pair.svelte (2119B)
1 <script lang="ts"> 2 import { app_lo } from "$lib/stores/app"; 3 import { 4 Flex, 5 fmt_cl, 6 type IClOpt, 7 type IDisabledOpt, 8 type ILoadingOpt, 9 } from "@radroots/apps-lib"; 10 import { type CallbackPromise } from "@radroots/utils"; 11 import ButtonLayout from "./button-layout.svelte"; 12 13 let { 14 basis, 15 }: { 16 basis: IClOpt & { 17 continue: IDisabledOpt & 18 ILoadingOpt & { 19 label: string; 20 callback: CallbackPromise; 21 }; 22 back?: IDisabledOpt & { 23 visible: boolean; 24 label?: string; 25 callback: CallbackPromise; 26 }; 27 }; 28 } = $props(); 29 </script> 30 31 <div 32 class={`${fmt_cl(basis.classes)} flex flex-col gap-1 justify-center items-center ${basis?.back?.visible ? `-translate-y-8` : ``} el-re`} 33 > 34 <ButtonLayout 35 basis={{ 36 disabled: basis.continue.disabled, 37 label: basis.continue.label, 38 callback: basis.continue.callback, 39 }} 40 /> 41 {#if basis.back} 42 <div class={`flex flex-col justify-center items-center el-re`}> 43 {#if basis.back.visible} 44 <button 45 class={`group flex flex-row h-12 w-lo_${$app_lo} justify-center items-center fade-in el-re`} 46 onclick={async (ev) => { 47 ev.stopPropagation(); 48 if (!basis.back?.disabled) await basis.back?.callback(); 49 }} 50 > 51 <p 52 class={`font-sans font-[600] tracking-wide text-ly1-gl-shade ${basis.back?.disabled ? `` : `group-active:text-ly1-gl/40`} el-re`} 53 > 54 {basis.back.label || ``} 55 </p> 56 </button> 57 {:else} 58 <div 59 class={`flex flex-row h-4 w-full justify-start items-center`} 60 > 61 <Flex /> 62 </div> 63 {/if} 64 </div> 65 {/if} 66 </div>