- My Styles
+ {t("myStyles")}
{userStyles.map(style => (
- Create with AI
+ {t("createWithAI")}
- Built-in Styles
+ {t("builtinStyles")}
{builtinStyles.map(style => (
ws.refreshPreview()}
onStyleSaved={async (saved) => {
- showToast(`Style saved: ${saved.title}`, "success")
+ showToast(t("styleSaved", { title: saved.title }), "success")
await refreshStyles()
}}
/>
@@ -337,9 +340,9 @@ export default function StylesPage() {
{ if (!open) setDeleteConfirm(null) }}
- title="Delete style"
- description={<>Are you sure you want to delete {deleteConfirm}? This cannot be undone.>}
- confirmLabel="Delete"
+ title={t("deleteStyleTitle")}
+ description={<>{t.rich("deleteDescription", { name: () => {deleteConfirm} })}>}
+ confirmLabel={tCommon("delete")}
variant="destructive"
onConfirm={() => deleteConfirm && handleDelete(deleteConfirm)}
/>
@@ -371,6 +374,7 @@ function StyleListCard({ style, onPreview, onPin, onDelete, onExport, onRename,
onRenameSubmit?: () => void
onRenameCancel?: () => void
}) {
+ const t = useTranslations("stylesPage")
const cardRef = useRef(null)
const [scale, setScale] = useState(0.15)
@@ -438,7 +442,7 @@ function StyleListCard({ style, onPreview, onPin, onDelete, onExport, onRename,
className={`p-1 rounded transition-colors ${
style.pinned ? "text-brand-teal" : "text-foreground-muted hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity duration-150"
}`}
- aria-label={style.pinned ? `Unpin ${style.name}` : `Pin ${style.name}`}
+ aria-label={style.pinned ? t("unpinAria", { name: style.name }) : t("pinAria", { name: style.name })}
>
@@ -446,7 +450,7 @@ function StyleListCard({ style, onPreview, onPin, onDelete, onExport, onRename,
@@ -455,7 +459,7 @@ function StyleListCard({ style, onPreview, onPin, onDelete, onExport, onRename,
@@ -463,7 +467,7 @@ function StyleListCard({ style, onPreview, onPin, onDelete, onExport, onRename,