gradio/frontend

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