doo-boilerplate 0.1.10 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doo-boilerplate",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "CLI to scaffold Pila portal frontend projects",
   "type": "module",
   "bin": {

package/templates/template-nextjs/src/components/layout/header.tsx

@@ -1,10 +1,13 @@
 'use client'
 
+import { useState } from 'react'
 import { LogOut, Menu, User } from 'lucide-react'
 import Link from 'next/link'
+import { useRouter } from 'next/navigation'
 
 import { useSignOut } from '@/features/auth/hooks/use-auth'
 import { useAuthStore } from '@/stores/auth-store'
+import { ThemeToggle } from '@/components/common/theme-toggle'
 
 import { Avatar, AvatarFallback } from '../ui/avatar'
 import { Button } from '../ui/button'
@@ -18,6 +21,49 @@ import {
 } from '../ui/dropdown-menu'
 import { useSidebarStore } from './sidebar'
 
+const LANGUAGES = [
+  { code: 'en', label: 'EN' },
+  { code: 'vi', label: 'VI' },
+]
+
+function getLangFromCookie(): string {
+  if (typeof document === 'undefined') return 'en'
+  const match = document.cookie.match(/(?:^|;\s*)NEXT_LOCALE=([^;]+)/)
+  return match?.[1] ?? 'en'
+}
+
+function LangSwitcher() {
+  const [locale, setLocale] = useState(getLangFromCookie)
+  const router = useRouter()
+
+  function switchLocale(code: string) {
+    document.cookie = `NEXT_LOCALE=${code}; path=/; max-age=${365 * 24 * 60 * 60}`
+    setLocale(code)
+    router.refresh()
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="w-10 px-0 font-medium">
+          {locale.toUpperCase().slice(0, 2)}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {LANGUAGES.map(({ code, label }) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => switchLocale(code)}
+            className={locale === code ? 'font-semibold' : ''}
+          >
+            {label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
 interface HeaderProps {
   title?: string
 }
@@ -52,6 +98,11 @@ export function Header({ title = 'Dashboard' }: HeaderProps) {
         <h2 className="text-lg font-semibold">{title}</h2>
       </div>
 
+      {/* Controls */}
+      <div className="flex items-center gap-1">
+        <LangSwitcher />
+        <ThemeToggle />
+
       {/* User dropdown */}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
@@ -86,6 +137,7 @@ export function Header({ title = 'Dashboard' }: HeaderProps) {
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
+      </div>
     </header>
   )
 }

package/templates/template-vite/src/components/layout/header.tsx

@@ -1,8 +1,11 @@
 import { LogOut, User } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 import { useSignOut } from '@/features/auth/hooks/use-auth'
 import { useAuthStore } from '@/stores/auth-store'
+import { ThemeToggle } from '@/components/common/theme-toggle'
 import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -11,7 +14,35 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Button } from '@/components/ui/button'
+
+const LANGUAGES = [
+  { code: 'en', label: 'EN' },
+  { code: 'vi', label: 'VI' },
+]
+
+function LangSwitcher() {
+  const { i18n } = useTranslation()
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' size='sm' className='w-10 px-0 font-medium'>
+          {i18n.language.toUpperCase().slice(0, 2)}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        {LANGUAGES.map(({ code, label }) => (
+          <DropdownMenuItem
+            key={code}
+            onClick={() => i18n.changeLanguage(code)}
+            className={i18n.language === code ? 'font-semibold' : ''}
+          >
+            {label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
 
 export function Header() {
   const { user } = useAuthStore()
@@ -25,9 +56,12 @@ export function Header() {
     .slice(0, 2)
 
   return (
-    <header className='flex h-14 items-center border-b bg-background px-4 gap-4'>
+    <header className='flex h-14 items-center border-b bg-background px-4 gap-2'>
       <div className='flex-1' />
 
+      <LangSwitcher />
+      <ThemeToggle />
+
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button variant='ghost' size='icon' className='rounded-full' aria-label='User menu'>