gradio

1
<script lang="ts">
2
	import type { I18nFormatter } from "@gradio/utils";
3
	import { Upload as UploadIcon, ImagePaste } from "@gradio/icons";
4
	export let type:
5
		| "video"
6
		| "image"
7
		| "audio"
8
		| "file"
9
		| "csv"
10
		| "clipboard"
11
		| "gallery" = "file";
12
	export let i18n: I18nFormatter;
13
	export let message: string | undefined = undefined;
14
	export let mode: "full" | "short" = "full";
15
	export let hovered = false;
16

17
	const defs = {
18
		image: "upload_text.drop_image",
19
		video: "upload_text.drop_video",
20
		audio: "upload_text.drop_audio",
21
		file: "upload_text.drop_file",
22
		csv: "upload_text.drop_csv",
23
		gallery: "upload_text.drop_gallery",
24
		clipboard: "upload_text.paste_clipboard"
25
	};
26
</script>
27

28
<div class="wrap">
29
	<span class="icon-wrap" class:hovered>
30
		{#if type === "clipboard"}
31
			<ImagePaste />
32
		{:else}
33
			<UploadIcon />
34
		{/if}
35
	</span>
36

37
	{i18n(defs[type] || defs.file)}
38

39
	{#if mode !== "short"}
40
		<span class="or">- {i18n("common.or")} -</span>
41
		{message || i18n("upload_text.click_to_upload")}
42
	{/if}
43
</div>
44

45
<style>
46
	.wrap {
47
		display: flex;
48
		flex-direction: column;
49
		justify-content: center;
50
		align-items: center;
51
		min-height: var(--size-60);
52
		color: var(--block-label-text-color);
53
		line-height: var(--line-md);
54
		height: 100%;
55
		padding-top: var(--size-3);
56
	}
57

58
	.or {
59
		color: var(--body-text-color-subdued);
60
		display: flex;
61
	}
62

63
	.icon-wrap {
64
		width: 30px;
65
		margin-bottom: var(--spacing-lg);
66
	}
67

68
	@media (--screen-md) {
69
		.wrap {
70
			font-size: var(--text-lg);
71
		}
72
	}
73

74
	.hovered {
75
		color: var(--color-accent);
76
	}
77
</style>
78