forked from MapComplete/MapComplete
67 lines
1.8 KiB
Svelte
67 lines
1.8 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { LicenseInfo } from "../../Logic/ImageProviders/LicenseInfo"
|
||
|
|
import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
|
||
|
|
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||
|
|
import ToSvelte from "../Base/ToSvelte.svelte"
|
||
|
|
import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A small element showing the attribution of a single image
|
||
|
|
*/
|
||
|
|
export let image: ProvidedImage
|
||
|
|
let license: Store<LicenseInfo> = UIEventSource.FromPromise(image.provider?.DownloadAttribution(image.url))
|
||
|
|
let icon = image.provider?.SourceIcon(image.id)?.SetClass("block h-8 w-8 pr-2")
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
{#if $license !== undefined}
|
||
|
|
<div class="flex bg-black text-white text-sm p-0.5 pl-5 pr-3 rounded-lg no-images">
|
||
|
|
|
||
|
|
{#if icon !== undefined}
|
||
|
|
<ToSvelte construct={icon} />
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
|
||
|
|
<div class="flex flex-col">
|
||
|
|
{#if $license.title}
|
||
|
|
{#if $license.informationLocation}
|
||
|
|
<a href={$license.informationLocation} target="_blank" rel="noopener nofollower">{$license.title}</a>
|
||
|
|
{:else}
|
||
|
|
$license.title
|
||
|
|
{/if}
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
{#if $license.artist}
|
||
|
|
<div class="font-bold">
|
||
|
|
{$license.artist}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<div class="flex justify-between">
|
||
|
|
|
||
|
|
{#if $license.license !== undefined || $license.licenseShortName !== undefined}
|
||
|
|
<div>
|
||
|
|
{$license?.license ?? $license?.licenseShortName}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
{#if $license.date}
|
||
|
|
<div>
|
||
|
|
{$license.date.toLocaleDateString()}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{#if $license.views}
|
||
|
|
<div class="flex justify-around self-center">
|
||
|
|
<EyeIcon class="w-4 h-4 pr-1"/>
|
||
|
|
{$license.views}
|
||
|
|
</div>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/if}
|