feat: limit request notice

client/src/components/notice.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let emoji: string = '';
+</script>
+<div
+  class="bg-chetwode-200 dark:bg-chetwode-800 font-body px-4 md:px-8 py-6 md:my-8 rounded-lg text-black dark:text-white shadow-xl bg-gradient-to-br from-transparent to-chetwode-300 dark:to-chetwode-900"
+>
+  <div class="flex flex-row items-center content-center">
+    <div class="flex-initial px-4 text-center text-lg">{emoji}</div>
+    <div class="flex-auto"><slot /></div>
+  </div>
+</div>

client/src/languages/en.json

@@ -67,6 +67,7 @@
     }
   },
   "api": {
+    "limit": "We limit the request to be 15 request/minute.",
     "get": {
       "title": "Get Jokes",
       "random": {

client/src/languages/id.json

@@ -67,6 +67,7 @@
     }
   },
   "api": {
+    "limit": "Kami membatasi request menjadi 15 request/menit.",
     "get": {
       "title": "Dapatkan Jokes",
       "random": {

client/src/routes/api.svelte

@@ -3,6 +3,7 @@
   import { _ } from 'svelte-i18n';
   import env from '$lib/env';
   import Codeblock from '../components/codeblock.svelte';
+  import Notice from '../components/notice.svelte';
 </script>
 
 <svelte:head>
@@ -14,6 +15,12 @@
   <meta property="og:description" content="Largest collection of Indonesian dad jokes as a consumable API" />
 </svelte:head>
 
+<section>
+  <Notice emoji="💡">
+    {$_('api.limit')}
+  </Notice>
+</section>
+
 <section>
   <h1>{$_('api.get.title')}</h1>
   <h2>{$_('api.get.random.title')}</h2>