Arnaud
08ab9ac71f
Full sweep of hardcoded English strings across:
- Meal pairing and drink pairing dialogs (titles, descriptions, role/
type labels, regenerate/generate buttons, progress labels) — also
fixed drink type labels that had French text hardcoded regardless
of locale ("Sans alcool"/"Chaud").
- Nutrition panel — had no useTranslations at all.
- Comments: header, empty/loading state, post/reply/cancel/delete
buttons, relative timestamps (just now/Xm ago/Xh ago/Xd ago), and
comment-reactions' toasts + aria-labels.
- Rating stars toasts.
- Direct messages: thread, conversation list, message button, both
/messages pages.
- People search page and component.
- URL import dialog (title, description, buttons, toasts).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Star } from "lucide-react";
|
|
import { toast } from "sonner";
|
|
import { useTranslations } from "next-intl";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function RatingStars({
|
|
recipeId,
|
|
initialScore = 0,
|
|
readonly = false,
|
|
size = "default",
|
|
}: {
|
|
recipeId: string;
|
|
initialScore?: number;
|
|
readonly?: boolean;
|
|
size?: "sm" | "default";
|
|
}) {
|
|
const t = useTranslations("social");
|
|
const [score, setScore] = useState(initialScore);
|
|
const [hovered, setHovered] = useState(0);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
async function rate(value: number) {
|
|
if (readonly || saving) return;
|
|
setSaving(true);
|
|
try {
|
|
const res = await fetch(`/api/v1/recipes/${recipeId}/rate`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ score: value }),
|
|
});
|
|
if (!res.ok) {
|
|
const err = await res.json() as { error?: string };
|
|
toast.error(err.error ?? t("ratingFailed"));
|
|
return;
|
|
}
|
|
setScore(value);
|
|
toast.success(t("ratingSaved"));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
const iconSize = size === "sm" ? "h-3.5 w-3.5" : "h-5 w-5";
|
|
const display = hovered || score;
|
|
|
|
return (
|
|
<div className={cn("flex items-center gap-0.5", readonly && "pointer-events-none")}>
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<button
|
|
key={i}
|
|
type="button"
|
|
disabled={readonly || saving}
|
|
onMouseEnter={() => !readonly && setHovered(i)}
|
|
onMouseLeave={() => !readonly && setHovered(0)}
|
|
onClick={() => rate(i)}
|
|
className={cn("transition-colors", !readonly && "hover:scale-110")}
|
|
>
|
|
<Star
|
|
className={cn(
|
|
iconSize,
|
|
i <= display ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground/30"
|
|
)}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|