Dock Nav Demo

1"use client";
2 
3import {
4  DockNav,
5  type DockNavItem,
6} from "@/components/sora-ui/effects/dock-nav";
7 
8const DEFAULT_DOCK_ITEMS: DockNavItem[] = [
9  {
10    label: "Notion",
11    iconSrc:
12      "https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be92ee5ddf0080fb90_notion.png",
13    alt: "Notion app icon",
14  },
15  {
16    label: "Asana",
17    iconSrc:
18      "https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bef9d004f8a9cf3b29_asana.png",
19    alt: "Asana app icon",
20  },
21  {
22    label: "Slack",
23    iconSrc:
24      "https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be8c099d4e1ed55770_slack.png",
25    alt: "Slack app icon",
26  },
27  {
28    label: "Loom",
29    iconSrc:
30      "https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be5b31ba243e4da377_loom.png",
31    alt: "Loom app icon",
32  },
33  {
34    label: "Spotify",
35    iconSrc:
36      "https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bea97e140677496dae_spotify.png",
37    alt: "Spotify app icon",
38  },
39  {
40    label: "Webflow",
41    iconSrc:
42      "https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6bea73fcc6ee568f6f0_webflow.png",
43    alt: "Webflow app icon",
44  },
45  {
46    label: "Figma",
47    iconSrc:
48      "https://cdn.prod.website-files.com/6728a3e6f4f4161c235bc519/6728a6be1de916069b5e1aaa_figma.png",
49    alt: "Figma app icon",
50  },
51];
52 
53export function DockNavExample() {
54  return (
55    <div className="flex min-h-48 w-full items-end justify-center px-4 pb-6">
56      <DockNav className="w-full max-w-4xl" items={DEFAULT_DOCK_ITEMS} />
57    </div>
58  );
59}