41 lines
3.5 KiB
Svelte
41 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
let {
|
|
embed
|
|
}: {
|
|
embed: {
|
|
buildId: string;
|
|
title: string;
|
|
slug: string;
|
|
author: string;
|
|
ownerShared: boolean;
|
|
available: boolean;
|
|
weapons: Array<{ name: string; category: string }>;
|
|
gear: Array<{ name: string; slot: string }>;
|
|
};
|
|
} = $props();
|
|
</script>
|
|
|
|
<aside class="build-embed" aria-label={`Embedded Build: ${embed.title}`}>
|
|
<header>
|
|
<div><span>SHD BUILD EMBED</span><strong>{embed.title}</strong><small>BY {embed.author.toUpperCase()}</small></div>
|
|
<b>{embed.ownerShared ? 'AUTHOR-SHARED' : 'PUBLIC ARCHIVE'}</b>
|
|
</header>
|
|
{#if embed.available}
|
|
<div class="build-embed-matrix">
|
|
<section><span>WEAPONS</span>{#each embed.weapons as weapon}<div><strong>{weapon.name}</strong><small>{weapon.category}</small></div>{/each}</section>
|
|
<section><span>GEAR</span>{#each embed.gear.slice(0,6) as item}<div><strong>{item.name}</strong><small>{item.slot}</small></div>{/each}</section>
|
|
</div>
|
|
{#if !embed.ownerShared}<a href={`/builds/${encodeURIComponent(embed.slug)}`}>OPEN CURRENT BUILD →</a>{/if}
|
|
{:else}
|
|
<div class="build-embed-unavailable"><strong>BUILD UNAVAILABLE</strong><span>The source Build is no longer public.</span></div>
|
|
{/if}
|
|
</aside>
|
|
|
|
<style>
|
|
.build-embed{margin:32px 0;border:1px solid var(--shd-border-strong);background:#0d1011;font-family:var(--shd-font)}
|
|
.build-embed>header{position:static;z-index:auto;width:auto;height:auto;min-height:0;display:flex;align-items:start;justify-content:space-between;gap:16px;padding:14px;border-bottom:1px solid var(--shd-border);background:var(--shd-surface-raised)}.build-embed>header>div{display:grid;gap:3px}.build-embed span,.build-embed small,.build-embed b,.build-embed>a{font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.7px}.build-embed>header span,.build-embed>a{color:var(--shd-orange)}.build-embed>header strong{font-size:1.18rem}.build-embed>header small,.build-embed>header>b{color:var(--shd-text-muted)}
|
|
.build-embed-matrix{display:grid;grid-template-columns:.45fr 1fr}.build-embed-matrix section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--shd-border)}.build-embed-matrix section:first-child{border-left:0}.build-embed-matrix section>span{grid-column:1/-1;padding:7px 10px;border-bottom:1px solid var(--shd-border);color:var(--shd-text-muted)}.build-embed-matrix section>div{min-width:0;display:grid;gap:2px;padding:9px 10px;border-left:1px solid var(--shd-border);border-top:1px solid var(--shd-border)}.build-embed-matrix section>div:nth-child(2),.build-embed-matrix section>div:nth-child(3){border-top:0}.build-embed-matrix section>div:nth-child(even){border-left:0}.build-embed-matrix strong,.build-embed-matrix small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.build-embed-matrix small{color:var(--shd-text-muted)}
|
|
.build-embed>a{min-height:42px;display:flex;align-items:center;justify-content:flex-end;padding:0 12px;border-top:1px solid var(--shd-border)}.build-embed>a:hover,.build-embed>a:focus-visible{background:var(--shd-surface-active);color:var(--shd-orange-hover)}.build-embed-unavailable{display:grid;gap:4px;padding:22px}.build-embed-unavailable strong{color:var(--shd-danger)}.build-embed-unavailable span{color:var(--shd-text-muted);font-size:var(--shd-type-supporting)}
|
|
@media(max-width:700px){.build-embed>header{display:grid}.build-embed-matrix{grid-template-columns:1fr}.build-embed-matrix section{border-top:1px solid var(--shd-border);border-left:0}.build-embed-matrix section:first-child{border-top:0}}
|
|
</style>
|