(function Sound(
onClick={handleClick}
onKeyDown={handleKeyDown}
>
-
+
{isLoading ? (
@@ -111,9 +114,9 @@ export const Sound = forwardRef(function Sound(
)}
- {label}
+ {translatedLabel}
-
+
);
});
diff --git a/src/components/sounds/sounds.tsx b/src/components/sounds/sounds.tsx
index b32baac..8b77763 100644
--- a/src/components/sounds/sounds.tsx
+++ b/src/components/sounds/sounds.tsx
@@ -1,22 +1,22 @@
import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
import { Sound } from './sound';
import { useLocalStorage } from '@/hooks/use-local-storage';
import { cn } from '@/helpers/styles';
import { fade, scale, mix } from '@/lib/motion';
-
import styles from './sounds.module.css';
-
-import type { Sounds } from '@/data/types';
+import type { Sounds as SoundsType } from '@/data/types';
interface SoundsProps {
functional: boolean;
id: string;
- sounds: Sounds;
+ sounds: SoundsType;
}
export function Sounds({ functional, id, sounds }: SoundsProps) {
+ const { t } = useTranslation();
const [showAll, setShowAll] = useLocalStorage(`${id}-show-more`, false);
const [clickedMore, setClickedMore] = useState(false);
@@ -71,7 +71,7 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {