create-tauri-ui 0.1.0

package/templates/next/src/app/examples/music/components/menu.tsx

@@ -0,0 +1,178 @@
+import { Globe, Mic } from "lucide-react"
+
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@/components/ui/menubar"
+
+export function Menu() {
+  return (
+    <Menubar className="rounded-none border-b border-none px-2 lg:px-4">
+      <MenubarMenu>
+        <MenubarTrigger className="font-bold">Music</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>About Music</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Preferences... <MenubarShortcut>⌘,</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Hide Music... <MenubarShortcut>⌘H</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut>
+          </MenubarItem>
+          <MenubarShortcut />
+          <MenubarItem>
+            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>
+    </Menubar>
+  )
+}

package/templates/next/src/app/examples/music/components/podcast-empty-placeholder.tsx

@@ -0,0 +1,53 @@
+import { Plus, Podcast } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export function PodcastEmptyPlaceholder() {
+  return (
+    <div className="flex h-[450px] shrink-0 items-center justify-center rounded-md border border-dashed">
+      <div className="mx-auto flex max-w-[420px] flex-col items-center justify-center text-center">
+        <Podcast className="h-10 w-10 text-muted-foreground" />
+        <h3 className="mt-4 text-lg font-semibold">No episodes added</h3>
+        <p className="mb-4 mt-2 text-sm text-muted-foreground">
+          You have not added any podcasts. Add one below.
+        </p>
+        <Dialog>
+          <DialogTrigger>
+            <Button size="sm" className="relative">
+              <Plus className="mr-2 h-4 w-4" />
+              Add Podcast
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Add Podcast</DialogTitle>
+              <DialogDescription>
+                Copy and paste the podcast feed URL to import.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="url">Podcast URL</Label>
+                <Input id="url" placeholder="https://example.com/feed.xml" />
+              </div>
+            </div>
+            <DialogFooter>
+              <Button>Import Podcast</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  )
+}

package/templates/next/src/app/examples/music/components/sidebar.tsx

