Skip to content

Commit f33d897

Browse files
3w36zj63w36zj6
committed
feat: 翻訳率を表示するバッジを追加
1 parent 6efc8e4 commit f33d897

File tree

1 file changed

+96
-54
lines changed

1 file changed

+96
-54
lines changed

‎website/src/components/ui/common/Header.tsx‎

Lines changed: 96 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,62 @@ import {
55
typstOfficialUrl,
66
version,
77
} from "../../../metadata";
8-
import { DiscordIcon, GitHubIcon, MenuIcon, SearchIcon } from "../../icons";
8+
import { calculateTranslationProgressRate } from "../../../utils/translationStatus";
9+
import {
10+
DiscordIcon,
11+
GitHubIcon,
12+
LanguageIcon,
13+
MenuIcon,
14+
SearchIcon,
15+
} from "../../icons";
916
import { SiteTitle } from "./SiteTitle";
1017

1118
const VersionBadge = () => (
12-
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-600 ml-2">
19+
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-600">
1320
v{version}
1421
</span>
1522
);
1623

24+
const TranslationCoverageBadge = () => {
25+
const rate = calculateTranslationProgressRate() * 100;
26+
return (
27+
<div class="inline-flex items-center gap-2 px-2 py-1 border border-gray-200 rounded-md bg-gray-50">
28+
<div class="flex items-center gap-1">
29+
<div class="w-4 h-4 text-gray-600">
30+
<LanguageIcon />
31+
</div>
32+
<span class="text-xs text-gray-600 font-medium">翻訳率</span>
33+
</div>
34+
<div class="flex items-center gap-1">
35+
<div class="w-12 h-1.5 bg-gray-200 rounded-full overflow-hidden">
36+
<div
37+
class="h-full bg-green-500 rounded-full transition-all duration-300"
38+
style={`width: ${rate}%`}
39+
/>
40+
</div>
41+
<span class="text-xs text-gray-600 font-medium">
42+
{rate.toFixed(0)}%
43+
</span>
44+
</div>
45+
</div>
46+
);
47+
};
48+
1749
export const Header = () => {
1850
return (
1951
<>
2052
<header class="boring sticky top-0 z-40 bg-white border-b border-gray-200 hidden lg:block">
21-
<div class="flex justify-between items-center py-3 px-6">
22-
<div class="flex items-center gap-4">
23-
<div class="flex items-center">
24-
<SiteTitle />
25-
<VersionBadge />
26-
</div>
53+
<div class="relative flex items-center justify-between h-16 px-6">
54+
<div class="flex items-center gap-2 flex-shrink-0">
55+
<SiteTitle />
56+
<VersionBadge />
57+
<TranslationCoverageBadge />
58+
</div>
59+
60+
<div class="xl:absolute xl:left-1/2 xl:transform xl:-translate-x-1/2">
2761
<button
2862
type="button"
29-
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-200 rounded-md hover:border-gray-300 transition-colors w-48"
63+
class="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 hover:text-gray-800 border border-gray-200 rounded-md hover:border-gray-300 transition-colors xl:w-64 w-48 h-10"
3064
x-on:click="searchOpen = true"
3165
>
3266
<div class="w-4 h-4 text-gray-600">
@@ -35,56 +69,64 @@ export const Header = () => {
3569
<span class="text-left flex-1">検索...</span>
3670
</button>
3771
</div>
38-
<nav class="ml-auto">
39-
<ul class="flex items-center gap-4">
40-
<li class="social">
41-
<a
42-
href={discordServerUrl}
43-
class="text-gray-600 hover:text-gray-800 transition-colors"
44-
>
45-
<div class="w-4 h-4">
46-
<DiscordIcon />
47-
</div>
48-
</a>
49-
</li>
50-
<li class="social">
51-
<a
52-
href={githubRepositoryUrl}
53-
class="text-gray-600 hover:text-gray-800 transition-colors"
54-
>
55-
<div class="w-4 h-4 text-gray-600 hover:text-gray-800 transition-colors">
56-
<GitHubIcon />
57-
</div>
58-
</a>
59-
</li>
60-
<li class="secondary">
61-
<a
62-
href={typstOfficialUrl}
63-
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
64-
>
65-
Typst公式サイト
66-
</a>
67-
</li>
68-
<li class="secondary">
69-
<a
70-
href={typstOfficialDocsUrl}
71-
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
72-
>
73-
Typst公式ドキュメント
74-
</a>
75-
</li>
76-
</ul>
77-
</nav>
72+
73+
<div class="flex items-center gap-4 flex-shrink-0">
74+
<nav>
75+
<ul class="flex items-center gap-4">
76+
<li class="social">
77+
<a
78+
href={discordServerUrl}
79+
class="text-gray-600 hover:text-gray-800 transition-colors"
80+
>
81+
<div class="w-4 h-4">
82+
<DiscordIcon />
83+
</div>
84+
</a>
85+
</li>
86+
<li class="social">
87+
<a
88+
href={githubRepositoryUrl}
89+
class="text-gray-600 hover:text-gray-800 transition-colors"
90+
>
91+
<div class="w-4 h-4 text-gray-600 hover:text-gray-800 transition-colors">
92+
<GitHubIcon />
93+
</div>
94+
</a>
95+
</li>
96+
<li class="secondary">
97+
<a
98+
href={typstOfficialUrl}
99+
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
100+
>
101+
Typst公式サイト
102+
</a>
103+
</li>
104+
<li class="secondary">
105+
<a
106+
href={typstOfficialDocsUrl}
107+
class="text-sm text-gray-600 hover:text-gray-800 transition-colors"
108+
>
109+
Typst公式ドキュメント
110+
</a>
111+
</li>
112+
</ul>
113+
</nav>
114+
</div>
78115
</div>
79116
</header>
80117

81118
<header class="sticky top-0 z-30 bg-white border-b border-gray-200 flex lg:hidden items-center justify-between px-4">
82-
<div class="flex justify-between items-center py-3 w-full">
83-
<div class="flex items-center">
84-
<SiteTitle />
85-
<VersionBadge />
119+
<div class="flex justify-between items-center py-3 w-full min-h-16">
120+
<div class="flex flex-col gap-1 min-w-0">
121+
<div class="flex items-center gap-2">
122+
<SiteTitle />
123+
<VersionBadge />
124+
</div>
125+
<div>
126+
<TranslationCoverageBadge />
127+
</div>
86128
</div>
87-
<div class="flex items-center gap-2">
129+
<div class="flex items-center gap-2 flex-shrink-0 self-center">
88130
<button
89131
type="button"
90132
class="p-2 text-gray-600 hover:text-gray-800 transition-colors"

0 commit comments

Comments
 (0)