feat: add language switcher to showcase view using i18n hook

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>