kopia lustrzana https://github.com/cloudflare/wildebeest
57 wiersze
1.3 KiB
TypeScript
57 wiersze
1.3 KiB
TypeScript
import { component$, Slot, useStylesScoped$ } from '@builder.io/qwik'
|
|
import { Link, useLocation } from '@builder.io/qwik-city'
|
|
import StickyHeader from '~/components/StickyHeader/StickyHeader'
|
|
import styles from './layout.scss?inline'
|
|
|
|
type LinkConfig = {
|
|
linkText: string
|
|
linkTarget: string
|
|
}
|
|
|
|
export default component$(() => {
|
|
useStylesScoped$(styles)
|
|
const location = useLocation()
|
|
|
|
const renderNavLink = ({ linkText, linkTarget }: LinkConfig) => {
|
|
const isActive = location.pathname.replace(/\/$/, '') === linkTarget
|
|
|
|
return (
|
|
<div class={`py-4 ${isActive ? 'active' : ''}`}>
|
|
<Link href={linkTarget} class="no-underline text-bold text-wildebeest-200 py-4">
|
|
{linkText}
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const links = [
|
|
{
|
|
linkText: 'Posts',
|
|
linkTarget: '/explore',
|
|
},
|
|
{
|
|
linkText: 'Hashtags',
|
|
linkTarget: '/explore/tags',
|
|
},
|
|
{
|
|
linkText: 'News',
|
|
linkTarget: '/explore/links',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div class="explore-wrapper flex flex-col">
|
|
<StickyHeader>
|
|
<h2 class="text-reg text-md m-0 p-4 bg-wildebeest-700 xl:rounded-t">
|
|
<i class="fa fa-hashtag fa-fw mr-3" />
|
|
<span>Explore</span>
|
|
</h2>
|
|
</StickyHeader>
|
|
<div class="bg-wildebeest-800 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
|
|
<div class="flex-auto">
|
|
<Slot />
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|