Components
Loading preview...
Here is follower counter card
npx shadcn@latest add https://21st.dev/r/ln-dev7/follower-counter// 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://images.unsplash.com/photo-1517849845537-4d257902454a?w=500&h=500&fit=crop&q=80",
},
{
title: "Photo-2",
src: "https://images.unsplash.com/photo-1548142813-c348350df52b?w=500&h=500&fit=crop&q=80",
},
{
title: "Photo-3",
src: "https://images.unsplash.com/photo-1589156280159-27698a70f29e?w=500&h=500&fit=crop&q=80",
},
{
title: "Photo-4",
src: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=500&h=500&fit=crop&q=80",
},
{
title: "Photo-5",
src: "https://images.unsplash.com/photo-1511367461989-f85a21fda167?q=80&w=2662&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "Photo-6",
src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=500&h=500&fit=crop&q=80",
},
{
title: "Photo-7",
src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=500&h=500&fit=crop&q=80",
},
{
title: "Photo-8",
src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=500&h=500&fit=crop&q=80",
},
];
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 };