diff options
Diffstat (limited to 'src/components/jet/shelf/UberShelf.svelte')
| -rw-r--r-- | src/components/jet/shelf/UberShelf.svelte | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/src/components/jet/shelf/UberShelf.svelte b/src/components/jet/shelf/UberShelf.svelte new file mode 100644 index 0000000..6cdf004 --- /dev/null +++ b/src/components/jet/shelf/UberShelf.svelte @@ -0,0 +1,40 @@ +<script lang="ts" context="module"> + import type { Shelf, Uber } from '@jet-app/app-store/api/models'; + + interface UberShelf extends Shelf { + contentType: 'uber'; + items: [Uber]; + } + + export function isUberShelf(shelf: Shelf): shelf is UberShelf { + return shelf.contentType === 'uber' && Array.isArray(shelf.items); + } +</script> + +<script lang="ts"> + import Artwork from '~/components/Artwork.svelte'; + import ShelfWrapper from '~/components/Shelf/Wrapper.svelte'; + + export let shelf: UberShelf; + + $: uber = shelf.items[0]; + $: artwork = uber.artwork; +</script> + +{#if artwork} + <ShelfWrapper withPaddingTop={false} withBottomPadding={false}> + <div class="artwork-container"> + <Artwork {artwork} profile="uber-shelf" /> + </div> + </ShelfWrapper> +{/if} + +<style> + .artwork-container { + border-bottom: 1px solid var(--systemQuaternary-onDark); + + @media (--range-xlarge-only) { + border: 1px solid var(--systemQuaternary-onDark); + } + } +</style> |
