mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-05 20:56:13 -05:00
63d78bc3ae
`<Ability/>` can now be tabbed through, and it now shares the same focus outline, hover, and mousedown styles with `<AbilitiesSelector/>`. This includes the `cursor: pointer` style that makes it more obvious that this component is clickable like other buttons. Fixes #894.
37 lines
704 B
TypeScript
37 lines
704 B
TypeScript
import type { AbilityWithUnknown } from "~/modules/in-game-lists/types";
|
|
import { abilityImageUrl } from "~/utils/urls";
|
|
import { Image } from "./Image";
|
|
|
|
const sizeMap = {
|
|
MAIN: 42,
|
|
SUB: 32,
|
|
TINY: 22,
|
|
} as const;
|
|
|
|
export function Ability({
|
|
ability,
|
|
size,
|
|
onClick,
|
|
}: {
|
|
ability: AbilityWithUnknown;
|
|
size: keyof typeof sizeMap;
|
|
onClick?: () => void;
|
|
}) {
|
|
const sizeNumber = sizeMap[size];
|
|
|
|
return (
|
|
<button
|
|
className="build__ability"
|
|
style={
|
|
{
|
|
"--ability-size": `${sizeNumber}px`,
|
|
} as any
|
|
}
|
|
onClick={onClick}
|
|
data-cy={`${ability}-ability`}
|
|
>
|
|
<Image alt="" path={abilityImageUrl(ability)} />
|
|
</button>
|
|
);
|
|
}
|