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

feat: titles

Browse Source
This commit is contained in:
TrèsAbhi committed 2024-02-09 18:09:36 -06:00
1 parent c12a66eeab
commit 543e963d1d
2 files changed
+70 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/tools/layout.tsx
+2
View File
@@ -18,6 +18,8 @@ export default function ToolsLayout({ children }: ToolsLayoutProps) {
return (
<>
{tool && <title>{tool.title}</title>}
<div
style={{
height: 128,
src/app/tools/tankopedia/[id]/components/Title.tsx
+68 -63
View File
@@ -10,71 +10,76 @@ export function Title() {
const [changeTankDialogOpen, setChangeTankDialogOpen] = useState(false);
return (
<Flex gap="6" justify="center" align="center" style={{ padding: 16 }}>
<Flex gap="2" align="center">
<Heading
color={
protagonist.tank.treeType === 'premium'
? 'amber'
: protagonist.tank.treeType === 'collector'
? 'blue'
: undefined
}
>
<Flex align="center" gap="2">
<img
src={
TREE_TYPE_ICONS[protagonist.tank.treeType][
protagonist.tank.type
]
}
style={{
width: '1em',
height: '1em',
}}
/>{' '}
{protagonist.tank.name}
</Flex>
</Heading>
</Flex>
<>
<title>{protagonist.tank.name}</title>
<Dialog.Root
open={changeTankDialogOpen}
onOpenChange={setChangeTankDialogOpen}
>
<Dialog.Trigger>
<Button variant="ghost">
Change <UpdateIcon />
</Button>
</Dialog.Trigger>
<Dialog.Content>
<Flex gap="4" direction="column">
<Flex
direction="column"
gap="4"
style={{ flex: 1 }}
justify="center"
>
<TankSearch
compact
onSelect={(tank) => {
mutateDuel((draft) => {
draft.protagonist!.tank = tank;
draft.protagonist!.engine = tank.engines.at(-1)!;
draft.protagonist!.track = tank.tracks.at(-1)!;
draft.protagonist!.turret = tank.turrets.at(-1)!;
draft.protagonist!.gun =
draft.protagonist!.turret.guns.at(-1)!;
draft.protagonist!.shell = draft.protagonist!.gun.shells[0];
});
setChangeTankDialogOpen(false);
<Flex gap="6" justify="center" align="center" style={{ padding: 16 }}>
<Flex gap="2" align="center">
<Heading
color={
protagonist.tank.treeType === 'premium'
? 'amber'
: protagonist.tank.treeType === 'collector'
? 'blue'
: undefined
}
>
<Flex align="center" gap="2">
<img
src={
TREE_TYPE_ICONS[protagonist.tank.treeType][
protagonist.tank.type
]
}
style={{
width: '1em',
height: '1em',
}}
/>
/>{' '}
{protagonist.tank.name}
</Flex>
</Flex>
</Dialog.Content>
</Dialog.Root>
</Flex>
</Heading>
</Flex>
<Dialog.Root
open={changeTankDialogOpen}
onOpenChange={setChangeTankDialogOpen}
>
<Dialog.Trigger>
<Button variant="ghost">
Change <UpdateIcon />
</Button>
</Dialog.Trigger>
<Dialog.Content>
<Flex gap="4" direction="column">
<Flex
direction="column"
gap="4"
style={{ flex: 1 }}
justify="center"
>
<TankSearch
compact
onSelect={(tank) => {
mutateDuel((draft) => {
draft.protagonist!.tank = tank;
draft.protagonist!.engine = tank.engines.at(-1)!;
draft.protagonist!.track = tank.tracks.at(-1)!;
draft.protagonist!.turret = tank.turrets.at(-1)!;
draft.protagonist!.gun =
draft.protagonist!.turret.guns.at(-1)!;
draft.protagonist!.shell =
draft.protagonist!.gun.shells[0];
});
setChangeTankDialogOpen(false);
}}
/>
</Flex>
</Flex>
</Dialog.Content>
</Dialog.Root>
</Flex>
</>
);
}