no results

This commit is contained in:
tresabhi committed 2026-08-28 17:05:15 -05:00
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;
}
@@ -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={() => {