36 lines
1.6 KiB
Svelte
36 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
|
|
import { type hubType } from "src/ts/characterCards";
|
|
interface Props {
|
|
card: hubType;
|
|
onclick?: (event: MouseEvent & {
|
|
currentTarget: EventTarget & HTMLButtonElement;
|
|
}) => any
|
|
}
|
|
|
|
let { card, onclick }: Props = $props();
|
|
</script>
|
|
|
|
<button class="border p-4 flex hover:ring-2 rounded-md transition items-start justify-start" onclick={onclick}>
|
|
<div class="bg-white rounded-md shadow-md p-4 relative w-32 h-48 min-w-32 min-h-48">
|
|
{#key card.img}
|
|
<img src={"https://sv.risuai.xyz/resource/" + card.img} alt={card.name} class="absolute inset-0 w-full h-full object-cover rounded-md">
|
|
{/key}
|
|
</div>
|
|
<div class="ml-4 mt-4 flex flex-col items-start text-start">
|
|
<h2 class="text-lg font-semibold break-all line-clamp-1">{card.name}</h2>
|
|
{#if card.hidden}
|
|
<span class="text-sm text-red-500 line-clamp-1 text-wrap max-w-full break-all whitespace-pre-wrap">Private</span>
|
|
{:else if card.authorname}
|
|
<span class="text-sm text-gray-500 line-clamp-1 text-wrap max-w-full break-all whitespace-pre-wrap">By {card.authorname}</span>
|
|
{/if}
|
|
<p class="text-xs text-gray-500 line-clamp-2 text-wrap max-w-full break-words whitespace-pre-wrap mt-2">{card.desc}</p>
|
|
<div class="mt-2 w-full flex flex-wrap">
|
|
{#each card.tags as tag}
|
|
{#if tag}
|
|
<div class="bg-gray-200 text-gray-800 text-xs font-semibold rounded-full p-2 mt-2 ml-2">{tag}</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</button> |