// demo.tsx
import * as React from "react";
import FollowerMilestone, { type PhotoType } from "@/components/ui/follower-counter";
import { RotateCcw } from "lucide-react";
const FollowerMilestoneDemo = () => {
const PHOTOS: PhotoType[] = [
{
title: "Photo-1",
src: "https://cdn.21st.dev/assets/mirror/81/8127305bb71e97dd77be10b37f2bc655ee403dcfc2bc249c9bd3d558170a4a79.jpg",
},
{
title: "Photo-2",
src: "https://cdn.21st.dev/assets/mirror/1c/1ce9b09e72b4353300778ac7d516465c76830a8d2e8381e4eadc165d389a73fb.jpg",
},
{
title: "Photo-3",
src: "https://cdn.21st.dev/assets/mirror/5f/5f8d7c2a107f9c6e2cad9e695142a3040346edb7018941c19342f979f9dc7e8f.jpg",
},
{
title: "Photo-4",
src: "https://cdn.21st.dev/assets/mirror/c3/c37fc08275e0109c680e8f9e5200ad4c50d225399e146c3fc73bb70f8a4d35c2.jpg",
},
{
title: "Photo-5",
src: "https://cdn.21st.dev/assets/mirror/8f/8ff93999d28e249a332085e63bf49f80212523e7f7a424ba2a84c705cf210763.jpg",
},
{
title: "Photo-6",
src: "https://cdn.21st.dev/assets/mirror/dc/dc4ac0f8a35fe45760d4c7c18867ab7e96f8f53e038206c6b13e21d1e8f584d3.jpg",
},
{
title: "Photo-7",
src: "https://cdn.21st.dev/assets/mirror/0f/0f96f37d18cb143a1dee90fe80198df61c877f095d09fe2cabcc2c71ee4b7ea0.jpg",
},
{
title: "Photo-8",
src: "https://cdn.21st.dev/assets/mirror/9e/9e49f3ca8f7366611522a575455e42cb83473957ae28b3ac101a29f56f909929.jpg",
},
];
const [key, setKey] = React.useState(0);
const handleReload = () => setKey((prev) => prev + 1);
return (
<div className="relative flex min-h-[700px] w-full items-center justify-center overflow-hidden bg-white px-4 py-10 dark:bg-white md:min-h-[500px]">
<FollowerMilestone
key={key}
targetCount={5000}
photos={PHOTOS}
headerText="Thanks for"
footerText="Followers !"
/>
<button
onClick={handleReload}
className="absolute bottom-4 right-4 rounded-full bg-zinc-900 p-3 text-white shadow-md transition-transform duration-300 active:scale-90 dark:bg-zinc-900"
>
<RotateCcw />
</button>
</div>
);
};
export { FollowerMilestoneDemo as DemoOne };Part of lndev-ui — browse the full library on 21st.dev.