gradio

1
<script lang="ts">
2
	import { Like } from "@gradio/icons";
3
	import { Dislike } from "@gradio/icons";
4

5
	export let handle_action: (selected: string | null) => void;
6

7
	let selected: "like" | "dislike" | null = null;
8
</script>
9

10
<button
11
	on:click={() => {
12
		selected = "like";
13
		handle_action(selected);
14
	}}
15
	aria-label={selected === "like" ? "clicked like" : "like"}
16
>
17
	<Like selected={selected === "like"} />
18
</button>
19

20
<button
21
	on:click={() => {
22
		selected = "dislike";
23
		handle_action(selected);
24
	}}
25
	aria-label={selected === "dislike" ? "clicked dislike" : "dislike"}
26
>
27
	<Dislike selected={selected === "dislike"} />
28
</button>
29

30
<style>
31
	button {
32
		position: relative;
33
		top: 0;
34
		right: 0;
35
		cursor: pointer;
36
		color: var(--body-text-color-subdued);
37
		width: 17px;
38
		height: 17px;
39
		margin-right: 5px;
40
	}
41

42
	button:hover,
43
	button:focus {
44
		color: var(--body-text-color);
45
	}
46
</style>
47