Jean-Luc Makiola
9647f5759d
Redesign WeightSummaryCard stats from a disconnected 4-column grid to a compact legend-style list with color dots, percentages, and a divider before the total row. Switch chart and legend colors to a neutral gray palette. Add a currency selector to settings (USD, EUR, GBP, JPY, CAD, AUD) that changes the displayed symbol across the app. This is visual only — no value conversion is performed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
import { createFileRoute, Link } from "@tanstack/react-router";
|
|
import { useCurrency } from "../hooks/useCurrency";
|
|
import { useUpdateSetting } from "../hooks/useSettings";
|
|
import { useWeightUnit } from "../hooks/useWeightUnit";
|
|
import type { Currency, WeightUnit } from "../lib/formatters";
|
|
|
|
const UNITS: WeightUnit[] = ["g", "oz", "lb", "kg"];
|
|
const CURRENCIES: { value: Currency; label: string }[] = [
|
|
{ value: "USD", label: "$" },
|
|
{ value: "EUR", label: "€" },
|
|
{ value: "GBP", label: "£" },
|
|
{ value: "JPY", label: "¥" },
|
|
{ value: "CAD", label: "CA$" },
|
|
{ value: "AUD", label: "A$" },
|
|
];
|
|
|
|
export const Route = createFileRoute("/settings")({
|
|
component: SettingsPage,
|
|
});
|
|
|
|
function SettingsPage() {
|
|
const unit = useWeightUnit();
|
|
const currency = useCurrency();
|
|
const updateSetting = useUpdateSetting();
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="mb-6">
|
|
<Link
|
|
to="/"
|
|
className="text-sm text-gray-500 hover:text-gray-700 mb-2 inline-block"
|
|
>
|
|
← Back
|
|
</Link>
|
|
<h1 className="text-xl font-semibold text-gray-900">Settings</h1>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl border border-gray-100 p-5 space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-900">Weight Unit</h3>
|
|
<p className="text-xs text-gray-500 mt-0.5">
|
|
Choose the unit used to display weights across the app
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
|
|
{UNITS.map((u) => (
|
|
<button
|
|
key={u}
|
|
type="button"
|
|
onClick={() =>
|
|
updateSetting.mutate({
|
|
key: "weightUnit",
|
|
value: u,
|
|
})
|
|
}
|
|
className={`px-2.5 py-1 text-xs rounded-full transition-colors ${
|
|
unit === u
|
|
? "bg-white text-gray-700 shadow-sm font-medium"
|
|
: "text-gray-400 hover:text-gray-600"
|
|
}`}
|
|
>
|
|
{u}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-100" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-sm font-medium text-gray-900">Currency</h3>
|
|
<p className="text-xs text-gray-500 mt-0.5">
|
|
Changes the currency symbol displayed. This does not convert
|
|
values.
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-1 bg-gray-100 rounded-full px-1 py-0.5">
|
|
{CURRENCIES.map((c) => (
|
|
<button
|
|
key={c.value}
|
|
type="button"
|
|
onClick={() =>
|
|
updateSetting.mutate({
|
|
key: "currency",
|
|
value: c.value,
|
|
})
|
|
}
|
|
className={`px-2.5 py-1 text-xs rounded-full transition-colors ${
|
|
currency === c.value
|
|
? "bg-white text-gray-700 shadow-sm font-medium"
|
|
: "text-gray-400 hover:text-gray-600"
|
|
}`}
|
|
>
|
|
{c.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|