57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
import React, { FC } from "react";
|
||
|
||
// TODO: When themes are made import the theme from user settings store. Refactor to use whatever those SVGs are.
|
||
|
||
interface DemoStickersProps {
|
||
stickerVal: StickerVal;
|
||
}
|
||
|
||
const DemoStickers: FC<DemoStickersProps> = ({
|
||
stickerVal
|
||
}: DemoStickersProps) => {
|
||
// If sticker is null return an empty space.
|
||
if (stickerVal === null) {
|
||
return <span aria-label="spacer"> </span>;
|
||
}
|
||
|
||
interface StickerToEmoji {
|
||
[key: string]: JSX.Element;
|
||
}
|
||
|
||
/**
|
||
* ? Temporarily using values -1 to 1.
|
||
* ? In the full app the values will be between -2 and 2.
|
||
*/
|
||
let key = "0";
|
||
|
||
if (stickerVal > 0) {
|
||
key = "1";
|
||
} else if (stickerVal < 0) {
|
||
key = "-1";
|
||
}
|
||
|
||
// Link value to an emoji representing a sticker.
|
||
const stickerToEmoji: StickerToEmoji = {
|
||
"1": (
|
||
<span role="img" aria-label="Sun">
|
||
☀️
|
||
</span>
|
||
),
|
||
"0": (
|
||
<span role="img" aria-label="Cloud">
|
||
☁️
|
||
</span>
|
||
),
|
||
"-1": (
|
||
<span role="img" aria-label="Raining Cloud">
|
||
🌧️
|
||
</span>
|
||
)
|
||
};
|
||
|
||
// Return the appropriate sticker.
|
||
return stickerToEmoji[`${key}`];
|
||
};
|
||
|
||
export default DemoStickers;
|