SonaUI

beta

Github

Github

Preview

Notion
After Effects
Figma
Slack
Spotify
VS Code
Photoshop
Obsidian
Discord
Davinci Resolve

Source Code

1import React from "react";
2import { AnimatedDock, AnimatedDockItem } from "./AnimatedDock";
3
4const animatedDockData = [
5  {
6    tag: "Notion",
7    icon: "/animated-dock/notion-icon.png",
8  },
9  {
10    tag: "After Effects",
11    icon: "/animated-dock/ae-icon.png",
12  },
13  {
14    tag: "Figma",
15    icon: "/animated-dock/figma-icon.png",
16  },
17  {
18    tag: "Slack",
19    icon: "/animated-dock/slack-icon.png",
20  },
21  {
22    tag: "Spotify",
23    icon: "/animated-dock/spotify-icon.png",
24  },
25  {
26    tag: "VS Code",
27    icon: "/animated-dock/vscode-icon.png",
28  },
29  {
30    tag: "Photoshop",
31    icon: "/animated-dock/ps-icon.png",
32  },
33  {
34    tag: "Obsidian",
35    icon: "/animated-dock/obsidian-icon.png",
36  },
37  {
38    tag: "Discord",
39    icon: "/animated-dock/discord-icon.png",
40  },
41  {
42    tag: "Davinci Resolve",
43    icon: "/animated-dock/dr-icon.png",
44  },
45];
46
47const Page = () => {
48
49  return (
50    <>
51        <AnimatedDock>
52          {animatedDockData.map((item, index) => (
53            <AnimatedDockItem key={index} icon={item.icon} tag={item.tag} />
54          ))}
55        </AnimatedDock>
56    </>
57  );
58};
59
60export default Page;