File size: 863 Bytes
e20bcf8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script lang="ts">
	import { Like } from "@gradio/icons";
	import { Dislike } from "@gradio/icons";

	export let action: "like" | "dislike";
	export let handle_action: () => void;

	let actioned = false;
	let Icon = action === "like" ? Like : Dislike;

	function action_feedback(): void {
		actioned = true;
	}
</script>

<button
	on:click={() => {
		action_feedback();
		handle_action();
	}}
	on:keydown={(e) => {
		if (e.key === "Enter") {
			action_feedback();
			handle_action();
		}
	}}
	title={action + " message"}
	aria-label={actioned ? `clicked ${action}` : action}
>
	<Icon {actioned} />
</button>

<style>
	button {
		position: relative;
		top: 0;
		right: 0;
		cursor: pointer;
		color: var(--body-text-color-subdued);
		width: 17px;
		height: 17px;
		margin-right: 5px;
	}

	button:hover,
	button:focus {
		color: var(--body-text-color);
	}
</style>