Components
Loading preview...
Community Hub Card This card provides a centralized view of a community's key information, including member stats, an invite system, book progress, and an upcoming reading list.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/community-hub-cardimport { CommunityHubCard } from '@/components/ui/community-hub-card';
// Mock data to populate the component
const communityData = {
title: 'Readers Unite',
subtitle: 'Your gateway to literary adventures',
memberCount: 1234,
members: [
{ src: 'https://i.pravatar.cc/150?img=1', alt: 'Member 1', fallback: 'M1' },
{ src: 'https://i.pravatar.cc/150?img=2', alt: 'Member 2', fallback: 'M2' },
{ src: 'https://i.pravatar.cc/150?img=3', alt: 'Member 3', fallback: 'M3' },
{ src: 'https://i.pravatar.cc/150?img=4', alt: 'Member 4', fallback: 'M4' },
],
inviteLink: 'https://readersunite.com/invite/Bk7LA3G',
currentBook: {
title: 'The Great Gatsby',
progress: 65,
},
upcomingBooks: [
{ title: 'To Kill a Mockingbird', author: 'Harper Lee' },
{ title: '1984', author: 'George Orwell' },
{ title: 'Pride and Prejudice', author: 'Jane Austen' },
],
};
/**
* A demo page to showcase the CommunityHubCard component.
* It passes mock data to the component to render a realistic preview.
*/
export default function CommunityHubCardDemo() {
return (
<div className="flex items-center justify-center bg-background p-4 md:p-8 min-h-screen">
<CommunityHubCard
title={communityData.title}
subtitle={communityData.subtitle}
memberCount={communityData.memberCount}
members={communityData.members}
inviteLink={communityData.inviteLink}
currentBook={communityData.currentBook}
upcomingBooks={communityData.upcomingBooks}
/>
</div>
);
}