add crew teams page stub

This commit is contained in:
Justin Edmund 2025-12-20 04:16:08 -08:00
parent fe3ff17367
commit 37bb40293d

View file

@ -0,0 +1,68 @@
<svelte:options runes={true} />
<script lang="ts">
import { crewStore } from '$lib/stores/crew.store.svelte'
import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
import CrewTabs from '$lib/components/crew/CrewTabs.svelte'
import type { PageData } from './$types'
interface Props {
data: PageData
}
let { data }: Props = $props()
</script>
<svelte:head>
<title>Crew Teams / granblue.team</title>
</svelte:head>
<div class="page">
<div class="card">
<CrewHeader
title={crewStore.crew?.name ?? ''}
subtitle={crewStore.crew?.gamertag ?? undefined}
description={crewStore.crew?.description ?? undefined}
/>
<CrewTabs userElement={data.currentUser?.element} />
<div class="empty-state">
<p>Coming soon</p>
</div>
</div>
</div>
<style lang="scss">
@use '$src/themes/effects' as effects;
@use '$src/themes/layout' as layout;
@use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography;
.page {
margin: 0 auto;
max-width: var(--main-max-width);
}
.card {
background: var(--card-bg);
border: 0.5px solid rgba(0, 0, 0, 0.18);
border-radius: layout.$page-corner;
box-shadow: effects.$page-elevation;
overflow: hidden;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: spacing.$unit-4x;
color: var(--text-secondary);
font-size: typography.$font-small;
p {
margin: 0;
}
}
</style>