b4447f0e38
Reviewed-on: https://git.juancman.dev/juancmandev/website/pulls/4 Co-authored-by: juancmandev <juancmandev@protonmail.com> Co-committed-by: juancmandev <juancmandev@protonmail.com>
80 lines
1.8 KiB
Plaintext
80 lines
1.8 KiB
Plaintext
---
|
|
import logo from '@/assets/logo.png';
|
|
import { Image } from 'astro:assets';
|
|
import LinkButton from '@/components/link-button';
|
|
import { ChevronUp, Compass } from 'lucide-react';
|
|
import type { lang } from '@/i18n/utils';
|
|
|
|
type Props = {
|
|
lang: lang;
|
|
};
|
|
|
|
const locales = {
|
|
en: {
|
|
to: '/es',
|
|
switch_language: '🇲🇽',
|
|
top: 'Top',
|
|
navigation: 'Navigation',
|
|
},
|
|
es: {
|
|
to: '/',
|
|
switch_language: '🇺🇸',
|
|
top: 'Arriba',
|
|
navigation: 'Navevación',
|
|
},
|
|
};
|
|
|
|
const { lang } = Astro.props;
|
|
---
|
|
|
|
<header
|
|
class='py-2 px-2 lg:px-0 fixed top-0 z-50 flex w-full items-center justify-between border-b border-secondary backdrop-blur-lg'
|
|
>
|
|
<div class='w-full max-w-[800px] mx-auto flex items-center justify-between'>
|
|
<section class='flex max-w-max'>
|
|
<LinkButton
|
|
href={lang === 'en' ? '/' : '/es'}
|
|
size='icon'
|
|
variant='link'
|
|
className='rounded-full px-0'
|
|
>
|
|
<Image
|
|
src={logo}
|
|
width={80}
|
|
height={80}
|
|
loading='eager'
|
|
decoding='sync'
|
|
fetchpriority='high'
|
|
class='w-auto h-auto aspect-square'
|
|
alt='juancmandev logo'
|
|
/>
|
|
</LinkButton>
|
|
</section>
|
|
<section class='flex items-center gap-4'>
|
|
<LinkButton
|
|
variant='link'
|
|
href={locales[lang].to}
|
|
className='p-0 gap-1 text-base'
|
|
>
|
|
{locales[lang].switch_language}
|
|
</LinkButton>
|
|
<LinkButton
|
|
variant='link'
|
|
className='p-0 gap-0.5'
|
|
href='#'
|
|
>
|
|
<ChevronUp className='w-5' />
|
|
{locales[lang].top}
|
|
</LinkButton>
|
|
<LinkButton
|
|
variant='link'
|
|
className='p-0 gap-0.5'
|
|
href='#navigation'
|
|
>
|
|
<Compass className='w-5' />
|
|
{locales[lang].navigation}
|
|
</LinkButton>
|
|
</section>
|
|
</div>
|
|
</header>
|