TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-24 20:19:49 +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 ( return (
<> <>
{tool && <title>{tool.title}</title>}
<div <div
style={{ style={{
height: 128, 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); const [changeTankDialogOpen, setChangeTankDialogOpen] = useState(false);
return ( return (
<Flex gap="6" justify="center" align="center" style={{ padding: 16 }}> <>
<Flex gap="2" align="center"> <title>{protagonist.tank.name}</title>
<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>
<Dialog.Root <Flex gap="6" justify="center" align="center" style={{ padding: 16 }}>
open={changeTankDialogOpen} <Flex gap="2" align="center">
onOpenChange={setChangeTankDialogOpen} <Heading
> color={
<Dialog.Trigger> protagonist.tank.treeType === 'premium'
<Button variant="ghost"> ? 'amber'
Change <UpdateIcon /> : protagonist.tank.treeType === 'collector'
</Button> ? 'blue'
</Dialog.Trigger> : undefined
}
<Dialog.Content> >
<Flex gap="4" direction="column"> <Flex align="center" gap="2">
<Flex <img
direction="column" src={
gap="4" TREE_TYPE_ICONS[protagonist.tank.treeType][
style={{ flex: 1 }} protagonist.tank.type
justify="center" ]
> }
<TankSearch style={{
compact width: '1em',
onSelect={(tank) => { height: '1em',
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);
}} }}
/> />{' '}
{protagonist.tank.name}
</Flex> </Flex>
</Flex> </Heading>
</Dialog.Content> </Flex>
</Dialog.Root>
</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>
</>
); );
} }