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

fix: use dropdown

Browse Source
This commit is contained in:
TrèsAbhi committed 2025-12-30 20:56:42 -06:00
1 parent 86e080aae9
commit f837aaf40a
3 files changed
+61 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/i18n/strings/en.json
+2 -2
View File
@@ -26,8 +26,8 @@
"shells": { "shells": {
"ap": "AP", "ap": "AP",
"apcr": "APCR", "ap_cr": "APCR",
"heat": "HEAT", "hc": "HEAT",
"he": "HE" "he": "HE"
}, },
packages/website/src/components/TankSearch/components/FilterControl.tsx
+57 -50
View File
@@ -14,8 +14,6 @@ import {
DropdownMenu, DropdownMenu,
Flex, Flex,
IconButton, IconButton,
Inset,
Popover,
Text, Text,
} from "@radix-ui/themes"; } from "@radix-ui/themes";
import { times } from "lodash-es"; import { times } from "lodash-es";
@@ -492,13 +490,7 @@ function TypeFilter() {
function ShellFilter() { function ShellFilter() {
return ( return (
<Flex <Flex style={{}}>
overflow="hidden"
style={{
borderRadius: "var(--radius-full)",
boxShadow: "var(--shadow-1)",
}}
>
<IndividualShellFilter index={0} /> <IndividualShellFilter index={0} />
<IndividualShellFilter index={1} premium /> <IndividualShellFilter index={1} premium />
<IndividualShellFilter index={2} /> <IndividualShellFilter index={2} />
@@ -513,12 +505,24 @@ function IndividualShellFilter({
index: number; index: number;
premium?: boolean; premium?: boolean;
}) { }) {
const { strings } = useLocale();
const shells = TankFilters.use((state) => state.shells); const shells = TankFilters.use((state) => state.shells);
return ( return (
<Popover.Root> <DropdownMenu.Root>
<Popover.Trigger> <DropdownMenu.Trigger>
<IconButton variant="soft" radius="none" color="gray" highContrast> <IconButton
ml="-0.5px"
variant="surface"
style={{
borderTopLeftRadius: index === 0 ? undefined : 0,
borderBottomLeftRadius: index === 0 ? undefined : 0,
borderTopRightRadius: index === 2 ? undefined : 0,
borderBottomRightRadius: index === 2 ? undefined : 0,
}}
color="gray"
highContrast
>
{shells[index] === null && ( {shells[index] === null && (
<Text color="gray" style={{ display: "contents" }}> <Text color="gray" style={{ display: "contents" }}>
<MissingShellIcon width="1em" height="1em" /> <MissingShellIcon width="1em" height="1em" />
@@ -535,48 +539,51 @@ function IndividualShellFilter({
/> />
)} )}
</IconButton> </IconButton>
</Popover.Trigger> </DropdownMenu.Trigger>
<Popover.Content> <DropdownMenu.Content>
<Inset> <DropdownMenu.RadioGroup value={`${shells[index]}`}>
<Flex direction="column"> {Object.values(ShellType).map((shellType) => {
{Object.values(ShellType).map((shellType) => { if (typeof shellType === "string") return null;
if (typeof shellType === "string") return null;
const selected = shells[index] === shellType; const selected = shells[index] === shellType;
return ( return (
<IconButton <DropdownMenu.RadioItem
key={shellType} key={shellType}
value={`${shellType}`} value={`${shellType}`}
radius="none" onClick={() => {
variant={selected ? "solid" : "soft"} const mutated = [...shells] as TankFilters["shells"];
onClick={() => {
const mutated = [...shells] as TankFilters["shells"];
mutated[index] = selected ? null : shellType; mutated[index] = selected ? null : shellType;
TankFilters.mutate((draft) => { TankFilters.mutate((draft) => {
draft.shells = mutated; draft.shells = mutated;
}); });
}} }}
highContrast={selected} color={selected ? undefined : "gray"}
color={selected ? undefined : "gray"} >
> <img
<img src={asset(
src={asset( `icons/shells/${shellTypeIcons[shellType]}${
`icons/shells/${shellTypeIcons[shellType]}${ premium ? "_premium" : ""
premium ? "_premium" : "" }.webp`
}.webp` )}
)} style={{ width: "1em", height: "1em" }}
style={{ width: "1em", height: "1em" }} />
/>
</IconButton> {
); strings.common.shells[
})} shellTypeIcons[
</Flex> shellType
</Inset> ] as keyof typeof strings.common.shells
</Popover.Content> ]
</Popover.Root> }
</DropdownMenu.RadioItem>
);
})}
</DropdownMenu.RadioGroup>
</DropdownMenu.Content>
</DropdownMenu.Root>
); );
} }
packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx
+2 -2
View File
@@ -108,10 +108,10 @@ export function CustomShellButton() {
{strings.common.shells.ap} {strings.common.shells.ap}
</Select.Item> </Select.Item>
<Select.Item value={`${ShellType.APCR}`}> <Select.Item value={`${ShellType.APCR}`}>
{strings.common.shells.apcr} {strings.common.shells.ap_cr}
</Select.Item> </Select.Item>
<Select.Item value={`${ShellType.HEAT}`}> <Select.Item value={`${ShellType.HEAT}`}>
{strings.common.shells.heat} {strings.common.shells.hc}
</Select.Item> </Select.Item>
<Select.Item value={`${ShellType.HE}`}> <Select.Item value={`${ShellType.HE}`}>
{strings.common.shells.he} {strings.common.shells.he}