map-marker-area-display.svelte (1816B)
1 <script lang="ts"> 2 import { Fade, Glyph, type IBasisOpt } from "@radroots/apps-lib"; 3 4 let { 5 basis = undefined, 6 }: { 7 basis?: IBasisOpt<{ 8 primary: string; 9 admin: string; 10 country: string; 11 }>; 12 } = $props(); 13 </script> 14 15 {#if basis} 16 <Fade 17 basis={{ 18 classes: `flex-col w-full justify-center items-start`, 19 }} 20 > 21 <div 22 class={`flex flex-col w-fit px-5 py-[10px] justify-start items-start bg-ly1 rounded-3xl shadow-lg`} 23 > 24 <div class={`flex flex-col w-full gap-1 justify-start items-start`}> 25 <div class={`flex flex-row gap-1 justify-start items-center`}> 26 <p 27 class={`font-sans font-[600] text-[0.95rem] text-ly2-gl`} 28 > 29 {basis.primary} 30 </p> 31 <Glyph 32 basis={{ 33 classes: `text-ly2-gl -translate-y-[2px]`, 34 dim: `xs`, 35 36 key: `map-pin-simple`, 37 }} 38 /> 39 </div> 40 <div 41 class={`flex flex-row w-full gap-1 justify-start items-center`} 42 > 43 <p 44 class={`font-sans font-[600] text-[0.95rem] tracking-tight text-ly2-gl`} 45 > 46 {`${basis.admin},`} 47 </p> 48 <p 49 class={`font-sans font-[600] text-[0.95rem] tracking-tight text-ly2-gl`} 50 > 51 {`${basis.country}`} 52 </p> 53 </div> 54 </div> 55 </div> 56 </Fade> 57 {/if}