+5

.changeset/smooth-teams-press.md

Reviewed

··· 1 1 + --- 2 2 + '@foxui/social': patch 3 3 + --- 4 4 + 5 5 + fixes

+30 -32

packages/social/src/lib/components/link-card/LinkCard.svelte

Reviewed

··· 48 48 <div 49 49 bind:this={ref} 50 50 class={cn( 51 51 - 'not-prose border-base-300 dark:border-base-900 bg-base-200/50 dark:bg-base-950/50 group relative isolate my-6 flex aspect-[1200/630] max-w-lg flex-col justify-end overflow-hidden rounded-2xl border p-4', 51 51 + 'not-prose group border-base-300 dark:border-base-900 bg-base-200/50 dark:bg-base-950/50 group relative isolate my-6 flex aspect-[1200/630] max-w-lg flex-col justify-end overflow-hidden rounded-2xl border p-4', 52 52 'focus-within:outline-accent-500 focus-within:outline-2 focus-within:outline-offset-2', 53 53 className 54 54 )} 55 55 - {..} 56 56 - {...ops} 55 55 + {...restProps} 57 56 > 58 58 - {} 59 59 - > 60 60 - {#if dia} 61 61 - {#}{#if ideo && meta.videoType} 62 62 - <}<video 57 57 + {#if showMedia} 58 58 + {#if meta.video && meta.videoType} 59 59 + <video 63 60 autoplay 64 61 loop 65 62 muted ··· 68 65 height="630" 69 66 class="absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover" 70 67 > 71 71 - <source src={ideo} type} type={ideoType} /> 72 72 - } /> 73 73 - </video>{:else if mage} 74 74 - <}<img 75 75 - src={mage} 76 76 - } 77 77 - alt={mageAlt || ''} 78 78 - } 68 68 + <source src={meta.video} type={meta.videoType} /> 69 69 + </video> 70 70 + {:else if meta.image} 71 71 + <img 72 72 + src={meta.image} 73 73 + alt={meta.imageAlt || ''} 79 74 width="1200" 80 75 height="630" 81 81 - class="group-hover:scale-102 absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover transition-all duration-300 ease-in-out" 82 82 - />{/if}{/if} 76 76 + class="absolute inset-0 -z-10 h-full w-full rounded-2xl object-cover group-hover:scale-102 transition-all duration-300 ease-in-out" 77 77 + /> 78 78 + {/if} 79 79 + {/if} 83 80 84 84 - {#if adient} 85 85 - <d}<div 81 81 + {#if showGradient} 82 82 + <div 86 83 class="from-base-200/90 to-base-200/40 dark:from-base-950 dark:to-base-950/60 absolute inset-0 -z-10 rounded-xl bg-gradient-to-t" 87 87 - ></div>{/if} 84 84 + ></div> 85 85 + {/if} 88 86 89 89 - {#if main} 90 90 - <d}<div class="dark:text-accent-400 text-accent-600 text-xs font-semibold"> 91 91 - { new URL(href).hostname.replace('www.', '') : ''} 92 92 - </} 93 93 - </div>{/if} 87 87 + {#if showDomain} 88 88 + <div class="dark:text-accent-400 text-accent-600 text-xs font-semibold"> 89 89 + {href ? new URL(href).hostname.replace('www.', '') : ''} 90 90 + </div> 91 91 + {/if} 94 92 95 93 <div class="text-base-950 dark:text-base-50 mt-2 text-lg font-semibold"> 96 94 <a {href} {target} class="focus:outline-none"> 97 95 <span class="absolute inset-0"></span> 98 98 - <div class={tle ? '' : 'sr-only'}>{met}>{title ?? href}</div}</div> 96 96 + <div class={showTitle ? '' : 'sr-only'}>{meta?.title ?? href}</div> 99 97 </a> 100 98 </div> 101 101 - {#if scription} 102 102 - <d}<div class="dark:text-base-400 text-base-700 mt-1 line-clamp-2 text-xs/5"> 103 103 - {description ?? ''} 104 104 - </} 105 105 - </div>{/if} 99 99 + {#if showDescription} 100 100 + <div class="dark:text-base-400 text-base-700 mt-1 line-clamp-2 text-xs/5"> 101 101 + {meta?.description ?? ''} 102 102 + </div> 103 103 + {/if} 106 104 </div>