mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
Iterated with translations
This commit is contained in:
Henrik Larsson
191
components/ui/dropdown/dropdown.tsx
Normal file
191
components/ui/dropdown/dropdown.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
|
||||
import { CheckIcon, ChevronRightIcon, CircleIcon } from '@radix-ui/react-icons'
|
||||
import * as React from 'react'
|
||||
|
||||
import { cn } from 'lib/utils'
|
||||
|
||||
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||
|
||||
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||
|
||||
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||
|
||||
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||
|
||||
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100',
|
||||
inset && 'pl-8',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-high-contrast shadow-md animate-in slide-in-from-left-1',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'z-50 min-w-[8rem] overflow-hidden bg-app text-high-contrast animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm px-2 py-1 text-sm font-medium outline-none hover:bg-subtle focus:bg-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
inset && 'pl-8',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none hover:bg-subtle focus:bg-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none hover:bg-subtle focus:bg-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<CircleIcon className="h-2 w-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'px-2 py-1.5 text-sm font-semibold text-high-contrast',
|
||||
inset && 'pl-8',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn('-mx-1 my-1 h-px bg-ui-border', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
'ml-auto text-xs tracking-widest text-low-contrast',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
|
||||
|
||||
export {
|
||||
DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator,
|
||||
DropdownMenuShortcut, DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger, DropdownMenuTrigger
|
||||
}
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { i18n } from '../../i18n-config'
|
||||
|
||||
export default function LocaleSwitcher() {
|
||||
const pathName = usePathname()
|
||||
const redirectedPathName = (locale: string) => {
|
||||
if (!pathName) return '/'
|
||||
const segments = pathName.split('/')
|
||||
segments[1] = locale
|
||||
return segments.join('/')
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>Locale switcher:</p>
|
||||
<ul>
|
||||
{i18n.locales.map((locale) => {
|
||||
return (
|
||||
<li key={locale}>
|
||||
<Link href={redirectedPathName(locale)}>{locale}</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
142
components/ui/locale-switcher/I18nWidget.tsx
Normal file
142
components/ui/locale-switcher/I18nWidget.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import { useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import { cn } from '@lib/utils'
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@components/ui/Dropdown/Dropdown'
|
||||
|
||||
interface LOCALE_DATA {
|
||||
name: string
|
||||
img: {
|
||||
filename: string
|
||||
alt: string
|
||||
}
|
||||
}
|
||||
|
||||
const LOCALES_MAP: Record<string, LOCALE_DATA> = {
|
||||
sv: {
|
||||
name: 'Swedish',
|
||||
img: {
|
||||
filename: 'flag-sv.svg',
|
||||
alt: 'Swedish flag',
|
||||
},
|
||||
},
|
||||
nn: {
|
||||
name: 'Norwegian',
|
||||
img: {
|
||||
filename: 'flag-no.svg',
|
||||
alt: 'Norwegian flag',
|
||||
},
|
||||
},
|
||||
en: {
|
||||
name: 'English',
|
||||
img: {
|
||||
filename: 'flag-en.svg',
|
||||
alt: 'British flag',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
interface I18nWidgetProps {
|
||||
translations: [] | any
|
||||
}
|
||||
|
||||
const I18nWidget = ({ translations }: I18nWidgetProps) => {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
const { locale, locales, defaultLocale = 'sv' } = useRouter()
|
||||
const router = useRouter()
|
||||
|
||||
const options: any = locales?.filter((val) => val !== locale)
|
||||
const currentLocale = locale || defaultLocale
|
||||
|
||||
const handleClick = (e: any, locale: string) => {
|
||||
e.preventDefault()
|
||||
|
||||
const parent = e.target
|
||||
|
||||
if (parent.nodeName !== 'LI') {
|
||||
return
|
||||
}
|
||||
|
||||
let href = '/'
|
||||
|
||||
const hasChildLink = parent.querySelector('a').href !== null
|
||||
|
||||
if (hasChildLink) {
|
||||
href = parent.querySelector('a').href
|
||||
}
|
||||
|
||||
router.push({ pathname: href }, { pathname: href }, { locale: locale })
|
||||
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className={
|
||||
'w-10 h-10 duration-200 bg-app shrink-0 flex items-center justify-center transition hover:scale-105'
|
||||
}
|
||||
aria-label="Language selector"
|
||||
>
|
||||
<Image
|
||||
width="13"
|
||||
height="18"
|
||||
className="flex w-5 h-auto pointer-events-none rounded-[1px]"
|
||||
src={`/${LOCALES_MAP[currentLocale].img.filename}`}
|
||||
alt={LOCALES_MAP[currentLocale].img.alt}
|
||||
unoptimized
|
||||
/>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="drop-shadow-xl">
|
||||
<ul className="">
|
||||
{options.map((locale: any) => {
|
||||
const translationLink = translations?.find(
|
||||
(item: object | any) => item.locale === locale
|
||||
)
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={locale}
|
||||
asChild
|
||||
onClick={(e) => handleClick(e, locale)}
|
||||
>
|
||||
<li>
|
||||
<Link
|
||||
href={translationLink ? translationLink.slug.current : '/'}
|
||||
locale={locale}
|
||||
className={cn(
|
||||
'flex items-center w-full cursor-pointer px-1 py-1 text-center transition ease-in-out duration-150 text-high-contrast capitalize'
|
||||
)}
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<span>
|
||||
<Image
|
||||
width="13"
|
||||
height="18"
|
||||
className="mr-2 w-5 h-auto pointer-events-none rounded-[1px]"
|
||||
src={`/${LOCALES_MAP[locale].img.filename}`}
|
||||
alt={LOCALES_MAP[locale].img.alt}
|
||||
/>
|
||||
</span>
|
||||
<span>{LOCALES_MAP[locale].name}</span>
|
||||
</Link>
|
||||
</li>
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
export default I18nWidget
|
||||
1
components/ui/locale-switcher/index.ts
Normal file
1
components/ui/locale-switcher/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default } from './I18nWidget'
|
||||
63
components/ui/locale-switcher/locale-switcher.tsx
Normal file
63
components/ui/locale-switcher/locale-switcher.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from 'components/ui/dropdown/dropdown'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useState } from 'react'
|
||||
import { i18n } from '../../../i18n-config'
|
||||
|
||||
interface LocaleSwitcherProps {
|
||||
currentLocale: string
|
||||
}
|
||||
|
||||
export default function LocaleSwitcher({currentLocale}: LocaleSwitcherProps) {
|
||||
const pathName = usePathname()
|
||||
|
||||
const redirectedPathName = (locale: string) => {
|
||||
if (!pathName) return '/'
|
||||
const segments = pathName.split('/')
|
||||
segments[1] = locale
|
||||
return segments.join('/')
|
||||
}
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<DropdownMenu open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className={
|
||||
'duration-200 bg-app shrink-0 flex items-center justify-center transition hover:scale-105'
|
||||
}
|
||||
aria-label="Language selector"
|
||||
>
|
||||
Locale: {currentLocale}
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="drop-shadow-xl">
|
||||
<ul className="">
|
||||
{i18n.locales.map((locale) => {
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={locale}
|
||||
asChild
|
||||
>
|
||||
<li key={locale}>
|
||||
<Link href={redirectedPathName(locale)}>{locale}</Link>
|
||||
</li>
|
||||
</DropdownMenuItem>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user