75 lines
1.5 KiB
Svelte
75 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { MessageView } from "$lib/api/types";
|
|
import MessageMedia from "$lib/components/MessageMedia.svelte";
|
|
|
|
interface Props {
|
|
message: MessageView;
|
|
onmedia: (index: number) => void;
|
|
own: boolean;
|
|
}
|
|
|
|
let { message, own, onmedia }: Props = $props();
|
|
|
|
const web = $derived(message.web_page);
|
|
</script>
|
|
|
|
{#if web}
|
|
<div class="WebPage">
|
|
{#if web.has_photo}
|
|
<div class="photo">
|
|
<MessageMedia {message} {own} onopen={() => onmedia(0)} />
|
|
</div>
|
|
{/if}
|
|
<a class="card" href={web.url} target="_blank" rel="noopener">
|
|
{#if web.site_name}
|
|
<div class="site">{web.site_name}</div>
|
|
{:else if web.display_url}
|
|
<div class="site">{web.display_url}</div>
|
|
{/if}
|
|
{#if web.title}
|
|
<div class="title">{web.title}</div>
|
|
{/if}
|
|
{#if web.description}
|
|
<div class="desc">{web.description}</div>
|
|
{/if}
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
|
|
<style lang="scss">
|
|
.WebPage {
|
|
margin-top: 0.25rem;
|
|
padding-left: 0.5rem;
|
|
border-left: 3px solid var(--color-primary);
|
|
}
|
|
|
|
.photo {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.card {
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site {
|
|
font-size: 0.875rem;
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.title {
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.desc {
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
color: var(--color-text);
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
line-clamp: 3;
|
|
}
|
|
</style>
|