gui/modules/ui/src/review-card/review-card.svelte
ABevier 6c3be19da2
Prettier (#522)
* Fix Prettier config
2023-04-28 12:14:44 +08:00

35 lines
867 B
Svelte

<script lang="ts">
import "../app.css";
import type { Review } from "../types";
export let review: Review;
const getStarType = () => {
let star = "full";
if (review.rating < 3) {
star = "empty";
} else if (review.rating < 4) {
star = "half";
}
return `icon-star-${star}`;
};
const getStarLabel = () => {
let label = "DELIGHTFUL";
if (review.rating < 3) {
label = "NOT DELIGHTFUL";
} else if (review.rating < 4) {
label = "DELIGHTFUL WITH NOTES";
}
return label;
};
</script>
<section class="border border-gray p-4">
<header class=" text-lg text-primary">{review.title}</header>
<div class="mt-2 flex text-xs">
<i class="{getStarType()} text-primary" />
<span class="pl-2 text-gray">{getStarLabel()}</span>
</div>
<p class="mt-2 text-sm">{review.comment}</p>
</section>