create-tauri-ui 0.1.5 → 0.2.0

package/templates/next/src/components/menu.tsx

@@ -1,259 +1,259 @@
-"use client"
-
-import { useCallback } from "react"
-import Image from "next/image"
-import { usePathname } from "next/navigation"
-import logo from "@/assets/logo.png"
-import { Globe, Maximize, Mic, Music2, Sailboat, X, Zap } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Menubar,
-  MenubarCheckboxItem,
-  MenubarContent,
-  MenubarItem,
-  MenubarLabel,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarTrigger,
-} from "@/components/ui/menubar"
-
-import { ExamplesNav } from "./examples-nav"
-import { Icons } from "./icons"
-import { MenuModeToggle } from "./menu-mode-toggle"
-import { ModeToggle } from "./mode-toggle"
-
-export function Menu() {
-  const minimizeWindow = useCallback(async () => {
-    const { appWindow } = await import("@tauri-apps/plugin-window")
-
-    appWindow?.minimize()
-  }, [])
-
-  const maximizeWindow = useCallback(async () => {
-    const { appWindow } = await import("@tauri-apps/plugin-window")
-    const isMaximized = await appWindow?.isMaximized()
-
-    if (isMaximized) {
-      appWindow?.unmaximize()
-    } else {
-      appWindow?.maximize()
-    }
-  }, [])
-
-  const closeWindow = useCallback(async () => {
-    const { appWindow } = await import("@tauri-apps/plugin-window")
-
-    appWindow.close()
-  }, [])
-
-  return (
-    <Menubar className="rounded-none border-b border-none pl-2 lg:pl-3">
-      {/* App Logo */}
-      <MenubarMenu>
-        <div className="inline-flex h-fit w-fit items-center text-cyan-500">
-          {usePathname() === "/" || usePathname() === "/examples/music" ? (
-            <Image src={logo} alt="logo" width={40} />
-          ) : (
-            <Sailboat className="h-5 w-5" />
-          )}
-        </div>
-      </MenubarMenu>
-
-      <MenubarMenu>
-        <MenubarTrigger className="font-bold">App</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>About App</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Preferences... <MenubarShortcut>⌘,</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Hide Music... <MenubarShortcut>⌘H</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut>
-          </MenubarItem>
-          <MenubarShortcut />
-          <MenubarItem onClick={closeWindow}>
-            Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger className="relative">File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarSub>
-            <MenubarSubTrigger>New</MenubarSubTrigger>
-            <MenubarSubContent className="w-[230px]">
-              <MenubarItem>
-                Playlist <MenubarShortcut>⌘N</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem disabled>
-                Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>
-                Smart Playlist... <MenubarShortcut>⌥⌘N</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>Playlist Folder</MenubarItem>
-              <MenubarItem disabled>Genius Playlist</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarItem>
-            Open Stream URL... <MenubarShortcut>⌘U</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Library</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Update Cloud Library</MenubarItem>
-              <MenubarItem>Update Genius</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Organize Library...</MenubarItem>
-              <MenubarItem>Export Library...</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Import Playlist...</MenubarItem>
-              <MenubarItem disabled>Export Playlist...</MenubarItem>
-              <MenubarItem>Show Duplicate Items</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Get Album Artwork</MenubarItem>
-              <MenubarItem disabled>Get Track Names</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarItem>
-            Import... <MenubarShortcut>⌘O</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>Burn Playlist to Disc...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
-          </MenubarItem>
-          <MenubarItem>Convert</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Page Setup...</MenubarItem>
-          <MenubarItem disabled>
-            Print... <MenubarShortcut>⌘P</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem disabled>
-            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem disabled>
-            Cut <MenubarShortcut>⌘X</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Copy <MenubarShortcut>⌘C</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Paste <MenubarShortcut>⌘V</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Select All <MenubarShortcut>⌘A</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Smart Dictation...{" "}
-            <MenubarShortcut>
-              <Mic className="h-4 w-4" />
-            </MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Emoji & Symbols{" "}
-            <MenubarShortcut>
-              <Globe className="h-4 w-4" />
-            </MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarCheckboxItem>Show Playing Next</MenubarCheckboxItem>
-          <MenubarCheckboxItem checked>Show Lyrics</MenubarCheckboxItem>
-          <MenubarSeparator />
-          <MenubarItem inset disabled>
-            Show Status Bar
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Hide Sidebar</MenubarItem>
-          <MenubarItem disabled inset>
-            Enter Full Screen
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger className="hidden md:block">Account</MenubarTrigger>
-        <MenubarContent forceMount>
-          <MenubarLabel inset>Switch Account</MenubarLabel>
-          <MenubarSeparator />
-          <MenubarRadioGroup value="benoit">
-            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-          </MenubarRadioGroup>
-          <MenubarSeparator />
-          <MenubarItem inset>Manage Famliy...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Add Account...</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-
-      <MenuModeToggle />
-
-      <ExamplesNav />
-
-      <div
-        data-tauri-drag-region
-        className="inline-flex h-full w-full justify-end"
-      >
-        {/* <div className="pr-3">
-          <ModeToggle />
-        </div> */}
-
-        <Button
-          onClick={minimizeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <Icons.minimize className="h-3 w-3" />
-        </Button>
-        <Button
-          onClick={maximizeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <Maximize className="h-4 w-4" />
-        </Button>
-        <Button
-          onClick={closeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-    </Menubar>
-  )
-}
+"use client"
+
+import { useCallback } from "react"
+import Image from "next/image"
+import { usePathname } from "next/navigation"
+import logo from "@/assets/logo.png"
+import { Globe, Maximize, Mic, Music2, Sailboat, X, Zap } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+
+import { ExamplesNav } from "./examples-nav"
+import { Icons } from "./icons"
+import { MenuModeToggle } from "./menu-mode-toggle"
+import { ModeToggle } from "./mode-toggle"
+
+export function Menu() {
+  const minimizeWindow = useCallback(async () => {
+    const { appWindow } = await import("@tauri-apps/plugin-window")
+
+    appWindow?.minimize()
+  }, [])
+
+  const maximizeWindow = useCallback(async () => {
+    const { appWindow } = await import("@tauri-apps/plugin-window")
+    const isMaximized = await appWindow?.isMaximized()
+
+    if (isMaximized) {
+      appWindow?.unmaximize()
+    } else {
+      appWindow?.maximize()
+    }
+  }, [])
+
+  const closeWindow = useCallback(async () => {
+    const { appWindow } = await import("@tauri-apps/plugin-window")
+
+    appWindow.close()
+  }, [])
+
+  return (
+    <Menubar className="rounded-none border-b border-none pl-2 lg:pl-3">
+      {/* App Logo */}
+      <MenubarMenu>
+        <div className="inline-flex h-fit w-fit items-center text-cyan-500">
+          {usePathname() === "/" || usePathname() === "/examples/music" ? (
+            <Image src={logo} alt="logo" width={40} />
+          ) : (
+            <Sailboat className="h-5 w-5" />
+          )}
+        </div>
+      </MenubarMenu>
+
+      <MenubarMenu>
+        <MenubarTrigger className="font-bold">App</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>About App</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Preferences... <MenubarShortcut>⌘,</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Hide Music... <MenubarShortcut>⌘H</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut>
+          </MenubarItem>
+          <MenubarShortcut />
+          <MenubarItem onClick={closeWindow}>
+            Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger className="relative">File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarSub>
+            <MenubarSubTrigger>New</MenubarSubTrigger>
+            <MenubarSubContent className="w-[230px]">
+              <MenubarItem>
+                Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem disabled>
+                Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>
+                Smart Playlist... <MenubarShortcut>⌥⌘N</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>Playlist Folder</MenubarItem>
+              <MenubarItem disabled>Genius Playlist</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarItem>
+            Open Stream URL... <MenubarShortcut>⌘U</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Library</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>Update Cloud Library</MenubarItem>
+              <MenubarItem>Update Genius</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Organize Library...</MenubarItem>
+              <MenubarItem>Export Library...</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Import Playlist...</MenubarItem>
+              <MenubarItem disabled>Export Playlist...</MenubarItem>
+              <MenubarItem>Show Duplicate Items</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>Get Album Artwork</MenubarItem>
+              <MenubarItem disabled>Get Track Names</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarItem>
+            Import... <MenubarShortcut>⌘O</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>Burn Playlist to Disc...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
+          </MenubarItem>
+          <MenubarItem>Convert</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Page Setup...</MenubarItem>
+          <MenubarItem disabled>
+            Print... <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem disabled>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem disabled>
+            Cut <MenubarShortcut>⌘X</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Copy <MenubarShortcut>⌘C</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Paste <MenubarShortcut>⌘V</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Select All <MenubarShortcut>⌘A</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Smart Dictation...{" "}
+            <MenubarShortcut>
+              <Mic className="h-4 w-4" />
+            </MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Emoji & Symbols{" "}
+            <MenubarShortcut>
+              <Globe className="h-4 w-4" />
+            </MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem>Show Playing Next</MenubarCheckboxItem>
+          <MenubarCheckboxItem checked>Show Lyrics</MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset disabled>
+            Show Status Bar
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Hide Sidebar</MenubarItem>
+          <MenubarItem disabled inset>
+            Enter Full Screen
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Account</MenubarTrigger>
+        <MenubarContent forceMount>
+          <MenubarLabel inset>Switch Account</MenubarLabel>
+          <MenubarSeparator />
+          <MenubarRadioGroup value="benoit">
+            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+          </MenubarRadioGroup>
+          <MenubarSeparator />
+          <MenubarItem inset>Manage Famliy...</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset>Add Account...</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+
+      <MenuModeToggle />
+
+      <ExamplesNav />
+
+      <div
+        data-tauri-drag-region
+        className="inline-flex h-full w-full justify-end"
+      >
+        {/* <div className="pr-3">
+          <ModeToggle />
+        </div> */}
+
+        <Button
+          onClick={minimizeWindow}
+          variant="ghost"
+          className="h-8 focus:outline-none"
+        >
+          <Icons.minimize className="h-3 w-3" />
+        </Button>
+        <Button
+          onClick={maximizeWindow}
+          variant="ghost"
+          className="h-8 focus:outline-none"
+        >
+          <Maximize className="h-4 w-4" />
+        </Button>
+        <Button
+          onClick={closeWindow}
+          variant="ghost"
+          className="h-8 focus:outline-none"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    </Menubar>
+  )
+}

package/templates/next/src/components/mode-toggle.tsx

@@ -1,43 +1,43 @@
-"use client"
-
-import * as React from "react"
-import { useTheme } from "next-themes"
-
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Icons } from "@/components/icons"
-
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="w-9 px-0">
-          <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          <Icons.sun className="mr-2 h-4 w-4" />
-          <span>Light</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          <Icons.moon className="mr-2 h-4 w-4" />
-          <span>Dark</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Icons.laptop className="mr-2 h-4 w-4" />
-          <span>System</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Icons } from "@/components/icons"
+
+export function ModeToggle() {
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="w-9 px-0">
+          <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          <Icons.sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          <Icons.moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Icons.laptop className="mr-2 h-4 w-4" />
+          <span>System</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}