granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add backHref prop to CrewHeader, fix title alignment

Browse source
This commit is contained in:
Justin Edmund 2025-12-16 14:45:32 -08:00
parent e1d8c92a5b
commit 5fb2331958
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/lib/components/crew/CrewHeader.svelte
View file

@ -2,6 +2,7 @@
<script lang="ts"> <script lang="ts">
import type { Snippet } from 'svelte' import type { Snippet } from 'svelte'
import Button from '$lib/components/ui/Button.svelte'
interface Props { interface Props {
/** Main title text */ /** Main title text */
@ -10,18 +11,23 @@
subtitle?: string | undefined subtitle?: string | undefined
/** Optional description text */ /** Optional description text */
description?: string | undefined description?: string | undefined
/** Optional back navigation URL */
backHref?: string | undefined
/** Content rendered below title (e.g., filter tabs) */ /** Content rendered below title (e.g., filter tabs) */
belowTitle?: Snippet | undefined belowTitle?: Snippet | undefined
/** Action buttons on the right */ /** Action buttons on the right */
actions?: Snippet | undefined actions?: Snippet | undefined
} }
const { title, subtitle, description, belowTitle, actions }: Props = $props() const { title, subtitle, description, backHref, belowTitle, actions }: Props = $props()
</script> </script>
<div class="section-header"> <div class="section-header">
<div class="header-info"> <div class="header-info">
<div class="title-row"> <div class="title-row">
{#if backHref}
<Button variant="ghost" size="small" iconOnly icon="arrow-left" href={backHref} />
{/if}
<span class="header-title">{title}</span> <span class="header-title">{title}</span>
{#if subtitle} {#if subtitle}
<span class="header-subtitle">[{subtitle}]</span> <span class="header-subtitle">[{subtitle}]</span>
@ -61,7 +67,7 @@
.title-row { .title-row {
display: flex; display: flex;
align-items: baseline; align-items: center;
gap: spacing.$unit; gap: spacing.$unit;
} }