"use client"
import { useEffect, useState } from "react"
import {
BlocksIcon,
CircleIcon,
HexagonIcon,
OctagonIcon,
PentagonIcon,
SquareIcon,
TriangleIcon,
} from "lucide-react"
import {
Dock,
DockCard,
DockCardInner,
DockDivider,
} from "@/components/ui/dock"
function useIsMobile() {
const [isMobile, setIsMobile] = useState(false)
useEffect(() => {
const userAgent = navigator.userAgent
const isSmall = window.matchMedia("(max-width: 768px)").matches
const isMobileUserAgent = Boolean(
/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.exec(
userAgent
)
)
const isDev = process.env.NODE_ENV !== "production"
if (isDev) {
setIsMobile(isSmall || isMobileUserAgent)
} else {
setIsMobile(isSmall && isMobileUserAgent)
}
}, [])
return isMobile
}
const gradients = [
"https://cdn.21st.dev/assets/mirror/b4/b4eae7779902654cf559d16d7e6e701fcf52c35cddc7f5c4a97e61e20fa7956e.jpg",
"https://cdn.21st.dev/assets/mirror/95/951d0d27c951332b4d54d01798e023e662ac1961ff9f7cf8f1fb38daff726abb.jpg",
"https://cdn.21st.dev/assets/mirror/8f/8fb4f63b47b3ec4a154b86ac33d13e86e6aab6a07464a1aada2235a4173700d4.jpg",
"https://cdn.21st.dev/assets/mirror/cf/cfb6ea812402818fafc7efbdb0ba88ff2db16463dc890fd9b312523bbdcfde99.jpg",
"https://cdn.21st.dev/assets/mirror/a8/a821eba68bc26d00cb18a8351d43f48808f41c81c72fce1daebf05566c50562f.jpg",
"https://cdn.21st.dev/assets/mirror/1e/1ec396cbf431a1aa66952975fde16613752f1f664bcda56261afc0956ef0cf71.jpg",
null,
"https://cdn.21st.dev/assets/mirror/02/02a204486bed734d6744f0d71c2eb8105ec66836590c4c4aebc7f710d435e999.jpg",
]
const DockAnimationDemo = () => {
const openIcons = [
<CircleIcon key="circle" className="h-8 w-8 fill-black stroke-black rounded-full" />,
<TriangleIcon key="triangle" className="h-8 w-8 fill-black stroke-black rounded-full" />,
<SquareIcon key="square" className="h-8 w-8 fill-black stroke-black rounded-full" />,
<PentagonIcon key="pentagon" className="h-8 w-8 fill-black stroke-black rounded-full" />,
<HexagonIcon key="hexagon" className="h-8 w-8 fill-black stroke-black rounded-full" />,
<OctagonIcon key="octagon" className="h-8 w-8 fill-black stroke-black rounded-full" />,
null,
<BlocksIcon key="blocks" className="h-8 w-8 fill-black stroke-black rounded-full" />,
]
const isMobile = useIsMobile()
const responsiveOpenIcons = isMobile
? openIcons.slice(3)
: openIcons
const responsiveGradients = isMobile
? gradients.slice(3)
: gradients
return (
<div className="flex items-center justify-center">
<Dock>
{responsiveGradients.map((src, index) =>
src ? (
<DockCard key={src || `divider-${index}`} id={`${index}`}>
<DockCardInner src={src} id={`${index}`}>
{responsiveOpenIcons[index]}
</DockCardInner>
</DockCard>
) : (
<DockDivider key={`divider-${index}`} />
)
)}
</Dock>
</div>
)
}
export default DockAnimationDemoPart of cult ui — browse the full library on 21st.dev.