diff options
Diffstat (limited to 'frontend/src/components/store')
| -rw-r--r-- | frontend/src/components/store/PluginCard.tsx | 16 | ||||
| -rw-r--r-- | frontend/src/components/store/Store.tsx | 54 |
2 files changed, 42 insertions, 28 deletions
diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx index 828d3ae9..b8c622db 100644 --- a/frontend/src/components/store/PluginCard.tsx +++ b/frontend/src/components/store/PluginCard.tsx @@ -7,7 +7,9 @@ import { SuspensefulImage, } from 'decky-frontend-lib'; import { FC, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { InstallType } from '../../plugin'; import { StorePlugin, StorePluginVersion, requestPluginInstall } from '../../store'; interface PluginCardProps { @@ -18,6 +20,8 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => { const [selectedOption, setSelectedOption] = useState<number>(0); const root: boolean = plugin.tags.some((tag) => tag === 'root'); + const { t } = useTranslation(); + return ( <div className="deckyStoreCard" @@ -97,7 +101,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => { plugin.description ) : ( <span> - <i style={{ color: '#666' }}>No description provided.</i> + <i style={{ color: '#666' }}>{t('PluginCard.plugin_no_desc')}</i> </span> )} </span> @@ -109,7 +113,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => { color: '#fee75c', }} > - <i>This plugin has full access to your Steam Deck.</i>{' '} + <i>{t('PluginCard.plugin_full_access')}</i>{' '} <a className="deckyStoreCardDescriptionRootLink" href="https://deckbrew.xyz/root" @@ -144,9 +148,11 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => { <ButtonItem bottomSeparator="none" layout="below" - onClick={() => requestPluginInstall(plugin.name, plugin.versions[selectedOption])} + onClick={() => + requestPluginInstall(plugin.name, plugin.versions[selectedOption], InstallType.INSTALL) + } > - <span className="deckyStoreCardInstallText">Install</span> + <span className="deckyStoreCardInstallText">{t('PluginCard.plugin_install')}</span> </ButtonItem> </div> <div @@ -163,7 +169,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => { label: version.name, })) as SingleDropdownOption[] } - menuLabel="Plugin Version" + menuLabel={t('PluginCard.plugin_version_label') as string} selectedOption={selectedOption} onChange={({ data }) => setSelectedOption(data)} /> diff --git a/frontend/src/components/store/Store.tsx b/frontend/src/components/store/Store.tsx index 68f6c077..f2d941cd 100644 --- a/frontend/src/components/store/Store.tsx +++ b/frontend/src/components/store/Store.tsx @@ -9,6 +9,7 @@ import { findModule, } from 'decky-frontend-lib'; import { FC, useEffect, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import logo from '../../../assets/plugin_store.png'; import Logger from '../../logger'; @@ -25,6 +26,8 @@ const StorePage: FC<{}> = () => { return false; }); + const { t } = useTranslation(); + useEffect(() => { (async () => { const res = await getPluginList(); @@ -54,13 +57,13 @@ const StorePage: FC<{}> = () => { }} tabs={[ { - title: 'Browse', + title: t('Store.store_tabs.title'), content: <BrowseTab children={{ data: data }} />, id: 'browse', renderTabAddon: () => <span className={TabCount}>{data.length}</span>, }, { - title: 'About', + title: t('Store.store_tabs.about'), content: <AboutTab />, id: 'about', }, @@ -73,10 +76,12 @@ const StorePage: FC<{}> = () => { }; const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => { + const { t } = useTranslation(); + const sortOptions = useMemo( (): DropdownOption[] => [ - { data: 1, label: 'Alphabetical (A to Z)' }, - { data: 2, label: 'Alphabetical (Z to A)' }, + { data: 1, label: t('Store.store_tabs.alph_desc') }, + { data: 2, label: t('Store.store_tabs.alph_asce') }, ], [], ); @@ -105,11 +110,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => { width: '47.5%', }} > - <span className="DialogLabel">Sort</span> + <span className="DialogLabel">{t("Store.store_sort.label")}</span> <Dropdown - menuLabel="Sort" + menuLabel={t("Store.store_sort.label") as string} rgOptions={sortOptions} - strDefaultLabel="Last Updated (Newest)" + strDefaultLabel={t("Store.store_sort.label_def") as string} selectedOption={selectedSort} onChange={(e) => setSort(e.data)} /> @@ -122,11 +127,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => { marginLeft: 'auto', }} > - <span className="DialogLabel">Filter</span> + <span className="DialogLabel">{t("Store.store_filter.label")}</span> <Dropdown - menuLabel="Filter" + menuLabel={t("Store.store_filter.label")} rgOptions={filterOptions} - strDefaultLabel="All" + strDefaultLabel={t("Store.store_filter.label_def")} selectedOption={selectedFilter} onChange={(e) => setFilter(e.data)} /> @@ -136,7 +141,7 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => { <div style={{ justifyContent: 'center', display: 'flex' }}> <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}> <div style={{ width: '100%' }}> - <TextField label="Search" value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} /> + <TextField label={t("Store.store_search.label")} value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} /> </div> </Focusable> </div> @@ -151,11 +156,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => { maxWidth: '100%', }} > - <span className="DialogLabel">Sort</span> + <span className="DialogLabel">{t('Store.store_sort.label')}</span> <Dropdown - menuLabel="Sort" + menuLabel={t('Store.store_sort.label') as string} rgOptions={sortOptions} - strDefaultLabel="Last Updated (Newest)" + strDefaultLabel={t('Store.store_sort.label_def') as string} selectedOption={selectedSort} onChange={(e) => setSort(e.data)} /> @@ -165,7 +170,11 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => { <div style={{ justifyContent: 'center', display: 'flex' }}> <Focusable style={{ display: 'flex', alignItems: 'center', width: '96%' }}> <div style={{ width: '100%' }}> - <TextField label="Search" value={searchFieldValue} onChange={(e) => setSearchValue(e.target.value)} /> + <TextField + label={t('Store.store_search.label')} + value={searchFieldValue} + onChange={(e) => setSearchValue(e.target.value)} + /> </div> </Focusable> </div> @@ -192,6 +201,8 @@ const BrowseTab: FC<{ children: { data: StorePlugin[] } }> = (data) => { }; const AboutTab: FC<{}> = () => { + const { t } = useTranslation(); + return ( <div style={{ @@ -216,7 +227,7 @@ const AboutTab: FC<{}> = () => { /> <span className="deckyStoreAboutHeader">Testing</span> <span> - Please consider testing new plugins to help the Decky Loader team!{' '} + {t('Store.store_testing_cta')}{' '} <a href="https://deckbrew.xyz/testing" target="_blank" @@ -227,13 +238,10 @@ const AboutTab: FC<{}> = () => { deckbrew.xyz/testing </a> </span> - <span className="deckyStoreAboutHeader">Contributing</span> - <span> - If you would like to contribute to the Decky Plugin Store, check the SteamDeckHomebrew/decky-plugin-template - repository on GitHub. Information on development and distribution is available in the README. - </span> - <span className="deckyStoreAboutHeader">Source Code</span> - <span>All plugin source code is available on SteamDeckHomebrew/decky-plugin-database repository on GitHub.</span> + <span className="deckyStoreAboutHeader">{t('Store.store_contrib.label')}</span> + <span>{t('Store.store_contrib.desc')}</span> + <span className="deckyStoreAboutHeader">{t('Store.store_source.label')}</span> + <span>{t('Store.store_source.desc')}</span> </div> ); }; |