Merge pull request #32 from abhaykv04/dev

Add Hindi Support 🎉

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fifo",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/app.css

@@ -15,6 +15,10 @@
     @apply text-2xl font-semibold;
   }
 
+  select {
+    @apply bg-orange-50;
+  }
+
   .filled {
     @apply inline-block text-center text-xl bg-orange-600 text-orange-50 rounded-full p-3;
   }
@@ -24,6 +28,7 @@
   }
 }
 
+/* Progress bar */
 #nprogress .bar {
   background: #ea580c;
   height: 4px;

src/lib/AddEditQ.svelte

@@ -11,6 +11,7 @@
     SaveIcon,
     ThreeBarsIcon,
   } from "./icons";
+  import { labels } from "./stores";
 
   // Props
   export let editMode = false;
@@ -54,7 +55,7 @@
     if (!newItemValue) return;
 
     if (newItemValue.length > 5) {
-      error = "item name must be less than 5 characters";
+      error = $labels.ITEM_LESS_THAN_5_ERROR;
       return;
     }
 
@@ -75,17 +76,17 @@
 
   const handleQueueSave = () => {
     if (!name) {
-      error = "please enter queue name";
+      error = $labels.ENTER_QUEUE_NAME_ERROR;
       return;
     }
 
     if (name.length > 10) {
-      error = "queue name must be less than 10 characters";
+      error = $labels.QUEUE_LESS_THAN_10_ERROR;
       return;
     }
 
     if (!items.length) {
-      error = "please add atleast one item";
+      error = $labels.ITEM_ATLEAST_ONE_ERROR;
       return;
     }
 
@@ -119,8 +120,7 @@
   };
 
   const handleItemEdit = (id: string, value: string) => {
-    const newValue =
-      window && window.prompt(`Edit Item Name (Max 5 Characters)`, value);
+    const newValue = window && window.prompt($labels.EDIT_ITEM_NAME, value);
     if (!newValue || newValue.length > 5) return;
 
     items = items.map((item) => {
@@ -133,7 +133,7 @@
 <input
   class="outlined focus:outline-none text-left py-1"
   type="text"
-  placeholder="Enter Queue Name"
+  placeholder={$labels.ENTER_QUEUE_NAME}
   bind:value={name}
   on:keypress={({ key }) => key === "Enter" && newItemInput.focus()}
 />
@@ -163,7 +163,8 @@
           class="flex items-center gap-2"
           on:click={() => handleItemDelete(id)}
         >
-          Remove {@html CrossIcon}
+          {$labels.REMOVE}
+          {@html CrossIcon}
         </button>
       </li>
     {/each}
@@ -174,7 +175,7 @@
   <input
     class="outlined w-full focus:outline-none text-left py-1"
     type="text"
-    placeholder="Enter Item"
+    placeholder={$labels.ENTER_ITEM_NAME}
     bind:this={newItemInput}
     bind:value={newItemValue}
     on:keypress={({ key }) => key === "Enter" && handleItemAdd()}
@@ -183,7 +184,8 @@
     class="filled w-fit py-1 flex items-center gap-2"
     on:click={handleItemAdd}
   >
-    Add {@html PlusIcon}
+    {$labels.ADD}
+    {@html PlusIcon}
   </button>
 </div>
 
@@ -193,14 +195,15 @@
     type="checkbox"
     bind:checked={showCounter}
   />
-  Add Counter
+  {$labels.ADD_COUNTER}
 </label>
 
 <button
   class="filled w-full flex items-center justify-center gap-2"
   on:click={handleQueueSave}
 >
-  Save {@html SaveIcon}
+  {$labels.SAVE}
+  {@html SaveIcon}
 </button>
 {#if error}
   <p class="text-red-500 capitalize text-center">{error}</p>

src/lib/constants.ts

@@ -0,0 +1,48 @@
+// Dependencies
+import type { LabelsType } from "./types";
+
+// Constants
+export const LANGUAGES = ["EN", "HI"];
+
+export const LABELS: LabelsType = {
+  NEW: { EN: "New", HI: "नई पंक्ति बनाएँ" },
+  MY_QUEUES: { EN: "My Queues", HI: "मेरी पंक्तियाँ" },
+  NO_QUEUES_FOUND: { EN: "No Queues Found", HI: "कोई पंक्ति नहीं है" },
+  CREATE_NEW_QUEUE: { EN: "Create New Queue", HI: "नई पंक्ति बनाएँ" },
+  ENTER_QUEUE_NAME: { EN: "Enter Queue Name", HI: "पंक्ति का नाम डालें" },
+  ENTER_ITEM_NAME: { EN: "Enter Item Name", HI: "वस्तु का नाम डालें" },
+  ADD: { EN: "Add", HI: "डालें" },
+  ADD_COUNTER: { EN: "Add Counter", HI: "पंक्ति में गणित्र डालें" },
+  SAVE: { EN: "Save", HI: "सेव करें" },
+  REMOVE: { EN: "Remove", HI: "हटाएँ" },
+  DELETE_ALL: { EN: "Delete All", HI: "सारी पंक्तियाँ हटाएँ" },
+  SURE: { EN: "Sure?", HI: "पक्का?" },
+  EDIT: { EN: "Edit", HI: "एडिट" },
+  USE: { EN: "Use", HI: "उपयोग" },
+  SEND_TO_LAST: { EN: "Send to Last", HI: "अंत में भेजें" },
+  UNDO: { EN: "Undo", HI: "पूर्ववत करें" },
+  UP_NEXT: { EN: "Up Next", HI: "अगला" },
+  LAST_COUNT: { EN: "Last Count", HI: "पिछली संख्या" },
+  EDIT_ITEM_NAME: {
+    EN: "Edit Item Name (Max 5 Characters)",
+    HI: "वास्तु का नाम एडिट करें (अधिकतम 5 अक्षर)",
+  },
+  EDIT_QUEUE: { EN: "Edit Queue", HI: "पंक्ति एडिट करें" },
+  DELETE: { EN: "Delete", HI: "पंक्ति हटाएँ" },
+  ITEM_LESS_THAN_5_ERROR: {
+    EN: "item name must be less than 5 characters",
+    HI: "वस्तु का नाम 5 अक्षरों से काम का होना चाहिए",
+  },
+  ENTER_QUEUE_NAME_ERROR: {
+    EN: "please enter queue name",
+    HI: "कृपया पंक्ति का नाम डालें",
+  },
+  QUEUE_LESS_THAN_10_ERROR: {
+    EN: "queue name must be less than 10 characters",
+    HI: "पंक्ति का नाम 10 अक्षरों से काम का होना चाहिए",
+  },
+  ITEM_ATLEAST_ONE_ERROR: {
+    EN: "please add atleast one item",
+    HI: "कृपया कम से कम एक वस्तु डालें",
+  },
+};

src/lib/stores.ts

@@ -0,0 +1,18 @@
+// Dependencies
+import { derived, writable, type Readable } from "svelte/store";
+import { LABELS } from "./constants";
+
+// Stores
+export const appLanguage = writable("EN");
+
+export const labels: Readable<{ [x: string]: string }> = derived(
+  appLanguage,
+  ($appLanguage) =>
+    Object.keys(LABELS).reduce((acc, curr) => {
+      const labelObject = LABELS[curr];
+      return {
+        ...acc,
+        [curr]: labelObject[$appLanguage as keyof typeof labelObject],
+      };
+    }, {})
+);

src/lib/types.ts

@@ -16,3 +16,7 @@ export type QueuesType = QueueType[] | [];
 export type ValuesType = {
   [x: string]: number;
 };
+
+export type LabelsType = {
+  [x: string]: { EN: string; HI: string };
+};

src/lib/utils.ts

@@ -0,0 +1,9 @@
+// Dependencies
+import { LABELS } from "./constants";
+
+// Utilities
+export const getLabel = (labelName: string, appLanguage: string) => {
+  const labelObject = LABELS[labelName];
+  const labelValue = labelObject[appLanguage as keyof typeof labelObject];
+  return labelValue;
+};

src/routes/+layout.svelte

@@ -1,5 +1,7 @@
 <script>
   import { afterNavigate, beforeNavigate } from "$app/navigation";
+  import { LANGUAGES } from "$lib/constants";
+  import { appLanguage } from "$lib/stores";
   import nProgress from "nprogress";
 
   // Styles
@@ -11,26 +13,50 @@
   afterNavigate(() => nProgress.done());
 </script>
 
-<header class="p-4">
-  <h1><a href="/">f • i • f • o</a></h1>
+<header class="p-4 max-w-md m-auto grid grid-cols-4 justify-items-start">
+  <select bind:value={$appLanguage}>
+    {#each LANGUAGES as lang}
+      <option value={lang}>{lang}</option>
+    {/each}
+  </select>
+  <h1 class="col-span-2 justify-self-center">
+    <a href="/">f • i • f • o</a>
+  </h1>
 </header>
 
 <main class="p-4 max-w-md m-auto flex flex-col gap-4 pb-8">
   <slot />
 </main>
 
 <footer class="py-2 fixed bottom-0 bg-orange-50 w-full text-center text-xs">
-  Made with
-  <span class="cursor-help" title="🧡 = SvelteKit + Tailwind + TypeScript">
-    🧡
-  </span>
-  in India by
-  <a
-    class="underline"
-    href="https://github.com/abhaykv04"
-    target="_blank"
-    rel="noreferrer"
-  >
-    Abhay
-  </a>
+  {#if $appLanguage === "EN"}
+    Made with
+    <span class="cursor-help" title="🧡 = SvelteKit + Tailwind + TypeScript">
+      🧡
+    </span>
+    in India by
+    <a
+      class="underline"
+      href="https://github.com/abhaykv04"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Abhay
+    </a>
+  {:else}
+    भारत में
+    <span class="cursor-help" title="🧡 = SvelteKit + Tailwind + TypeScript">
+      🧡
+    </span>
+    सहित
+    <a
+      class="underline"
+      href="https://github.com/abhaykv04"
+      target="_blank"
+      rel="noreferrer"
+    >
+      अभय
+    </a>
+    द्वारा विकसित
+  {/if}
 </footer>

src/routes/+page.svelte

@@ -3,6 +3,7 @@
   import { browser } from "$app/environment";
   import Divider from "$lib/Divider.svelte";
   import { ArrowRightIcon, DangerIcon, EditIcon, PlusIcon } from "$lib/icons";
+  import { labels } from "$lib/stores";
   import type { QueuesType } from "$lib/types";
 
   // State
@@ -16,7 +17,7 @@
   // Handlers
   const handleDeleteAll = () => {
     if (!deleteButtonLabel.length) {
-      deleteButtonLabel = "Sure?";
+      deleteButtonLabel = $labels.SURE;
       return;
     }
 
@@ -29,19 +30,20 @@
 </script>
 
 <a class="filled w-full flex items-center gap-2 justify-center" href="/new">
-  New {@html PlusIcon}
+  {$labels.NEW}
+  {@html PlusIcon}
 </a>
 
 <Divider />
 
 <h2 class="flex justify-between items-center">
-  My Queues
+  {$labels.MY_QUEUES}
   {#if queues.length}
     <button
       class="filled py-1 text-base font-normal flex items-center gap-2"
       on:click={handleDeleteAll}
     >
-      {deleteButtonLabel || "Delete All"}
+      {deleteButtonLabel || $labels.DELETE_ALL}
       {@html DangerIcon}
     </button>
   {/if}
@@ -51,16 +53,18 @@
   {#each queues as { id, name } (id)}
     <li class="outlined flex items-center justify-between mb-4">
       <a class="flex items-center gap-2" href="/edit/{id}">
-        {@html EditIcon} Edit
+        {@html EditIcon}
+        {$labels.EDIT}
       </a>
 
       <span class="font-bold">{name}</span>
 
       <a class="flex items-center gap-2" href="/use/{id}">
-        Use {@html ArrowRightIcon}
+        {$labels.USE}
+        {@html ArrowRightIcon}
       </a>
     </li>
   {:else}
-    <li class="outlined w-full italic">No Queues Found</li>
+    <li class="outlined w-full italic">{$labels.NO_QUEUES_FOUND}</li>
   {/each}
 </ul>