TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 03:59:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

compiling search

Browse Source
This commit is contained in:
tresabhi committed 2026-08-27 11:46:55 -05:00
1 parent edc3aba545
commit b400ff6d07
12 files changed
+213 -228
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/Compare/CompareTable.tsx
+2 -2
View File
@@ -18,6 +18,7 @@ import { useLocale } from "../../hooks/useLocale";
import { CompareEphemeral } from "../../stores/compareEphemeral"; import { CompareEphemeral } from "../../stores/compareEphemeral";
import type { EquipmentMatrix } from "../../stores/duel"; import type { EquipmentMatrix } from "../../stores/duel";
import { BlitzkitButtonGrayIcon } from "../BlitzkitButtonGrayIcon"; import { BlitzkitButtonGrayIcon } from "../BlitzkitButtonGrayIcon";
import { CompareTankCard } from "../CompareTankCard";
import { ConsumablesManager } from "../ConsumablesManager"; import { ConsumablesManager } from "../ConsumablesManager";
import { CrewSkillManager } from "../CrewSkillManager"; import { CrewSkillManager } from "../CrewSkillManager";
import { EquipmentManager } from "../EquipmentManager"; import { EquipmentManager } from "../EquipmentManager";
@@ -27,7 +28,6 @@ import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
import { StickyTableRoot } from "../StickyTableRoot"; import { StickyTableRoot } from "../StickyTableRoot";
import { Body } from "./Body"; import { Body } from "./Body";
import { InsertionMarker } from "./IntersectionMarker"; import { InsertionMarker } from "./IntersectionMarker";
import { TankCard } from "./TankCard";
interface CompareTableProps { interface CompareTableProps {
stats: TankCharacteristics[]; stats: TankCharacteristics[];
@@ -77,7 +77,7 @@ export function CompareTable({ stats }: CompareTableProps) {
</StickyColumnHeaderCell> </StickyColumnHeaderCell>
{members.map(({ tank, key }, index) => { {members.map(({ tank, key }, index) => {
return <TankCard index={index} key={key} tank={tank} />; return <CompareTankCard index={index} key={key} tank={tank} />;
})} })}
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
packages/website/src/components/CompareTankCard/index.module.css
+3
View File
@@ -0,0 +1,3 @@
.name {
max-width: 8rem;
}
packages/website/src/components/Compare/TankCard.tsx → packages/website/src/components/CompareTankCard/index.tsx
+10 -15
View File
@@ -1,20 +1,22 @@
import { type TankDefinition, tankIcon } from "@blitzkit/core"; import { type TankDefinition, tankIcon } from "@blitzkit/core";
import { Flex, Text } from "@radix-ui/themes";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { Vector2 } from "three"; import { Vector2 } from "three";
import { useLocale } from "../../hooks/useLocale"; import { useLocale } from "../../hooks/useLocale";
import { CompareEphemeral } from "../../stores/compareEphemeral"; import { CompareEphemeral } from "../../stores/compareEphemeral";
import { InsertionMarker } from "../Compare/IntersectionMarker";
import { insertionMarkers } from "../Compare/IntersectionMarker/constants";
import { TankControl } from "../Compare/TankControl";
import { Flex } from "../Flex";
import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell"; import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
import { InsertionMarker } from "./IntersectionMarker"; import { Text } from "../Text";
import { insertionMarkers } from "./IntersectionMarker/constants"; import styles from "./index.module.css";
import { TankControl } from "./TankControl";
interface TankCardProps { interface TankCardProps {
index: number; index: number;
tank: TankDefinition; tank: TankDefinition;
} }
export function TankCard({ index, tank }: TankCardProps) { export function CompareTankCard({ index, tank }: TankCardProps) {
const draggable = useRef<HTMLDivElement>(null); const draggable = useRef<HTMLDivElement>(null);
const { unwrap } = useLocale(); const { unwrap } = useLocale();
@@ -103,12 +105,12 @@ export function TankCard({ index, tank }: TankCardProps) {
return ( return (
<StickyColumnHeaderCell width="0"> <StickyColumnHeaderCell width="0">
<Flex direction="column" align="center" justify="between" gap="2"> <Flex column align="center" justify="between" gap="2">
<TankControl index={index} key={tank.id} slug={tank.slug} /> <TankControl index={index} key={tank.id} slug={tank.slug} />
<Flex <Flex
ref={draggable} ref={draggable}
direction="column" column
align="center" align="center"
justify="between" justify="between"
gap="2" gap="2"
@@ -129,14 +131,7 @@ export function TankCard({ index, tank }: TankCardProps) {
}} }}
/> />
<Text <Text className={styles.name} nowrap overflow="ellipsis">
style={{
whiteSpace: "nowrap",
maxWidth: 128,
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{unwrap(tank.name!)} {unwrap(tank.name!)}
</Text> </Text>
</Flex> </Flex>
packages/website/src/components/RecentlyViewedTanks/index.module.css
+3
View File
@@ -0,0 +1,3 @@
.recent {
/* mt="2" mb="6" */
}
packages/website/src/components/TankSearch/components/RecentlyViewed.tsx → packages/website/src/components/RecentlyViewedTanks/index.tsx
+14 -10
View File
@@ -1,16 +1,20 @@
import { isEqual } from "lodash-es"; import { isEqual } from "lodash-es";
import { useMemo } from "react"; import { useMemo } from "react";
import { api } from "../../../core/blitzkit/api"; import { api } from "../../core/blitzkit/api";
import { useLocale } from "../../../hooks/useLocale"; import { useLocale } from "../../hooks/useLocale";
import { TankFilters } from "../../../stores/tankFilters"; import { TankFilters } from "../../stores/tankFilters";
import { TankopediaPersistent } from "../../../stores/tankopediaPersistent"; import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
import { TankSort } from "../../../stores/tankopediaSort"; import { TankSort } from "../../stores/tankopediaSort";
import { TankCard } from "../../TankCard"; import { Flex } from "../Flex";
import { TankCardWrapper } from "../../TankCardWrapper"; import { Separator } from "../Separator";
import { TankCard } from "../TankCard";
import { TankCardWrapper } from "../TankCardWrapper";
import { Text } from "../Text";
import styles from "./index.module.css";
const tankDefinitions = await api.tankDefinitions(); const tankDefinitions = await api.tankDefinitions();
export function RecentlyViewed() { export function RecentlyViewedTanks() {
const filters = TankFilters.use(); const filters = TankFilters.use();
// non-reactive because it is a little weird that it updates instantly even before the page loads // non-reactive because it is a little weird that it updates instantly even before the page loads
const recentlyViewed = TankopediaPersistent.state.recentlyViewed.filter( const recentlyViewed = TankopediaPersistent.state.recentlyViewed.filter(
@@ -34,7 +38,7 @@ export function RecentlyViewed() {
} }
return ( return (
<Flex direction="column" gap="2" mt="2" mb="6"> <Flex column gap="2" className={styles.recent}>
<Text color="gray" align="center"> <Text color="gray" align="center">
{strings.website.common.tank_search.recent} {strings.website.common.tank_search.recent}
</Text> </Text>
@@ -44,7 +48,7 @@ export function RecentlyViewed() {
))} ))}
</TankCardWrapper> </TankCardWrapper>
<Separator size="4" /> <Separator />
</Flex> </Flex>
); );
} }
packages/website/src/components/Separator/index.module.css
+2
View File
@@ -0,0 +1,2 @@
.separator {
}
packages/website/src/components/Separator/index.tsx
+5
View File
@@ -0,0 +1,5 @@
import styles from "./index.module.css";
export function Separator() {
return <div className={styles.separator} />;
}
packages/website/src/components/TankCard/index.tsx
+2
View File
@@ -5,8 +5,10 @@ import { api } from "../../core/blitzkit/api";
import { useLocale } from "../../hooks/useLocale"; import { useLocale } from "../../hooks/useLocale";
import { TankopediaPersistent } from "../../stores/tankopediaPersistent"; import { TankopediaPersistent } from "../../stores/tankopediaPersistent";
import { classIcons } from "../ClassIcon"; import { classIcons } from "../ClassIcon";
import { Flex } from "../Flex";
import { LinkI18n } from "../LinkI18n"; import { LinkI18n } from "../LinkI18n";
import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants"; import { MAX_RECENTLY_VIEWED } from "../TankSearch/constants";
import { Text, type TextProps } from "../Text";
import "./index.css"; import "./index.css";
type TankCardProps = TextProps & { type TankCardProps = TextProps & {
packages/website/src/components/TankSearch/components/Sort.tsx
+2 -5
View File
@@ -5,7 +5,6 @@ import type {
TankopediaSortDirection, TankopediaSortDirection,
} from "../../../stores/tankopediaPersistent"; } from "../../../stores/tankopediaPersistent";
import { TankSort } from "../../../stores/tankopediaSort"; import { TankSort } from "../../../stores/tankopediaSort";
import { Button } from "../../Button";
import { DropdownMenu } from "../../DropdownMenu"; import { DropdownMenu } from "../../DropdownMenu";
interface ItemProps { interface ItemProps {
@@ -41,10 +40,8 @@ export function Sort() {
return ( return (
<DropdownMenu.Root> <DropdownMenu.Root>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button variant="surface" color="gray"> {strings.website.common.tank_search.sort_dropdown.label}
{strings.website.common.tank_search.sort_dropdown.label} <CaretDownIcon />
<CaretDownIcon />
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content align="end"> <DropdownMenu.Content align="end">
packages/website/src/components/TankSearch/index.tsx
+3 -3
View File
@@ -25,14 +25,14 @@ import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonCompo
import { Callout } from "../Callout"; import { Callout } from "../Callout";
import { ExperimentIcon } from "../ExperimentIcon"; import { ExperimentIcon } from "../ExperimentIcon";
import { Link } from "../Link"; import { Link } from "../Link";
import { RecentlyViewedTanks } from "../RecentlyViewedTanks";
import { TankCardSkeleton } from "../TankCardSkeleton";
import { TankCardWrapper } from "../TankCardWrapper"; import { TankCardWrapper } from "../TankCardWrapper";
import { TankSearchBar } from "../TankSearchBar"; import { TankSearchBar } from "../TankSearchBar";
import { TankSearchFilters } from "../TankSearchFilters"; import { TankSearchFilters } from "../TankSearchFilters";
import { Text } from "../Text"; import { Text } from "../Text";
import { TankSearchCard } from "./components/Card"; import { TankSearchCard } from "./components/Card";
import { NoResults } from "./components/NoResults"; import { NoResults } from "./components/NoResults";
import { RecentlyViewed } from "./components/RecentlyViewed";
import { TankCardSkeleton } from "../TankCardSkeleton";
import { MAX_RECENTLY_VIEWED } from "./constants"; import { MAX_RECENTLY_VIEWED } from "./constants";
import styles from "./index.module.css"; import styles from "./index.module.css";
@@ -439,7 +439,7 @@ export const TankSearch = memo<TankSearchProps>(
{!tankFilters.search && !tankFilters.searching && <TankSearchFilters />} {!tankFilters.search && !tankFilters.searching && <TankSearchFilters />}
{!skeleton && !compact && <RecentlyViewed />} {!skeleton && !compact && <RecentlyViewedTanks />}
<div className={styles.tanks}> <div className={styles.tanks}>
<div className={styles.count}> <div className={styles.count}>
packages/website/src/components/TankSearchFilters/index.tsx
+161 -190
View File
@@ -21,7 +21,6 @@ import { api } from "../../core/blitzkit/api";
import { useLocale } from "../../hooks/useLocale"; import { useLocale } from "../../hooks/useLocale";
import { App } from "../../stores/app"; import { App } from "../../stores/app";
import { TankFilters, type CaseType } from "../../stores/tankFilters"; import { TankFilters, type CaseType } from "../../stores/tankFilters";
import { Button } from "../Button";
import { classIcons } from "../ClassIcon"; import { classIcons } from "../ClassIcon";
import { DropdownMenu } from "../DropdownMenu"; import { DropdownMenu } from "../DropdownMenu";
import { Flex } from "../Flex"; import { Flex } from "../Flex";
@@ -216,23 +215,21 @@ function TiersFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button color="gray" variant="surface"> <Flex gap="1">
<Flex gap="1"> {tiers.slice(0, MAX_ICONS).map((tier) => (
{tiers.slice(0, MAX_ICONS).map((tier) => ( <Text size="minor" key={tier}>
<Text size="minor" key={tier}> {TIER_ROMAN_NUMERALS[tier]}
{TIER_ROMAN_NUMERALS[tier]} </Text>
</Text> ))}
))}
{tiers.length > MAX_ICONS && ( {tiers.length > MAX_ICONS && (
<Text size="minor"> <Text size="minor">
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: tiers.length - MAX_ICONS, value: tiers.length - MAX_ICONS,
})} })}
</Text> </Text>
)} )}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -291,22 +288,20 @@ function NationsFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button color="gray" variant="surface"> <Flex>
<Flex> {nations.map((nation, index) => (
{nations.map((nation, index) => ( <img
<img key={nation}
key={nation} style={{
style={{ filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", marginLeft: index > 0 ? "-0.5em" : undefined,
marginLeft: index > 0 ? "-0.5em" : undefined, width: "1.25em",
width: "1.25em", height: "1.25em",
height: "1.25em", }}
}} src={alias("api", `/flags/circle/${nation}.webp`)}
src={alias("api", `/flags/circle/${nation}.webp`)} />
/> ))}
))} </Flex>
</Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -375,26 +370,24 @@ function ClassFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button color="gray" variant="surface"> <Flex>
<Flex> {classes.map((tankClass, index) => {
{classes.map((tankClass, index) => { const Icon = classIcons[tankClass];
const Icon = classIcons[tankClass]; return (
return ( <Icon
<Icon key={tankClass}
key={tankClass} style={{
style={{ color: "var(--gray-12)",
color: "var(--gray-12)", opacity: 1,
opacity: 1, filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", marginLeft: index > 0 ? "-0.5em" : undefined,
marginLeft: index > 0 ? "-0.5em" : undefined, width: "1.25em",
width: "1.25em", height: "1.25em",
height: "1.25em", }}
}} />
/> );
); })}
})} </Flex>
</Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -455,26 +448,24 @@ function GunTypeFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button color="gray" variant="surface"> <Flex>
<Flex> {gunTypes.map((gunType) => {
{gunTypes.map((gunType) => { const Icon = GUN_TYPE_ICONS[gunType];
const Icon = GUN_TYPE_ICONS[gunType];
return ( return (
<Icon <Icon
key={gunType} key={gunType}
style={{ style={{
margin: gunType === "regular" ? "0 -0.125em" : undefined, margin: gunType === "regular" ? "0 -0.125em" : undefined,
opacity: 1, opacity: 1,
color: "var(--gray-12)", color: "var(--gray-12)",
width: "1.25em", width: "1.25em",
height: "1.25em", height: "1.25em",
}} }}
/> />
); );
})} })}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -533,26 +524,24 @@ function TypeFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button color="gray" variant="surface"> <Flex gap="1">
<Flex gap="1"> {types.map((tankType) => {
{types.map((tankType) => { return (
return ( <ResearchedIcon
<ResearchedIcon style={{
style={{ color: `var(--${TANK_TYPE_COLORS[tankType]}-${
color: `var(--${TANK_TYPE_COLORS[tankType]}-${ tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11"
tankType === TankType.TANK_TYPE_RESEARCHABLE ? "12" : "11" })`,
})`, filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", opacity: 1,
opacity: 1, width: "1.25em",
width: "1.25em", height: "1.25em",
height: "1.25em", }}
}} key={tankType}
key={tankType} />
/> );
); })}
})} </Flex>
</Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -634,32 +623,20 @@ function IndividualShellFilter({
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<IconButton {shells[index] === null && (
variant="surface" <Text color="gray" style={{ display: "contents" }}>
style={{ <MissingShellIcon width="1em" height="1em" />
borderTopLeftRadius: index === 0 ? undefined : 0, </Text>
borderBottomLeftRadius: index === 0 ? undefined : 0, )}
borderTopRightRadius: index === 2 ? undefined : 0, {shells[index] !== null && (
borderBottomRightRadius: index === 2 ? undefined : 0, <img
}} style={{ width: "1em", height: "1em" }}
color="gray" src={alias(
highContrast "api",
> `/icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`,
{shells[index] === null && ( )}
<Text color="gray" style={{ display: "contents" }}> />
<MissingShellIcon width="1em" height="1em" /> )}
</Text>
)}
{shells[index] !== null && (
<img
style={{ width: "1em", height: "1em" }}
src={alias(
"api",
`/icons/shells/${shellTypeIcons[shells[index]]}${premium ? "_premium" : ""}.webp`,
)}
/>
)}
</IconButton>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -849,31 +826,29 @@ function ConsumablesFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button color="gray" variant="surface"> <Flex>
<Flex> {consumables.slice(0, MAX_ICONS).map((consumable, index) => (
{consumables.slice(0, MAX_ICONS).map((consumable, index) => ( <img
<img key={consumable}
key={consumable} style={{
style={{ filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", marginLeft: index > 0 ? "-0.5em" : undefined,
marginLeft: index > 0 ? "-0.5em" : undefined, width: "1.25em",
width: "1.25em", height: "1.25em",
height: "1.25em", objectFit: "contain",
objectFit: "contain", }}
}} src={alias("api", `/icons/consumables/${consumable}.webp`)}
src={alias("api", `/icons/consumables/${consumable}.webp`)} />
/> ))}
))}
{consumables.length > MAX_ICONS && ( {consumables.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <Text size="minor" className={styles["overflow-plus"]}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: consumables.length - MAX_ICONS, value: consumables.length - MAX_ICONS,
})} })}
</Text> </Text>
)} )}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -943,31 +918,29 @@ function ProvisionsFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button color="gray" variant="surface"> <Flex>
<Flex> {provisions.slice(0, MAX_ICONS).map((provision, index) => (
{provisions.slice(0, MAX_ICONS).map((provision, index) => ( <img
<img key={provision}
key={provision} style={{
style={{ filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", marginLeft: index > 0 ? "-0.5em" : undefined,
marginLeft: index > 0 ? "-0.5em" : undefined, width: "1.25em",
width: "1.25em", height: "1.25em",
height: "1.25em", objectFit: "contain",
objectFit: "contain", }}
}} src={alias("api", `/icons/provisions/${provision}.webp`)}
src={alias("api", `/icons/provisions/${provision}.webp`)} />
/> ))}
))}
{provisions.length > MAX_ICONS && ( {provisions.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <Text size="minor" className={styles["overflow-plus"]}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: provisions.length - MAX_ICONS, value: provisions.length - MAX_ICONS,
})} })}
</Text> </Text>
)} )}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
@@ -1052,31 +1025,29 @@ function GameModeAbilitiesFilter() {
return ( return (
<DropdownMenu.Root modal={false}> <DropdownMenu.Root modal={false}>
<DropdownMenu.Trigger> <DropdownMenu.Trigger>
<Button color="gray" variant="surface"> <Flex>
<Flex> {icons.slice(0, MAX_ICONS).map((icon, index) => (
{icons.slice(0, MAX_ICONS).map((icon, index) => ( <img
<img key={icon}
key={icon} style={{
style={{ filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))",
filter: "drop-shadow(0 0 var(--space-1) var(--black-a11))", marginLeft: index > 0 ? "-0.5em" : undefined,
marginLeft: index > 0 ? "-0.5em" : undefined, width: "1.25em",
width: "1.25em", height: "1.25em",
height: "1.25em", objectFit: "contain",
objectFit: "contain", }}
}} src={icon}
src={icon} />
/> ))}
))}
{icons.length > MAX_ICONS && ( {icons.length > MAX_ICONS && (
<Text size="minor" className={styles["overflow-plus"]}> <Text size="minor" className={styles["overflow-plus"]}>
{literals(strings.common.units.plus, { {literals(strings.common.units.plus, {
value: icons.length - MAX_ICONS, value: icons.length - MAX_ICONS,
})} })}
</Text> </Text>
)} )}
</Flex> </Flex>
</Button>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DropdownMenu.Content> <DropdownMenu.Content>
packages/website/src/pages/[...chunk_default]/[...locale]/tanks/index.astro
+6 -3
View File
@@ -1,4 +1,5 @@
--- ---
import { Section } from "../../../../components/Section";
import ToolBanner from "../../../../components/ToolBanner.astro"; import ToolBanner from "../../../../components/ToolBanner.astro";
import { tools } from "../../../../constants/tools"; import { tools } from "../../../../constants/tools";
import BaseLayout from "../../../../layouts/BaseLayout.astro"; import BaseLayout from "../../../../layouts/BaseLayout.astro";
@@ -12,7 +13,9 @@ const { locale } = Astro.props;
<BaseLayout {locale} accent="purple"> <BaseLayout {locale} accent="purple">
<ToolBanner {locale} tool={tools.tanks} slot="pre-app" /> <ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
<Page {locale} client:only="react"> <Section>
<Page {locale} skeleton slot="fallback" /> <Page {locale} client:only="react">
</Page> <Page {locale} skeleton slot="fallback" />
</Page>
</Section>
</BaseLayout> </BaseLayout>