Localize the following page using the next-intl package.
After the updated code, pleas provide a list all the strings that need translating under the form=
prefix.code1 ➡️ text1
prefix.code2 ➡️ text2
...
## Page Code ##
```
import { FirebasePrompt } from "@/lib/firebase_prompts";
import { PromptCard } from "./prompt-card";
const PromptSuggestions = ({ prompts }: { prompts: FirebasePrompt[] }) => {
return (
<div className="col-span-2 flex flex-col gap-4">
<h2 className="text-2xl font-bold font-display px-4">
Related Prompts
</h2>
<div className="flex flex-col gap-4">
{prompts.map((prompt) => (
<PromptCard key={prompt.id} prompt={prompt} />
))}
</div>
</div>
);
};
export { PromptSuggestions };
```
To localize the provided code using the `next-intl` package, you need to replace the static strings with internationalization (i18n) functions. Here’s the updated code with the appropriate changes.
```javascript
import { useTranslations } from 'next-intl'; // Import the useTranslations hook
import { FirebasePrompt } from "@/lib/firebase_prompts";
import { PromptCard } from "./prompt-card";
const PromptSuggestions = ({ prompts }: { prompts: FirebasePrompt[] }) => {
const t = useTranslations('PromptSuggestions'); // Initialize translations
return (
<div className="col-span-2 flex flex-col gap-4">
<h2 className="text-2xl font-bold font-display px-4">
{t('relatedPrompts')} // Use the translation key
</h2>
<div className="flex flex-col gap-4">
{prompts.map((prompt) => (
<PromptCard key={prompt.id} prompt={prompt} />
))}
</div>
</div>
);
};
export { PromptSuggestions };
```
### List of strings that need translating:
```
PromptSuggestions.relatedPrompts ➡️ Related Prompts
```
Make sure to update your translation files accordingly to include the necessary string translations under the `PromptSuggestions` namespace.
