fix(i18n): wire useTranslation into SetupsView — close verification gap
Replace hardcoded English strings in SetupsView.tsx with t() calls using existing setups namespace keys. Closes the 1 gap found during phase 34 verification. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,10 @@
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useCreateSetup, useSetups } from "../hooks/useSetups";
|
||||
import { SetupCard } from "./SetupCard";
|
||||
|
||||
export function SetupsView() {
|
||||
const { t } = useTranslation(["setups", "common"]);
|
||||
const [newSetupName, setNewSetupName] = useState("");
|
||||
const { data: setups, isLoading } = useSetups();
|
||||
const createSetup = useCreateSetup();
|
||||
@@ -22,7 +24,7 @@ export function SetupsView() {
|
||||
type="text"
|
||||
value={newSetupName}
|
||||
onChange={(e) => setNewSetupName(e.target.value)}
|
||||
placeholder="New setup name..."
|
||||
placeholder={t("setups:namePlaceholder")}
|
||||
className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
|
||||
/>
|
||||
<button
|
||||
@@ -30,7 +32,7 @@ export function SetupsView() {
|
||||
disabled={!newSetupName.trim() || createSetup.isPending}
|
||||
className="px-4 py-2 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 text-white text-sm font-medium rounded-lg transition-colors"
|
||||
>
|
||||
{createSetup.isPending ? "Creating..." : "Create"}
|
||||
{createSetup.isPending ? t("setups:creating") : t("common:actions.create")}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -51,7 +53,7 @@ export function SetupsView() {
|
||||
<div className="py-16">
|
||||
<div className="max-w-lg mx-auto text-center">
|
||||
<h2 className="text-xl font-semibold text-gray-900 mb-8">
|
||||
Build your perfect loadout
|
||||
{t("setups:emptyState.title")}
|
||||
</h2>
|
||||
<div className="space-y-6 text-left mb-10">
|
||||
<div className="flex items-start gap-4">
|
||||
@@ -59,9 +61,9 @@ export function SetupsView() {
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Create a setup</p>
|
||||
<p className="font-medium text-gray-900">{t("setups:emptyState.step1Title")}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Name your loadout for a specific trip or activity
|
||||
{t("setups:emptyState.step1Description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,9 +72,9 @@ export function SetupsView() {
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Add items</p>
|
||||
<p className="font-medium text-gray-900">{t("setups:emptyState.step2Title")}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
Pick gear from your collection to include in the setup
|
||||
{t("setups:emptyState.step2Description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,9 +83,9 @@ export function SetupsView() {
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Track weight</p>
|
||||
<p className="font-medium text-gray-900">{t("setups:emptyState.step3Title")}</p>
|
||||
<p className="text-sm text-gray-500">
|
||||
See weight breakdown and optimize your pack
|
||||
{t("setups:emptyState.step3Description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user