48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { Button } from '@app/client/components/ui/button';
|
|
import { Icon, Stack } from '@chakra-ui/react';
|
|
import { RatingType } from '@generated/types';
|
|
|
|
export function RatingPanel({
|
|
personalRating,
|
|
onRatingSet
|
|
}: {
|
|
readonly personalRating: RatingType;
|
|
readonly onRatingSet: (rating: RatingType) => Promise<void>;
|
|
}) {
|
|
return (
|
|
<Stack direction="row">
|
|
<Button
|
|
size="sm"
|
|
backgroundColor={personalRating === RatingType.Up ? 'green.500/80' : 'green.500'}
|
|
borderColor="green.500"
|
|
onClick={async () => {
|
|
if (personalRating !== RatingType.Up) {
|
|
await onRatingSet(RatingType.Up);
|
|
return;
|
|
}
|
|
await onRatingSet(RatingType.None);
|
|
}}
|
|
>
|
|
<Icon>
|
|
<i className="nf nf-oct-thumbsup" />
|
|
</Icon>
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
backgroundColor={personalRating === RatingType.Down ? 'red.500/80' : 'red.500'}
|
|
borderColor="red.500"
|
|
onClick={async () => {
|
|
if (personalRating !== RatingType.Down) {
|
|
await onRatingSet(RatingType.Down);
|
|
return;
|
|
}
|
|
await onRatingSet(RatingType.None);
|
|
}}
|
|
>
|
|
<Icon>
|
|
<i className="nf nf-oct-thumbsdown" />
|
|
</Icon>
|
|
</Button>
|
|
</Stack>
|
|
);
|
|
}
|