t :# 请为您的变更输入提交说明。以 '#' 开始的行将被忽略，而一个空的提交

frontend/shared/WebcamPermissions.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Webcam } from "@gradio/icons";
+	import { createEventDispatcher } from "svelte";
+
+	export let icon = Webcam;
+	$: text = icon === Webcam ? "Click to Access Webcam" : "Click to Access Microphone";
+
+	const dispatch = createEventDispatcher<{
+		click: undefined;
+	}>();
+</script>
+
+<button style:height="100%" on:click={() => dispatch("click")}>
+	<div class="wrap">
+		<span class="icon-wrap">
+			<svelte:component this={icon} />
+		</span>
+		{text}
+	</div>
+</button>
+
+<style>
+	button {
+		cursor: pointer;
+		width: var(--size-full);
+	}
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: var(--size-60);
+		color: var(--block-label-text-color);
+		height: 100%;
+		padding-top: var(--size-3);
+	}
+
+	.icon-wrap {
+		width: 30px;
+		margin-bottom: var(--spacing-lg);
+	}
+
+	@media (--screen-md) {
+		.wrap {
+			font-size: var(--text-lg);
+		}
+	}
+</style>