create-tauri-ui 0.1.4 → 0.2.0

package/templates/next/src/app/examples/tasks/components/data-table-view-options.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
+import { MixerHorizontalIcon } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
-import { SlidersHorizontal } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -28,7 +28,7 @@ export function DataTableViewOptions<TData>({
           size="sm"
           className="ml-auto hidden h-8 lg:flex"
         >
-          <SlidersHorizontal className="mr-2 h-4 w-4" />
+          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
           View
         </Button>
       </DropdownMenuTrigger>

package/templates/next/src/app/examples/tasks/components/user-nav.tsx

@@ -1,6 +1,8 @@
-import { CreditCard, LogOut, PlusCircle, Settings, User } from "lucide-react"
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -36,29 +38,22 @@ export function UserNav() {
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
           <DropdownMenuItem>
-            <User className="mr-2 h-4 w-4" />
-            <span>Profile</span>
+            Profile
             <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
           </DropdownMenuItem>
           <DropdownMenuItem>
-            <CreditCard className="mr-2 h-4 w-4" />
-            <span>Billing</span>
+            Billing
             <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
           </DropdownMenuItem>
           <DropdownMenuItem>
-            <Settings className="mr-2 h-4 w-4" />
-            <span>Settings</span>
+            Settings
             <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
           </DropdownMenuItem>
-          <DropdownMenuItem>
-            <PlusCircle className="mr-2 h-4 w-4" />
-            <span>New Team</span>
-          </DropdownMenuItem>
+          <DropdownMenuItem>New Team</DropdownMenuItem>
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuItem>
-          <LogOut className="mr-2 h-4 w-4" />
-          <span>Log out</span>
+          Log out
           <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
         </DropdownMenuItem>
       </DropdownMenuContent>

package/templates/next/src/app/examples/tasks/data/data.tsx

@@ -1,13 +1,13 @@
 import {
-  ArrowDownToLine,
-  ArrowRightToLine,
-  ArrowUpCircle,
-  ArrowUpToLine,
-  CheckCircle2,
-  Circle,
-  HelpCircle,
-  XCircle,
-} from "lucide-react"
+  ArrowDownIcon,
+  ArrowRightIcon,
+  ArrowUpIcon,
+  CheckCircledIcon,
+  CircleIcon,
+  CrossCircledIcon,
+  QuestionMarkCircledIcon,
+  StopwatchIcon,
+} from "@radix-ui/react-icons"
 
 export const labels = [
   {
@@ -28,27 +28,27 @@ export const statuses = [
   {
     value: "backlog",
     label: "Backlog",
-    icon: HelpCircle,
+    icon: QuestionMarkCircledIcon,
   },
   {
     value: "todo",
     label: "Todo",
-    icon: Circle,
+    icon: CircleIcon,
   },
   {
     value: "in progress",
     label: "In Progress",
-    icon: ArrowUpCircle,
+    icon: StopwatchIcon,
   },
   {
     value: "done",
     label: "Done",
-    icon: CheckCircle2,
+    icon: CheckCircledIcon,
   },
   {
     value: "canceled",
     label: "Canceled",
-    icon: XCircle,
+    icon: CrossCircledIcon,
   },
 ]
 
@@ -56,16 +56,16 @@ export const priorities = [
   {
     label: "Low",
     value: "low",
-    icon: ArrowDownToLine,
+    icon: ArrowDownIcon,
   },
   {
     label: "Medium",
     value: "medium",
-    icon: ArrowRightToLine,
+    icon: ArrowRightIcon,
   },
   {
     label: "High",
     value: "high",
-    icon: ArrowUpToLine,
+    icon: ArrowUpIcon,
   },
 ]

package/templates/next/src/app/examples/tasks/data/tasks.json

@@ -699,4 +699,4 @@
     "label": "bug",
     "priority": "low"
   }
-]
+]

package/templates/next/src/app/examples/tasks/page.tsx

@@ -29,19 +29,21 @@ export default async function TaskPage() {
   const tasks = await getTasks()
 
   return (
-    <div className=" flex-1 flex-col space-y-8 p-8 ">
-      <div className="flex items-center justify-between space-y-2">
-        <div>
-          <h2 className="text-2xl font-bold tracking-tight">Welcome back!</h2>
-          <p className="text-muted-foreground">
-            Here&apos;s a list of your tasks for this month!
-          </p>
-        </div>
-        <div className="flex items-center space-x-2">
-          <UserNav />
+    <>
+      <div className="flex-1 flex-col space-y-8 p-8 md:flex">
+        <div className="flex items-center justify-between space-y-2">
+          <div>
+            <h2 className="text-2xl font-bold tracking-tight">Welcome back!</h2>
+            <p className="text-muted-foreground">
+              Here&apos;s a list of your tasks for this month!
+            </p>
+          </div>
+          <div className="flex items-center space-x-2">
+            <UserNav />
+          </div>
         </div>
+        <DataTable data={tasks} columns={columns} />
       </div>
-      <DataTable data={tasks} columns={columns} />
-    </div>
+    </>
   )
 }

package/templates/next/src/app/layout.tsx

@@ -1,43 +1,47 @@
-import "@/styles/globals.css"
-import { Metadata } from "next"
-
-import { fontMono, fontSans } from "@/lib/fonts"
-import { cn } from "@/lib/utils"
-import { Greeting } from "@/components/greeting"
-import { Menu } from "@/components/menu"
-import { StyleSwitcher } from "@/components/style-switcher"
-import { TailwindIndicator } from "@/components/tailwind-indicator"
-import { ThemeProvider } from "@/components/theme-provider"
-
-export default function MyApp({ children }) {
-  return (
-    <html lang="en" suppressHydrationWarning className="overflow-clip bg-black">
-      <head />
-      <body className="overflow-clip bg-transparent font-sans antialiased scrollbar-none">
-        <Greeting />
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <div className="h-screen overflow-clip">
-            <Menu />
-            <div
-              className={cn(
-                "h-screen overflow-auto border-t bg-background pb-8",
-                // "scrollbar-none"
-                "scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-md"
-              )}
-            >
-              {children}
-            </div>
-          </div>
-          <TailwindIndicator />
-        </ThemeProvider>
-        <StyleSwitcher />
-      </body>
-    </html>
-  )
-}
-
-export const metadata: Metadata = {
-  icons: {
-    shortcut: ["#"],
-  },
-}
+import "@/styles/globals.css"
+import { Metadata } from "next"
+
+import { fontMono, fontSans } from "@/lib/fonts"
+import { cn } from "@/lib/utils"
+import { Greeting } from "@/components/greeting"
+import { Menu } from "@/components/menu"
+import { StyleSwitcher } from "@/components/style-switcher"
+import { TailwindIndicator } from "@/components/tailwind-indicator"
+import { ThemeProvider } from "@/components/theme-provider"
+
+interface ExamplesLayoutProps {
+  children: React.ReactNode
+}
+
+export default function MyApp({ children }: ExamplesLayoutProps) {
+  return (
+    <html lang="en" suppressHydrationWarning className="overflow-clip bg-black">
+      <head />
+      <body className="overflow-clip bg-transparent font-sans antialiased scrollbar-none">
+        <Greeting />
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          <div className="h-screen overflow-clip">
+            <Menu />
+            <div
+              className={cn(
+                "h-screen overflow-auto border-t bg-background pb-8",
+                // "scrollbar-none"
+                "scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-md"
+              )}
+            >
+              {children}
+            </div>
+          </div>
+          <TailwindIndicator />
+        </ThemeProvider>
+        <StyleSwitcher />
+      </body>
+    </html>
+  )
+}
+
+export const metadata: Metadata = {
+  icons: {
+    shortcut: ["#"],
+  },
+}

package/templates/next/src/app/page.tsx

@@ -1,5 +1,5 @@
-import MusicPage from "./examples/music/page"
-
-export default function App() {
-  return <MusicPage />
-}
+import MusicPage from "./examples/music/page"
+
+export default function App() {
+  return <MusicPage />
+}

package/templates/next/src/components/{examples/date-picker/with-range.tsx → example/date-picker-with-range.tsx}

@@ -14,7 +14,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
-export function DatePickerWithRange({
+export default function DatePickerWithRange({
   className,
 }: React.HTMLAttributes<HTMLDivElement>) {
   const [date, setDate] = React.useState<DateRange | undefined>({

package/templates/next/src/components/examples-nav.tsx

@@ -1,70 +1,70 @@
-"use client"
-
-import { usePathname } from "next/navigation"
-
-import {
-  MenubarContent,
-  MenubarMenu,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarTrigger,
-} from "@/components/ui/menubar"
-
-const examples = [
-  {
-    name: "Dashboard",
-    href: "/examples/dashboard",
-  },
-  {
-    name: "Cards",
-    href: "/examples/cards",
-  },
-  {
-    name: "Tasks",
-    href: "/examples/tasks",
-  },
-  {
-    name: "Playground",
-    href: "/examples/playground",
-  },
-  {
-    name: "Forms",
-    href: "/examples/forms",
-  },
-  {
-    name: "Music",
-    href: "/examples/music",
-  },
-  {
-    name: "Authentication",
-    href: "/examples/authentication",
-  },
-]
-
-interface ExamplesNavProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
-  const pathname = usePathname() === "/" ? "/examples/music" : usePathname()
-
-  return (
-    <MenubarMenu>
-      <MenubarTrigger>
-        <span className="rounded-md bg-cyan-500 px-1.5 py-0.5 text-xs font-medium leading-none text-[#000000] no-underline group-hover:no-underline">
-          nav
-        </span>
-        {pathname}
-      </MenubarTrigger>
-      <MenubarContent forceMount>
-        <MenubarRadioGroup value={pathname}>
-          {examples.map((example) => (
-            <a href={example.href} key={example.name}>
-              <MenubarRadioItem value={example.href}>
-                {example.name}
-              </MenubarRadioItem>
-            </a>
-          ))}
-        </MenubarRadioGroup>
-      </MenubarContent>
-    </MenubarMenu>
-  )
-}
+"use client"
+
+import { usePathname } from "next/navigation"
+
+import {
+  MenubarContent,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+
+const examples = [
+  {
+    name: "Dashboard",
+    href: "/examples/dashboard",
+  },
+  {
+    name: "Cards",
+    href: "/examples/cards",
+  },
+  {
+    name: "Tasks",
+    href: "/examples/tasks",
+  },
+  {
+    name: "Playground",
+    href: "/examples/playground",
+  },
+  {
+    name: "Forms",
+    href: "/examples/forms",
+  },
+  {
+    name: "Music",
+    href: "/examples/music",
+  },
+  {
+    name: "Authentication",
+    href: "/examples/authentication",
+  },
+]
+
+interface ExamplesNavProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
+  const pathname = usePathname() === "/" ? "/examples/music" : usePathname()
+
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>
+        <span className="rounded-md bg-cyan-500 px-1.5 py-0.5 text-xs font-medium leading-none text-[#000000] no-underline group-hover:no-underline">
+          nav
+        </span>
+        {pathname}
+      </MenubarTrigger>
+      <MenubarContent forceMount>
+        <MenubarRadioGroup value={pathname}>
+          {examples.map((example) => (
+            <a href={example.href} key={example.name}>
+              <MenubarRadioItem value={example.href}>
+                {example.name}
+              </MenubarRadioItem>
+            </a>
+          ))}
+        </MenubarRadioGroup>
+      </MenubarContent>
+    </MenubarMenu>
+  )
+}

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

@@ -1,21 +1,21 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { invoke } from "@tauri-apps/api/tauri"
-
-export function Greeting() {
-  const [greetMsg, setGreetMsg] = useState("")
-  const [name, setName] = useState("")
-
-  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-  async function greet() {
-    setGreetMsg(await invoke("greet", { name }))
-  }
-
-  // inspect console: Hello, World! You've been greeted from Rust!
-  useEffect(() => {
-    invoke("greet", { name: "World" }).then(console.log).catch(console.error)
-  })
-
-  return <></>
-}
+"use client"
+
+import { useEffect, useState } from "react"
+import { invoke } from "@tauri-apps/api/tauri"
+
+export function Greeting() {
+  const [greetMsg, setGreetMsg] = useState("")
+  const [name, setName] = useState("")
+
+  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+  async function greet() {
+    setGreetMsg(await invoke("greet", { name }))
+  }
+
+  // inspect console: Hello, World! You've been greeted from Rust!
+  useEffect(() => {
+    invoke("greet", { name: "World" }).then(console.log).catch(console.error)
+  })
+
+  return <></>
+}