From 1ceceb6759279548e5aebad2fa022b818224c8d7 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Mon, 22 Jun 2026 11:27:11 +0700
Subject: [PATCH] feat: add language switcher to showcase view using i18n hook

---
 apps/web/src/apps/showcase/showcase-view.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/apps/web/src/apps/showcase/showcase-view.tsx b/apps/web/src/apps/showcase/showcase-view.tsx
index 30537ac..b5579c7 100644
--- a/apps/web/src/apps/showcase/showcase-view.tsx
+++ b/apps/web/src/apps/showcase/showcase-view.tsx
@@ -23,6 +23,8 @@ import {
   Paper,
 } from '@repo/ui/components';
 import { ShieldCheck, Database, Lock, Layout, Activity, Printer, FileText } from 'lucide-react';
+import { Globe } from 'lucide-react';
+import { useTranslation } from '@repo/core-i18n';
 import PrinterList from './printer-list';
 import ExamplePage from './example/example.page';
 import EventsDemoPage from './events-demo';
@@ -38,6 +40,7 @@ interface ShowcaseViewProps {
 
 export default function ShowcaseView({ colorScheme, setColorScheme, density, setDensity }: ShowcaseViewProps) {
   const [activeTab, setActiveTab] = useState<string | null>('ui-components');
+  const { i18n } = useTranslation();
 
   // Mock data for the table
   const tableData = [
@@ -144,6 +147,18 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
                   {getSubtitle()}
                 </Text>
               </Stack>
+              <Select
+                w={180}
+                size="sm"
+                variant="filled"
+                leftSection={<Globe size={16} />}
+                data={[
+                  { value: 'en', label: 'English' },
+                  { value: 'id', label: 'Bahasa Indonesia' },
+                ]}
+                value={i18n.resolvedLanguage || i18n.language}
+                onChange={(val) => val && i18n.changeLanguage(val)}
+              />
             </Group>
           </Paper>