Kaladaran/eve-pi
1
0
Fork 0
mirror of https://github.com/calli-eve/eve-pi.git synced 2026-02-15 12:09:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make account cards draggable and persist order in local storage

Browse Source
This commit is contained in:
calli
2025-04-22 11:50:47 +03:00
parent 09d587c8b0
commit 70fdc4e96f
4 changed files with 325 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/components/Account/AccountCard.tsx
View File

@@ -1,40 +1,74 @@
import { AccessToken } from "@/types";
import { Box, Stack, Typography, useTheme } from "@mui/material";
import { Box, Stack, Typography, useTheme, Paper } from "@mui/material";
import { CharacterRow } from "../Characters/CharacterRow";
import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
import { SessionContext } from "@/app/context/Context";
import { useContext } from "react";
import { PlanRow } from "./PlanRow";
export const AccountCard = ({ characters }: { characters: AccessToken[] }) => {
const theme = useTheme();
const { planMode } = useContext(SessionContext);
return (
<Box
<Paper
elevation={2}
sx={{
padding: 1,
borderBottom: theme.custom.compactMode ? "" : "solid 1px gray",
padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
margin: theme.spacing(1),
display: 'flex',
alignItems: 'flex-start',
gap: 1,
backgroundColor: theme.palette.background.paper,
transition: 'all 0.2s ease-in-out',
cursor: 'grab',
'&:hover': {
boxShadow: theme.shadows[4],
},
'&:active': {
boxShadow: theme.shadows[8],
cursor: 'grabbing',
},
}}
>
<Typography style={{ fontSize: "0.8rem" }} paddingLeft={2}>
{characters[0].account !== "-"
? `Account: ${characters[0].account}`
: "No account name"}
</Typography>
{characters.map((c) => (
<Stack
key={c.character.characterId}
direction="row"
alignItems="flex-start"
<Box sx={{ flex: 1 }}>
<Box
sx={{
backgroundColor: theme.palette.background.default,
borderRadius: 1,
padding: theme.spacing(1),
marginBottom: theme.spacing(2),
display: 'flex',
alignItems: 'center',
}}
>
<CharacterRow character={c} />
{planMode ? (
<PlanRow character={c} />
) : (
<PlanetaryInteractionRow character={c} />
)}
</Stack>
))}
</Box>
<Typography
sx={{
fontSize: "0.9rem",
fontWeight: 500,
color: theme.palette.text.primary,
}}
>
{characters[0].account !== "-"
? `Account: ${characters[0].account}`
: "No account name"}
</Typography>
</Box>
{characters.map((c) => (
<Stack
key={c.character.characterId}
direction="row"
alignItems="flex-start"
>
<CharacterRow character={c} />
{planMode ? (
<PlanRow character={c} />
) : (
<PlanetaryInteractionRow character={c} />
)}
</Stack>
))}
</Box>
</Paper>
);
};