adds japanese localization support

Author: stuartwk

src/components/Voting/Form.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import {
 	onPostCreated,
 	onUpdate,
 } from '@devprotocol/clubs-plugin-posts/plugin-helper'
 import type { Poll } from '../../types.ts'
+import { Strings } from '../i18n'
+import { i18nFactory } from '@devprotocol/clubs-core'
+
+const i18nBase = i18nFactory(Strings)
+let i18n = i18nBase(['en'])
 
 type Choice = {
 	id: number
@@ -87,6 +92,7 @@ const togglePollState = () => {
 }
 
 onMounted(() => {
+	i18n = i18nBase(navigator.languages)
 	window.addEventListener(POLL_EVENT, togglePollState)
 })
 
@@ -169,7 +175,7 @@ watch(isPollOpen, (isOpen) => {
 		</div>
 		<div class="py-4 px-4 border-t border-gray-400">
 			<p class="mb-2 text-gray-400 font-bold">
-				Immediate Result Publication Settings
+				{{ i18n('ImmediateResultPublicationSettings') }}
 			</p>
 			<label class="relative inline-flex items-center cursor-pointer">
 				<input v-model="publication" type="checkbox" class="sr-only peer" />
@@ -263,7 +269,7 @@ watch(isPollOpen, (isOpen) => {
 				class="py-4 w-full border text-red-500"
 				@click="handleClickRemovePoll"
 			>
-				Remove poll
+				{{ i18n('RemovePoll') }}
 			</button>
 		</div>
 	</div>

src/components/Voting/Unpublished.vue

@@ -1,13 +1,23 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { Strings } from '../i18n'
+import { i18nFactory } from '@devprotocol/clubs-core'
+
+const i18nBase = i18nFactory(Strings)
+let i18n = i18nBase(['en'])
+
+onMounted(() => {
+	i18n = i18nBase(navigator.languages)
+})
+</script>
 <template>
 	<div class="flex flex-col justify-center items-center p-4">
 		<div class="px-8 py-4 border border-gray-400 text-center">
 			<p class="text-xl text-gray-600 font-bold mb-2">
-				Poll Results are Unpublished
+				{{ i18n('Unpublished') }}
 			</p>
 			<p class="text text-gray-600">
-				At the moment, the poll results are set to unpublished.<br />Please wait
-				until the voting period has ended.
+				{{ i18n('UnpublishedDetail') }}<br />{{ i18n('PleaseWait') }}
 			</p>
 		</div>
 	</div>

src/components/i18n/index.ts

@@ -0,0 +1,24 @@
+import type { ClubsI18nParts } from '@devprotocol/clubs-core'
+
+export const Strings = {
+	RemovePoll: {
+		en: 'Remove poll',
+		ja: '',
+	},
+	ImmediateResultPublicationSettings: {
+		en: 'Immediate Result Publication Settings',
+		ja: '',
+	},
+	Unpublished: {
+		en: 'Poll Results are Unpublished',
+		ja: '',
+	},
+	UnpublishedDetail: {
+		en: 'At the moment, the poll results are set to unpublished.',
+		ja: '',
+	},
+	PleaseWait: {
+		en: 'Please wait until the voting period has ended.',
+		ja: '',
+	},
+} satisfies ClubsI18nParts