56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* LocaleSwitcher
|
|
*
|
|
* Simple SV / EN text switcher with fade transition.
|
|
* NOT wired into nav yet — import when EN content is ready.
|
|
*
|
|
* Usage in Nav/index.tsx when ready:
|
|
* import { LocaleSwitcher } from '@/components/LocaleSwitcher'
|
|
* <LocaleSwitcher />
|
|
*/
|
|
|
|
import { usePathname } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
|
|
export function LocaleSwitcher() {
|
|
const pathname = usePathname()
|
|
const isEN = pathname.startsWith('/en')
|
|
|
|
const alternatePath = isEN
|
|
? pathname.replace(/^\/en/, '') || '/'
|
|
: `/en${pathname === '/' ? '' : pathname}`
|
|
|
|
return (
|
|
<Link
|
|
href={alternatePath}
|
|
className="
|
|
relative inline-flex items-center
|
|
font-joey-medium text-sm tracking-wide
|
|
text-fd-navy dark:text-white
|
|
hover:text-fd-yellow dark:hover:text-fd-yellow
|
|
transition-colors duration-200
|
|
"
|
|
aria-label={isEN ? 'Byt till svenska' : 'Switch to English'}
|
|
>
|
|
<span
|
|
className={`
|
|
transition-opacity duration-200
|
|
${isEN ? 'opacity-100' : 'opacity-0 absolute'}
|
|
`}
|
|
>
|
|
SV
|
|
</span>
|
|
<span
|
|
className={`
|
|
transition-opacity duration-200
|
|
${!isEN ? 'opacity-100' : 'opacity-0 absolute'}
|
|
`}
|
|
>
|
|
EN
|
|
</span>
|
|
</Link>
|
|
)
|
|
}
|