gradio/frontend

1<script lang="ts">2	import JSON from "./shared/JSON.svelte";3 4	let {5		value,6		theme_mode = "system" as "system" | "light" | "dark",7		type,8		selected = false9	}: {10		value: any;11		theme_mode?: "system" | "light" | "dark";12		type: "gallery" | "table";13		selected?: boolean;14	} = $props();15 16	let show_indices = $state(false);17	let label_height = $state(0);18</script>19 20<div21	class="container"22	class:table={type === "table"}23	class:gallery={type === "gallery"}24	class:selected25	class:border={value}26>27	{#if value}28		<JSON29			{value}30			open={true}31			{theme_mode}32			{show_indices}33			{label_height}34			interactive={false}35			show_copy_button={false}36		/>37	{/if}38</div>39 40<style>41	.container :global(img) {42		width: 100%;43		height: 100%;44	}45 46	.container.selected {47		border-color: var(--border-color-accent);48	}49	.border.table {50		border: 1px solid var(--border-color-primary);51	}52 53	.container.table {54		margin: 0 auto;55		border-radius: var(--radius-lg);56		overflow: hidden;57		width: 100%;58		height: 100%;59		max-width: var(--size-40);60		max-height: var(--size-20);61		object-fit: cover;62	}63 64	.container.gallery {65		width: 100%;66		max-width: 100%;67		object-fit: cover;68		max-width: var(--size-40);69		max-height: var(--size-20);70		overflow: hidden;71	}72</style>73