import EmogiNav from "@/components/ui/emoji-nav";
// get animated emogies from: https://googlefonts.github.io/noto-emoji-animation/
const navItems = [
{
label: "Home",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/8b/8b891ba60e3d7cd9c508368094dbc2c8a8cb631190116b555e675c46ab255154.gif",
alt: "😍",
},
{
label: "About",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/05/05eda22abc8a00179616cdec8f330abfc4435899cf9fee01654605b1400841a1.gif",
alt: "😄",
},
{
label: "Work",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/83/83a4914484a3dcb34b2811a40545a7d3e34941eb74838cadf538c82213e665e4.gif",
alt: "😘",
},
{
label: "Services",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/dc/dc9f8b8adf91f7f2d8316806b433ece9499369444fb97078c2a349bbb6a42cf2.gif",
alt: "🤑",
},
{
label: "Our Team",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/ed/ed5fe5ed4b9f79aa558c263a83d00986e8dced828b244a3265f4ab684425a777.gif",
alt: "🥳",
},
{
label: "Contact",
href: "#",
emogi: "https://cdn.21st.dev/assets/mirror/8d/8d7352283c1a945867f3a56770f8de3eed8042915302a3e741b747ebe0ab2d82.gif",
alt: "👻",
},
];
const EmogiNavigation: React.FC = () => {
return (
<div>
<EmogiNav navItems={navItems} />
<div className="preview flex min-h-[100px] w-full justify-center p-2 sm:p-10 items-center">
<div className="relative w-full flex items-center justify-center">
<p className="text-black dark:text-white">
The Navbar will show on top of the page
</p>
</div>
</div>
</div>
);
};
export default EmogiNavigation;Part of Kaif UI — browse the full library on 21st.dev.