25 lines
1.2 KiB
TypeScript
25 lines
1.2 KiB
TypeScript
import Image from "next/image";
|
|
|
|
const ELEMENT_FILTERS: Record<string, string> = {
|
|
Anemo: "brightness(0) saturate(100%) invert(76%) sepia(19%) saturate(867%) hue-rotate(113deg) brightness(92%) contrast(86%)",
|
|
Geo: "brightness(0) saturate(100%) invert(77%) sepia(80%) saturate(1159%) hue-rotate(337deg) brightness(99%) contrast(90%)",
|
|
Electro: "brightness(0) saturate(100%) invert(66%) sepia(17%) saturate(1525%) hue-rotate(225deg) brightness(91%) contrast(89%)",
|
|
Dendro: "brightness(0) saturate(100%) invert(70%) sepia(39%) saturate(713%) hue-rotate(32deg) brightness(93%) contrast(87%)",
|
|
Hydro: "brightness(0) saturate(100%) invert(71%) sepia(68%) saturate(1329%) hue-rotate(164deg) brightness(97%) contrast(95%)",
|
|
Pyro: "brightness(0) saturate(100%) invert(54%) sepia(72%) saturate(1836%) hue-rotate(339deg) brightness(99%) contrast(89%)",
|
|
Cryo: "brightness(0) saturate(100%) invert(87%) sepia(20%) saturate(952%) hue-rotate(167deg) brightness(93%) contrast(89%)",
|
|
};
|
|
|
|
export function ElementIcon({ element, url }: { element: string; url: string }) {
|
|
return (
|
|
<Image
|
|
src={url}
|
|
alt=""
|
|
width={16}
|
|
height={16}
|
|
className="shrink-0"
|
|
style={{ filter: ELEMENT_FILTERS[element] }}
|
|
/>
|
|
);
|
|
}
|