@asafarim/shared-i18n 0.6.3 → 0.6.5

package/README.md

@@ -2,6 +2,8 @@
 
 Lightweight, simple translation module for any React + TypeScript app, built on top of i18next and react-i18next. It ships with sensible defaults (English and Dutch) but can support any language by adding JSON files to your locales folder.
 
+* see Demo at: [https://alisafari-it.github.io/shared-i18n/](https://alisafari-it.github.io/shared-i18n/)
+
 ## Features
 
 - 🌍 Works in any React + TypeScript project (monorepo or standalone)
@@ -172,7 +174,9 @@ interface LanguageSwitcherProps {
 
 - **buttons** — Individual buttons for each language (default)
 - **select** — Native dropdown select element
+  ![Select Dropdown](https://github.com/AliSafari-IT/shared-i18n/blob/main/demo/public/Select%20Dropdown_Text%20Only.png?raw=true)
 - **icon-dropdown** — Custom dropdown showing flag emojis with language codes
+  ![Icon Dropdown](https://github.com/AliSafari-IT/shared-i18n/blob/main/demo/public/Icon%20Dropdown_Limited%20Languages.png?raw=true)
 
 ### Examples
 

package/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shared-i18n-demo",
-  "version": "0.6.2",
+  "version": "0.6.5",
   "private": true,
   "type": "module",
   "scripts": {

package/demo/src/App.tsx

@@ -7,9 +7,12 @@ import StatusCard from './components/StatusCard'
 import OverviewSection from './components/OverviewSection'
 import GetStartedSection from './components/GetStartedSection'
 import LanguageSwitcherDemo from './components/LanguageSwitcherDemo'
+import Logo from './components/Logo'
 
 type TabType = 'overview' | 'getStarted' | 'demo'
 
+
+
 export default function App() {
   const { t } = useTranslation('demo')
   const [activeTab, setActiveTab] = useState<TabType>('overview')
@@ -17,6 +20,7 @@ export default function App() {
   return (
     <div className="app-container">
       <header className="app-header">
+        <Logo />
         <div className="header-content">
           <h1>{t('title')}</h1>
           <p className="subtitle">{t('subtitle')}</p>

package/demo/src/components/Logo.tsx

@@ -0,0 +1,7 @@
+export default function Logo({width = 70}: {width?: number}) {
+  return (
+    <div className="logo">
+      <img src={import.meta.env.BASE_URL + "logo.svg"} alt="Logo" width={width} />
+    </div>
+  )
+}

package/demo/src/index.css

@@ -566,4 +566,40 @@ body {
     opacity: 1;
     max-height: 500px;
   }
-}
+}
+
+.logo {
+  width: 70px;
+  height: 70px;
+}
+
+.logo img {
+  width: 100%;
+  height: 100%;
+}
+
+
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .logo {
+    width: 50px;
+    height: 50px;
+  }
+}
+
+/* Tablet adjustments */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .logo {
+    width: 60px;
+    height: 60px;
+  }
+}
+
+/* Desktop adjustments */
+@media (min-width: 1025px) {
+  .logo {
+    width: 70px;
+    height: 70px;
+  }
+}

package/demo/tsconfig.json

@@ -13,6 +13,6 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", "../src/types", "../vite-env.d.ts"],
+  "include": ["src", "../src/types", "./vite-env.d.ts"],
   "references": [{ "path": "./tsconfig.node.json" }, { "path": "../tsconfig.json" }]
 }

package/demo/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 declare module 'vite/client' {
   interface ImportMetaEnv {
+    readonly BASE_URL: string
     readonly VITE_IDENTITY_API_URL?: string
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@asafarim/shared-i18n",
   "description": "A shared i18n package for React applications",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "type": "module",
   "files": [
     "dist",