Justin Edmund
b34cc8a4eb
- Update all component imports from useTranslation to useTranslations - Replace react-i18next and next-i18next imports with next-intl - Convert Trans components to t.rich() for rich text formatting - Update all translation hook usage to next-intl API This affects 80+ component files across the codebase including: - Character, weapon, summon components - Auth modals (login, signup, account) - Party management components - Filter and search components - Toast notifications - About pages and content updates 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
113 lines
2.5 KiB
TypeScript
113 lines
2.5 KiB
TypeScript
import React, { ComponentProps, PropsWithChildren } from 'react'
|
|
import { useTranslations } from 'next-intl'
|
|
import classNames from 'classnames'
|
|
import { CommandItem } from '~components/common/Command'
|
|
import styles from './index.module.scss'
|
|
|
|
interface Props extends ComponentProps<'div'> {
|
|
className?: string
|
|
icon?: {
|
|
alt: string
|
|
src: string
|
|
}
|
|
extra: boolean
|
|
selected: boolean
|
|
tabIndex?: number
|
|
value: string | number
|
|
onSelect: () => void
|
|
onArrowKeyPressed?: (direction: 'Up' | 'Down') => void
|
|
onEscapeKeyPressed?: () => void
|
|
}
|
|
|
|
const placeholderSlugs = [
|
|
'all',
|
|
'farming',
|
|
'three-gauge',
|
|
'five-gauge',
|
|
'ex-plus',
|
|
'nm90',
|
|
'nm95',
|
|
'nm100',
|
|
'nm150',
|
|
'nm200',
|
|
'1-star',
|
|
'2-star',
|
|
'3-star',
|
|
'4-star',
|
|
'5-star',
|
|
'db95',
|
|
'db135',
|
|
'db175',
|
|
]
|
|
const RaidItem = React.forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
|
|
function Item(
|
|
{
|
|
icon,
|
|
value,
|
|
extra,
|
|
selected,
|
|
tabIndex,
|
|
children,
|
|
onEscapeKeyPressed,
|
|
onArrowKeyPressed,
|
|
...props
|
|
}: PropsWithChildren<Props>,
|
|
forwardedRef
|
|
) {
|
|
const t = useTranslations('common')
|
|
|
|
const classes = classNames({
|
|
raid: true,
|
|
[styles.item]: true,
|
|
})
|
|
|
|
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
|
if (event.key === 'Escape' && onEscapeKeyPressed) {
|
|
event.preventDefault()
|
|
onEscapeKeyPressed()
|
|
}
|
|
|
|
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
|
event.preventDefault()
|
|
if (onArrowKeyPressed) {
|
|
onArrowKeyPressed(event.key === 'ArrowUp' ? 'Up' : 'Down')
|
|
}
|
|
}
|
|
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault()
|
|
props.onSelect()
|
|
}
|
|
}
|
|
|
|
return (
|
|
<CommandItem
|
|
{...props}
|
|
className={classes}
|
|
tabIndex={tabIndex}
|
|
value={`${value}`}
|
|
onClick={props.onSelect}
|
|
onKeyDown={handleKeyDown}
|
|
ref={forwardedRef}
|
|
>
|
|
{placeholderSlugs.includes(`${value}`) ? (
|
|
<div className={styles.placeholder} />
|
|
) : (
|
|
icon && <img alt={icon.alt} src={icon.src} />
|
|
)}
|
|
<span className={styles.text}>{children}</span>
|
|
{selected && (
|
|
<i className={styles.selected}>{t('combobox.selected')}</i>
|
|
)}
|
|
{extra && <i className={styles.extraIndicator}>EX</i>}
|
|
</CommandItem>
|
|
)
|
|
}
|
|
)
|
|
|
|
RaidItem.defaultProps = {
|
|
extra: false,
|
|
selected: false,
|
|
}
|
|
|
|
export default RaidItem
|