From efb3c62df537d2f5796a7e0996f139159a7eda01 Mon Sep 17 00:00:00 2001
From: Reinaldy Rafli <aldy505@tutanota.com>
Date: Fri, 16 Jul 2021 01:38:24 +0700
Subject: [PATCH] feat: limit request notice

---
 client/src/components/notice.svelte | 11 +++++++++++
 client/src/languages/en.json        |  1 +
 client/src/languages/id.json        |  1 +
 client/src/routes/api.svelte        |  7 +++++++
 4 files changed, 20 insertions(+)
 create mode 100644 client/src/components/notice.svelte

diff --git a/client/src/components/notice.svelte b/client/src/components/notice.svelte
new file mode 100644
index 0000000..aaaf0b6
--- /dev/null
+++ b/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>
diff --git a/client/src/languages/en.json b/client/src/languages/en.json
index 0bdd65d..f439aad 100644
--- a/client/src/languages/en.json
+++ b/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": {
diff --git a/client/src/languages/id.json b/client/src/languages/id.json
index 349882f..15933c5 100644
--- a/client/src/languages/id.json
+++ b/client/src/languages/id.json
@@ -67,6 +67,7 @@
     }
   },
   "api": {
+    "limit": "Kami membatasi request menjadi 15 request/menit.",
     "get": {
       "title": "Dapatkan Jokes",
       "random": {
diff --git a/client/src/routes/api.svelte b/client/src/routes/api.svelte
index 3ba7580..8212309 100644
--- a/client/src/routes/api.svelte
+++ b/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>