mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-21 02:37:05 +02:00
no results
This commit is contained in:
1 parent
4a0fccc526
commit
8d7575815b
6 files changed
+81
-64
No files matched your search
@@ -6,6 +6,10 @@
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
|
||||
&[data-underline="always"] {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&[data-underline="hover"],
|
||||
&[data-underline="never"] {
|
||||
text-decoration: none;
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
max-width: var(--page-width);
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
.label {
|
||||
margin: var(--space-4) 0;
|
||||
.container {
|
||||
flex: 1;
|
||||
|
||||
/* mt="2" gap="1" align="center" justify="center" direction="column" */
|
||||
.label {
|
||||
margin: var(--space-4) 0;
|
||||
|
||||
.count {
|
||||
/* gap="2" */
|
||||
/* mt="2" gap="1" align="center" justify="center" direction="column" */
|
||||
|
||||
.count {
|
||||
/* gap="2" */
|
||||
}
|
||||
}
|
||||
|
||||
.test-warning {
|
||||
/* justify="center" mt="4" */
|
||||
}
|
||||
}
|
||||
|
||||
.test-warning {
|
||||
/* justify="center" mt="4" */
|
||||
}
|
||||
@@ -31,9 +31,9 @@ import { TankCardSkeleton } from "../TankCardSkeleton";
|
||||
import { TankCardWrapper } from "../TankCardWrapper";
|
||||
import { TankSearchBar } from "../TankSearchBar";
|
||||
import { TankSearchFilters } from "../TankSearchFilters";
|
||||
import { TankSearchNoResults } from "../TankSearchNoResults";
|
||||
import { Text } from "../Text";
|
||||
import { TankSearchCard } from "./components/Card";
|
||||
import { NoResults } from "./components/NoResults";
|
||||
import { MAX_RECENTLY_VIEWED } from "./constants";
|
||||
import styles from "./index.module.css";
|
||||
|
||||
@@ -428,7 +428,7 @@ export const TankSearch = memo<TankSearchProps>(
|
||||
}, [tankFilters, tankopediaSort]);
|
||||
|
||||
return (
|
||||
<Flex column gap="4">
|
||||
<Flex className={styles.container} column gap="4">
|
||||
<TankSearchBar
|
||||
skeleton={skeleton}
|
||||
topResult={tanks?.[0]}
|
||||
@@ -439,52 +439,54 @@ export const TankSearch = memo<TankSearchProps>(
|
||||
|
||||
{!skeleton && !compact && <RecentlyViewedTanks />}
|
||||
|
||||
<Flex justify="center" className={styles.label}>
|
||||
<div className={styles.count}>
|
||||
<Text lowContrast>
|
||||
{sorted.length === 1
|
||||
? strings.website.common.tank_search.count_singular
|
||||
: literals(strings.website.common.tank_search.count_plural, {
|
||||
count: sorted.length.toLocaleString(locale),
|
||||
})}
|
||||
</Text>
|
||||
{tanks.length > 0 && (
|
||||
<Flex justify="center" className={styles.label}>
|
||||
<div className={styles.count}>
|
||||
<Text lowContrast>
|
||||
{sorted.length === 1
|
||||
? strings.website.common.tank_search.count_singular
|
||||
: literals(strings.website.common.tank_search.count_plural, {
|
||||
count: sorted.length.toLocaleString(locale),
|
||||
})}
|
||||
</Text>
|
||||
|
||||
{onSelectAll && (
|
||||
<Link
|
||||
underline="always"
|
||||
href="#"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
onSelectAll(sorted);
|
||||
TankopediaPersistent.mutate((draft) => {
|
||||
draft.recentlyViewed = uniq([
|
||||
...sorted.map(({ id }) => id),
|
||||
...draft.recentlyViewed,
|
||||
])
|
||||
.filter((id) => id in tankDefinitions.tanks)
|
||||
.slice(0, MAX_RECENTLY_VIEWED);
|
||||
});
|
||||
}}
|
||||
>
|
||||
{strings.website.common.tank_search.select_all}
|
||||
</Link>
|
||||
{onSelectAll && (
|
||||
<Link
|
||||
underline="always"
|
||||
href="#"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
onSelectAll(sorted);
|
||||
TankopediaPersistent.mutate((draft) => {
|
||||
draft.recentlyViewed = uniq([
|
||||
...sorted.map(({ id }) => id),
|
||||
...draft.recentlyViewed,
|
||||
])
|
||||
.filter((id) => id in tankDefinitions.tanks)
|
||||
.slice(0, MAX_RECENTLY_VIEWED);
|
||||
});
|
||||
}}
|
||||
>
|
||||
{strings.website.common.tank_search.select_all}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{tankopediaSort.by !== "meta.none" && (
|
||||
<Text color="gray">
|
||||
{literals(strings.website.common.tank_search.sorting_by, {
|
||||
name: strings.website.common.tank_search.sort[
|
||||
tankopediaSort.by
|
||||
],
|
||||
})}
|
||||
{SORT_UNITS[tankopediaSort.by] === undefined
|
||||
? ""
|
||||
: ` (${SORT_UNITS[tankopediaSort.by]})`}
|
||||
, {tankopediaSort.direction}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{tankopediaSort.by !== "meta.none" && (
|
||||
<Text color="gray">
|
||||
{literals(strings.website.common.tank_search.sorting_by, {
|
||||
name: strings.website.common.tank_search.sort[
|
||||
tankopediaSort.by
|
||||
],
|
||||
})}
|
||||
{SORT_UNITS[tankopediaSort.by] === undefined
|
||||
? ""
|
||||
: ` (${SORT_UNITS[tankopediaSort.by]})`}
|
||||
, {tankopediaSort.direction}
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
{tankFilters.showTesting && !tankFilters.showNonTesting && (
|
||||
<div className={styles["test-warning"]}>
|
||||
@@ -525,7 +527,7 @@ export const TankSearch = memo<TankSearchProps>(
|
||||
</TankCardWrapper>
|
||||
)}
|
||||
|
||||
{tanks.length === 0 && <NoResults type="search" />}
|
||||
{tanks.length === 0 && <TankSearchNoResults type="search" />}
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
.no-results {
|
||||
flex: 1;
|
||||
}
|
||||
+8
-8
@@ -1,22 +1,22 @@
|
||||
import { useLocale } from "../../../hooks/useLocale";
|
||||
import { TankFilters } from "../../../stores/tankFilters";
|
||||
import { Flex } from "../../Flex";
|
||||
import { Link } from "../../Link";
|
||||
import { Text } from "../../Text";
|
||||
import { useLocale } from "../../hooks/useLocale";
|
||||
import { TankFilters } from "../../stores/tankFilters";
|
||||
import { Flex } from "../Flex";
|
||||
import { Link } from "../Link";
|
||||
import { Text } from "../Text";
|
||||
import styles from "./index.module.css";
|
||||
|
||||
interface NoResultsProps {
|
||||
type?: "filters" | "search";
|
||||
}
|
||||
|
||||
export function NoResults({ type = "filters" }: NoResultsProps) {
|
||||
export function TankSearchNoResults({ type = "filters" }: NoResultsProps) {
|
||||
const { strings } = useLocale();
|
||||
|
||||
return (
|
||||
<Flex align="center" justify="center">
|
||||
<Flex className={styles["no-results"]} align="center" justify="center">
|
||||
<Text lowContrast>
|
||||
{strings.website.common.tank_search.no_tanks_found.body}{" "}
|
||||
<Link
|
||||
href="#"
|
||||
underline="always"
|
||||
color="red"
|
||||
onClick={() => {
|
||||
Reference in new issue
Block a user