67 lines
1.5 KiB
Svelte
67 lines
1.5 KiB
Svelte
<svelte:options runes={true} />
|
|
|
|
<script lang="ts">
|
|
import type { Cell } from 'wx-svelte-grid'
|
|
import type { Character } from '$lib/types/api/entities'
|
|
import CharacterTag from '$lib/components/tags/CharacterTag.svelte'
|
|
|
|
const { row }: Cell = $props()
|
|
|
|
// Cast row to Character type for type safety
|
|
const character = row as Character
|
|
|
|
// Get display name
|
|
const displayName = $derived.by(() => {
|
|
const nameObj = character.name
|
|
if (!nameObj) return '—'
|
|
if (typeof nameObj === 'string') return nameObj
|
|
return nameObj.en || nameObj.ja || '—'
|
|
})
|
|
|
|
// Check if character has season (seasonal variant)
|
|
const hasSeason = $derived(
|
|
character.season !== undefined && character.season !== null && character.season > 0
|
|
)
|
|
|
|
// Check if character has series (need to check for non-empty array)
|
|
const hasSeries = $derived.by(() => {
|
|
if (!character.series || !Array.isArray(character.series)) return false
|
|
return character.series.length > 0
|
|
})
|
|
</script>
|
|
|
|
<div class="name-cell">
|
|
<span class="name">{displayName}</span>
|
|
{#if hasSeason || hasSeries}
|
|
<div class="tags">
|
|
{#if hasSeason}
|
|
<CharacterTag {character} type="season" />
|
|
{/if}
|
|
{#if hasSeries}
|
|
<CharacterTag {character} type="series" />
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use '$src/themes/spacing' as *;
|
|
@use '$src/themes/typography' as *;
|
|
|
|
.name-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $unit-half;
|
|
padding: $unit-half 0;
|
|
}
|
|
|
|
.name {
|
|
font-weight: $medium;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: $unit-half;
|
|
}
|
|
</style>
|