kopia lustrzana https://github.com/cloudflare/wildebeest
38 wiersze
1.2 KiB
TypeScript
38 wiersze
1.2 KiB
TypeScript
import { $, component$, Slot } from '@builder.io/qwik'
|
|
import { useNavigate } from '@builder.io/qwik-city'
|
|
|
|
export default component$<{ withBackButton?: boolean; backButtonPlacement?: 'start' | 'end' }>(
|
|
({ withBackButton, backButtonPlacement = 'start' }) => {
|
|
const nav = useNavigate()
|
|
|
|
const goBack = $(() => {
|
|
if (window.history.length > 1) {
|
|
window.history.back()
|
|
} else {
|
|
nav('/explore')
|
|
}
|
|
})
|
|
|
|
const backButton = !withBackButton ? (
|
|
// eslint-disable-next-line qwik/single-jsx-root
|
|
<></>
|
|
) : (
|
|
<div class="flex justify-between items-center bg-wildebeest-700">
|
|
<button class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" onClick$={goBack}>
|
|
<i class="fa fa-chevron-left mr-2 w-3 inline-block" />
|
|
<span class="hover:underline">Back</span>
|
|
</button>
|
|
</div>
|
|
)
|
|
return (
|
|
<header class="bg-wildebeest-900 sticky top-[3.9rem] xl:top-0 xl:pt-2.5 z-10">
|
|
<div class="flex bg-wildebeest-700 xl:rounded-t overflow-hidden">
|
|
{backButtonPlacement === 'start' && backButton}
|
|
<Slot />
|
|
{backButtonPlacement === 'end' && <div class="ml-auto">{backButton}</div>}
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|
|
)
|