|
1 | 1 | "use client"; |
2 | 2 |
|
3 | 3 | import { useMemo } from "react"; |
| 4 | +import { useTranslations } from "next-intl"; |
4 | 5 |
|
5 | 6 | interface NoteFooterStatsProps { |
6 | 7 | content: string; |
7 | 8 | } |
8 | 9 |
|
9 | 10 | export const NoteFooterStats = ({ content }: NoteFooterStatsProps) => { |
| 11 | + const t = useTranslations(); |
10 | 12 | const stats = useMemo(() => { |
11 | 13 | let contentWithoutMetadata = content.replace(/^---\n[\s\S]*?\n---\n/, ""); |
12 | 14 |
|
@@ -70,22 +72,9 @@ export const NoteFooterStats = ({ content }: NoteFooterStatsProps) => { |
70 | 72 | return ( |
71 | 73 | <div className="mt-8 pt-4 border-t border-border no-print"> |
72 | 74 | <div className="flex flex-wrap gap-4 text-md lg:text-sm text-muted-foreground"> |
73 | | - <div className="flex items-center gap-1.5"> |
74 | | - <span className="font-medium"> |
75 | | - {stats.wordCount.toLocaleString()} |
76 | | - </span> |
77 | | - <span>{stats.wordCount === 1 ? "word" : "words"}</span> |
78 | | - </div> |
79 | | - <div className="flex items-center gap-1.5"> |
80 | | - <span className="font-medium"> |
81 | | - {stats.charCount.toLocaleString()} |
82 | | - </span> |
83 | | - <span>{stats.charCount === 1 ? "character" : "characters"}</span> |
84 | | - </div> |
85 | | - <div className="flex items-center gap-1.5"> |
86 | | - <span className="font-medium">{stats.readingTime}</span> |
87 | | - <span>{stats.readingTime === 1 ? "minute" : "minutes"} read</span> |
88 | | - </div> |
| 75 | + <span>{t("notes.wordCount", { count: stats.wordCount })}</span> |
| 76 | + <span>{t("notes.charCount", { count: stats.charCount })}</span> |
| 77 | + <span>{t("notes.readingTime", { count: stats.readingTime })}</span> |
89 | 78 | </div> |
90 | 79 | </div> |
91 | 80 | ); |
|
0 commit comments