layout

src/lib/components/Playground/Playground.svelte

@@ -312,5 +312,45 @@
 			bind:jsonMode
 			bind:streaming
 		/>
+		<div
+			class="mt-auto flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-400"
+			role="alert"
+		>
+			<span class="text-sm font-semibold text-gray-900 dark:text-white">Get more usage</span>
+			<div class="text-sm font-normal">Larger models, x10 quota, and advanced features.</div>
+			<a
+				href="#"
+				class="inline-flex rounded-lg bg-black px-2.5 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:hover:bg-black dark:focus:ring-blue-800"
+				>Get PRO ($9/month)</a
+			>
+		</div>
+		<!-- <div
+		class="flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
+		role="alert"
+	>
+		<span class="text-sm font-semibold text-gray-900 dark:text-white">Deploy dedicated</span>
+		<div class="text-sm font-normal">Deploy your own production ready endpoint</div>
+		<a
+			href="#"
+			class="inline-flex rounded-lg bg-black px-2.5 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:hover:bg-black dark:focus:ring-blue-800"
+			>Deploy dedicated</a
+		>
+	</div> -->
+		<div>
+			<div class="mb-3 flex items-center justify-between gap-2">
+				<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white"
+					>API Quota</label
+				>
+				<span
+					class="rounded bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
+					>Free</span
+				>
+
+				<div class="ml-auto w-12 text-right text-sm">76%</div>
+			</div>
+			<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
+				<div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
+			</div>
+		</div>
 	</div>
 </div>

src/lib/components/Playground/PlaygroundOptions.svelte

@@ -7,21 +7,19 @@
 </script>
 
 <div>
-	<div>
-		<label
-			for="countries"
-			class="mb-2 flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
-			>Models<span class="ml-4 font-normal text-gray-400">{compatibleModels.length}</span>
-		</label>
-		<select
-			bind:value={currentModel}
-			class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-		>
-			{#each compatibleModels as model}
-				<option value={model}>{model}</option>
-			{/each}
-		</select>
-	</div>
+	<label
+		for="countries"
+		class="mb-2 flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
+		>Models<span class="ml-4 font-normal text-gray-400">{compatibleModels.length}</span>
+	</label>
+	<select
+		bind:value={currentModel}
+		class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+	>
+		{#each compatibleModels as model}
+			<option value={model}>{model}</option>
+		{/each}
+	</select>
 </div>
 <div>
 	<div class="flex items-center justify-between">
@@ -91,43 +89,3 @@
 		></div>
 	</label>
 </div>
-<div
-	class="mt-auto flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:border-gray-800 dark:bg-gray-800/50 dark:text-gray-400"
-	role="alert"
->
-	<span class="text-sm font-semibold text-gray-900 dark:text-white">Get more usage</span>
-	<div class="text-sm font-normal">Larger models, x10 quota, and advanced features.</div>
-	<a
-		href="#"
-		class="inline-flex rounded-lg bg-black px-2.5 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:hover:bg-black dark:focus:ring-blue-800"
-		>Get PRO ($9/month)</a
-	>
-</div>
-<!-- <div
-	class="flex max-w-xs flex-col items-start gap-2.5 rounded-lg border bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400"
-	role="alert"
->
-	<span class="text-sm font-semibold text-gray-900 dark:text-white">Deploy dedicated</span>
-	<div class="text-sm font-normal">Deploy your own production ready endpoint</div>
-	<a
-		href="#"
-		class="inline-flex rounded-lg bg-black px-2.5 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:hover:bg-black dark:focus:ring-blue-800"
-		>Deploy dedicated</a
-	>
-</div> -->
-<div>
-	<div class="mb-3 flex items-center justify-between gap-2">
-		<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white"
-			>API Quota</label
-		>
-		<span
-			class="rounded bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300"
-			>Free</span
-		>
-
-		<div class="ml-auto w-12 text-right text-sm">76%</div>
-	</div>
-	<div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
-		<div class="h-2 rounded-full bg-black dark:bg-gray-400" style="width: 75%"></div>
-	</div>
-</div>