+
+
{t('games-list.filters.label')}
+
+
{FILTERS.map((filterType) => (
))}
-
+
+
+
+ {PLATFORM_OPTIONS.map((filterType) => (
+
+ ))}
+
+
);
};
diff --git a/src/widgets/header/index.tsx b/src/widgets/header/index.tsx
index 4f7cbc2..3cdb3a9 100644
--- a/src/widgets/header/index.tsx
+++ b/src/widgets/header/index.tsx
@@ -1,13 +1,12 @@
import { useEffect } from 'react';
-import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useSignOut } from 'react-firebase-hooks/auth';
import { useStore } from '@nanostores/react';
-import { User } from '@entities';
+import { User, nanoLogout, nanoUser } from '@entities';
import { DropdownWidget } from '@widgets';
-import { getLanguageLabel, firebaseAuth } from '@shared';
-import { nanoLogout, nanoUser } from 'entities/user/slice/index';
+import { getLanguageLabel, firebaseAuth, capitalize } from '@shared';
+import { Navbar } from './navbar';
const LanguageItems = [
{
@@ -31,9 +30,9 @@ const themes = [
'fantasy',
];
-const createThemeOptions = (): { key: string; label: string }[] => {
+const createThemeOptions = (translateCb: (key: string) => string): { key: string; label: string }[] => {
const themesOptions: { key: string; label: string }[] = [];
- themes.map((theme) => themesOptions.push({ key: theme, label: theme }));
+ themes.map((theme) => themesOptions.push({ key: theme, label: capitalize(translateCb(`themes.${theme}`)) }));
return themesOptions;
};
@@ -70,51 +69,7 @@ const Header = (): JSX.Element => {
return (
);
diff --git a/src/widgets/header/navbar.tsx b/src/widgets/header/navbar.tsx
new file mode 100644
index 0000000..681ebad
--- /dev/null
+++ b/src/widgets/header/navbar.tsx
@@ -0,0 +1,51 @@
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+import type { FC } from 'react';
+
+const Navbar: FC<{ authorized: boolean }> = ({ authorized }) => {
+ const { t } = useTranslation();
+ return (
+
+ );
+};
+
+export { Navbar };
diff --git a/src/widgets/list/index.tsx b/src/widgets/list/index.tsx
index 378113e..7cac006 100644
--- a/src/widgets/list/index.tsx
+++ b/src/widgets/list/index.tsx
@@ -1,7 +1,8 @@
import { List } from '@entities';
-import { filterCriteria, filterCallback, capitalize } from '@shared';
+import { filterCriteria, filterCallback } from '@shared';
import type { Game } from '@entities';
+import { useTranslation } from 'react-i18next';
const ListsBody = ({
games,
@@ -11,24 +12,26 @@ const ListsBody = ({
games: Game[];
filter: string;
filteredGames: Game[];
-}) => (
- <>
- {filter === 'all' ? (
- <>
- {filterCriteria.map((criteria) => (
-
filterCallback(game, criteria, filter === 'all'))}
- dividerText={capitalize(criteria)}
- key={criteria}
- />
- ))}
-
- ) : (
-
- )}
-
-);
+}) => {
+ const { t } = useTranslation();
+ return (
+ <>
+ {filter === 'all' ? (
+ <>
+ {filterCriteria.map((criteria) => (
+ filterCallback(game, criteria, filter === 'all'))}
+ dividerText={t(`common.${criteria}`) ?? ''}
+ key={criteria}
+ />
+ ))}
+
+ ) : (
+
+ )}
+
+ );};
export { ListsBody };
diff --git a/src/widgets/loader/index.tsx b/src/widgets/loader/index.tsx
index aa2974c..acf2fc9 100644
--- a/src/widgets/loader/index.tsx
+++ b/src/widgets/loader/index.tsx
@@ -2,21 +2,21 @@ import './styles.scss';
const Loader = () => (
<>
-
+
-
+
-
+
diff --git a/src/widgets/loader/styles.scss b/src/widgets/loader/styles.scss
index 301561f..22b2551 100644
--- a/src/widgets/loader/styles.scss
+++ b/src/widgets/loader/styles.scss
@@ -1,6 +1,4 @@
.loader {
- --path: #2f3545;
- --dot: #5628ee;
--duration: 3s;
width: 44px;
height: 44px;
@@ -12,7 +10,6 @@
border-radius: 50%;
position: absolute;
display: block;
- background: var(--dot);
top: 37px;
left: 19px;
transform: translate(-18px, -18px);
@@ -26,7 +23,6 @@
polygon,
circle {
fill: none;
- stroke: var(--path);
stroke-width: 10px;
stroke-linejoin: round;
stroke-linecap: round;
diff --git a/src/widgets/search-results/index.tsx b/src/widgets/search-results/index.tsx
index 6b5fbf9..5115611 100644
--- a/src/widgets/search-results/index.tsx
+++ b/src/widgets/search-results/index.tsx
@@ -2,15 +2,14 @@ import { useNavigate } from 'react-router';
import { useTranslation } from 'react-i18next';
import { useCallback, useRef } from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
-import {} from '@nanostores/react';
+import { savePayload } from '@entities';
import { Text, Tag } from '@widgets';
import type { FC } from 'react';
import type { HowLongToBeatEntry } from 'howlongtobeat';
import styles from './styles.module.scss';
-import { savePayload } from 'entities/game/slices/nano-search';
const SearchListItem: FC<{ item: HowLongToBeatEntry }> = ({ item }) => {
const { name, platforms, imageUrl, id, gameplayMain, gameplayMainExtra, gameplayCompletionist } =
@@ -92,9 +91,6 @@ const SearchListItem: FC<{ item: HowLongToBeatEntry }> = ({ item }) => {
-
- Actions
-
diff --git a/src/widgets/search/index.tsx b/src/widgets/search/index.tsx
index cea1df2..9ed04f4 100644
--- a/src/widgets/search/index.tsx
+++ b/src/widgets/search/index.tsx
@@ -37,7 +37,7 @@ const SearchInput: FC = ({ onSearch }) => {
<>
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..30e5a87
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,3 @@
+{
+ "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
+}
\ No newline at end of file