@@ -0,0 +1,100 @@
+import {
+  LayoutGrid,
+  Library,
+  ListMusic,
+  Mic2,
+  Music,
+  Music2,
+  PlayCircle,
+  Radio,
+  User,
+} from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+import { Playlist } from "../data/playlists"
+
+interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  playlists: Playlist[]
+}
+
+export function Sidebar({ className, playlists }: SidebarProps) {
+  return (
+    <div className={cn("h-screen pb-12", className)}>
+      <div className="space-y-4 py-4">
+        <div className="px-4 py-2">
+          <h2 className="mb-2 px-2 text-lg font-semibold tracking-tight">
+            Discover
+          </h2>
+          <div className="space-y-1">
+            <Button
+              variant="secondary"
+              size="sm"
+              className="w-full justify-start"
+            >
+              <PlayCircle className="mr-2 h-4 w-4" />
+              Listen Now
+            </Button>
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <LayoutGrid className="mr-2 h-4 w-4" />
+              Browse
+            </Button>
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <Radio className="mr-2 h-4 w-4" />
+              Radio
+            </Button>
+          </div>
+        </div>
+        <div className="px-4 py-2">
+          <h2 className="mb-2 px-2 text-lg font-semibold tracking-tight">
+            Library
+          </h2>
+          <div className="space-y-1">
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <ListMusic className="mr-2 h-4 w-4" />
+              Playlists
+            </Button>
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <Music2 className="mr-2 h-4 w-4" />
+              Songs
+            </Button>
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <User className="mr-2 h-4 w-4" />
+              Made for You
+            </Button>
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <Mic2 className="mr-2 h-4 w-4" />
+              Artists
+            </Button>
+            <Button variant="ghost" size="sm" className="w-full justify-start">
+              <Library className="mr-2 h-4 w-4" />
+              Albums
+            </Button>
+          </div>
+        </div>
+        <div className="py-2">
+          <h2 className="relative px-6 text-lg font-semibold tracking-tight">
+            Playlists
+          </h2>
+          <ScrollArea className="h-[300px] px-2">
+            <div className="space-y-1 p-2">
+              {playlists?.map((playlist) => (
+                <Button
+                  key={playlist}
+                  variant="ghost"
+                  size="sm"
+                  className="w-full justify-start font-normal"
+                >
+                  <ListMusic className="mr-2 h-4 w-4" />
+                  {playlist}
+                </Button>
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/next/src/app/examples/music/data/albums.ts

@@ -0,0 +1,71 @@
+export interface Album {
+  name: string
+  artist: string
+  cover: string
+}
+
+export const listenNowAlbums: Album[] = [
+  {
+    name: "React Rendezvous",
+    artist: "Ethan Byte",
+    cover:
+      "https://images.unsplash.com/photo-1611348586804-61bf6c080437?w=300&dpr=2&q=80",
+  },
+  {
+    name: "Async Awakenings",
+    artist: "Nina Netcode",
+    cover:
+      "https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80",
+  },
+  {
+    name: "The Art of Reusability",
+    artist: "Lena Logic",
+    cover:
+      "https://images.unsplash.com/photo-1528143358888-6d3c7f67bd5d?w=300&dpr=2&q=80",
+  },
+  {
+    name: "Stateful Symphony",
+    artist: "Beth Binary",
+    cover:
+      "https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80",
+  },
+]
+
+export const madeForYouAlbums: Album[] = [
+  {
+    name: "Thinking Components",
+    artist: "Lena Logic",
+    cover:
+      "https://images.unsplash.com/photo-1615247001958-f4bc92fa6a4a?w=300&dpr=2&q=80",
+  },
+  {
+    name: "Functional Fury",
+    artist: "Beth Binary",
+    cover:
+      "https://images.unsplash.com/photo-1513745405825-efaf9a49315f?w=300&dpr=2&q=80",
+  },
+  {
+    name: "React Rendezvous",
+    artist: "Ethan Byte",
+    cover:
+      "https://images.unsplash.com/photo-1614113489855-66422ad300a4?w=300&dpr=2&q=80",
+  },
+  {
+    name: "Stateful Symphony",
+    artist: "Beth Binary",
+    cover:
+      "https://images.unsplash.com/photo-1446185250204-f94591f7d702?w=300&dpr=2&q=80",
+  },
+  {
+    name: "Async Awakenings",
+    artist: "Nina Netcode",
+    cover:
+      "https://images.unsplash.com/photo-1468817814611-b7edf94b5d60?w=300&dpr=2&q=80",
+  },
+  {
+    name: "The Art of Reusability",
+    artist: "Lena Logic",
+    cover:
+      "https://images.unsplash.com/photo-1490300472339-79e4adc6be4a?w=300&dpr=2&q=80",
+  },
+]

package/templates/next/src/app/examples/music/data/playlists.ts

@@ -0,0 +1,16 @@
+export type Playlist = (typeof playlists)[number]
+
+export const playlists = [
+  "Recently Added",
+  "Recently Played",
+  "Top Songs",
+  "Top Albums",
+  "Top Artists",
+  "Logic Discography",
+  "Bedtime Beats",
+  "Feeling Happy",
+  "I miss Y2K Pop",
+  "Runtober",
+  "Mellow Days",
+  "Eminem Essentials",
+]

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

@@ -0,0 +1,134 @@
+import { Metadata } from "next"
+
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+import { AlbumArtwork } from "./components/album-artwork"
+import { Menu } from "./components/menu"
+import { PodcastEmptyPlaceholder } from "./components/podcast-empty-placeholder"
+import { Sidebar } from "./components/sidebar"
+import { listenNowAlbums, madeForYouAlbums } from "./data/albums"
+import { playlists } from "./data/playlists"
+import "./styles.css"
+import Image from "next/image"
+import { PlusCircle } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+
+export const metadata: Metadata = {
+  title: "Music App",
+  description: "Example music app using the components.",
+}
+
+export default function MusicPage() {
+  return (
+    <div>
+      {/* <Menu /> */}
+      <div className="bg-background">
+        <div className="grid lg:grid-cols-5">
+          <Sidebar playlists={playlists} className="hidden lg:block" />
+          <div className="col-span-3 lg:col-span-4 lg:border-l">
+            <div className="h-full px-4 py-6 lg:px-8">
+              <Tabs defaultValue="music" className="h-full space-y-6">
+                <div className="space-between flex items-center">
+                  <TabsList>
+                    <TabsTrigger value="music" className="relative">
+                      Music
+                    </TabsTrigger>
+                    <TabsTrigger value="podcasts">Podcasts</TabsTrigger>
+                    <TabsTrigger value="live" disabled>
+                      Live
+                    </TabsTrigger>
+                  </TabsList>
+                  <div className="ml-auto mr-4">
+                    <Button>
+                      <PlusCircle className="mr-2 h-4 w-4" />
+                      Add music
+                    </Button>
+                  </div>
+                </div>
+                <TabsContent
+                  value="music"
+                  className="border-none p-0 outline-none"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                      <h2 className="text-2xl font-semibold tracking-tight">
+                        Listen Now
+                      </h2>
+                      <p className="text-sm text-muted-foreground">
+                        Top picks for you. Updated daily.
+                      </p>
+                    </div>
+                  </div>
+                  <Separator className="my-4" />
+                  <div className="relative">
+                    <ScrollArea>
+                      <div className="flex space-x-4 pb-4">
+                        {listenNowAlbums.map((album) => (
+                          <AlbumArtwork
+                            key={album.name}
+                            album={album}
+                            className="w-[250px]"
+                            aspectRatio="portrait"
+                            width={250}
+                            height={330}
+                          />
+                        ))}
+                      </div>
+                      <ScrollBar orientation="horizontal" />
+                    </ScrollArea>
+                  </div>
+                  <div className="mt-6 space-y-1">
+                    <h2 className="text-2xl font-semibold tracking-tight">
+                      Made for You
+                    </h2>
+                    <p className="text-sm text-muted-foreground">
+                      Your personal playlists. Updated daily.
+                    </p>
+                  </div>
+                  <Separator className="my-4" />
+                  <div className="relative">
+                    <ScrollArea>
+                      <div className="flex space-x-4 pb-4">
+                        {madeForYouAlbums.map((album) => (
+                          <AlbumArtwork
+                            key={album.name}
+                            album={album}
+                            className="w-[150px]"
+                            aspectRatio="square"
+                            width={150}
+                            height={150}
+                          />
+                        ))}
+                      </div>
+                      <ScrollBar orientation="horizontal" />
+                    </ScrollArea>
+                  </div>
+                </TabsContent>
+                <TabsContent
+                  value="podcasts"
+                  className="h-full flex-col border-none p-0 data-[state=active]:flex"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-1">
+                      <h2 className="text-2xl font-semibold tracking-tight">
+                        New Episodes
+                      </h2>
+                      <p className="text-sm text-muted-foreground">
+                        Your favorite podcasts. Updated daily.
+                      </p>
+                    </div>
+                  </div>
+                  <Separator className="my-4" />
+                  <PodcastEmptyPlaceholder />
+                </TabsContent>
+              </Tabs>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/next/src/app/examples/music/styles.css

@@ -0,0 +1,65 @@
+[data-section="music"] {
+  --background: 0 0% 100%;
+  --foreground: 222.2 47.4% 11.2%;
+
+  --muted: 243 5% 96%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 47.4% 11.2%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 47.4% 11.2%;
+
+  --primary: 349 89% 60%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 243 11% 4%;
+  --secondary-foreground: 0 0% 98%;
+
+  --accent: 243 11% 4%;
+  --accent-foreground: 0 0% 100%;
+
+  --destructive: 0 100% 50%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 349 89% 60%;
+
+  --radius: 0.5rem;
+}
+
+.dark [data-section="music"] {
+  --background: 224 71% 4%;
+  --foreground: 213 31% 91%;
+
+  --muted: 223 47% 11%;
+  --muted-foreground: 215.4 16.3% 56.9%;
+
+  --accent: 216 34% 17%;
+  --accent-foreground: 210 40% 98%;
+
+  --popover: 224 71% 4%;
+  --popover-foreground: 215 20.2% 65.1%;
+
+  --border: 216 34% 17%;
+  --input: 216 34% 17%;
+
+  --card: 224 71% 4%;
+  --card-foreground: 213 31% 91%;
+
+  --primary: 349 89% 60%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 222.2 47.4% 11.2%;
+  --secondary-foreground: 210 40% 98%;
+
+  --destructive: 0 63% 31%;
+  --destructive-foreground: 210 40% 98%;
+
+  --ring: 216 34% 17%;
+
+  --radius: 0.5rem;
+}