Group List Card

import { GroupListCard, GroupType } from "@/components/ui/group-list-card";

const GROUPS: {
  name: string;
  type: GroupType;
  memberCount: number;
  isPrivate?: boolean;
  allowedUser?: boolean;
}[] = [
  {
    name: "React Developers Hub",
    type: "react",
    memberCount: 342,
  },
  {
    name: "Next.js Builders",
    type: "nextJS",
    memberCount: 189,
    isPrivate: true,
  },
  {
    name: "Full-Stack Engineers",
    type: "fullstack",
    memberCount: 512,
    allowedUser: true,
  },
];

export default function DemoOne() {
  return (
    <div className="space-y-4 p-4 border border-dashed rounded-md">
      {/* Heading */}
      <div>
        <h2 className="text-sm font-bold uppercase tracking-widest text-muted-foreground">
          Groups
        </h2>
        <p className="text-xs text-muted-foreground">
          Explore and join developer communities
        </p>
      </div>

      {/* Group Cards */}
      <div className="space-y-3">
        {GROUPS.map((group, index) => (
          <GroupListCard
            key={index}
            name={group.name}
            type={group.type}
            memberCount={group.memberCount}
            isPrivate={group.isPrivate}
            allowedUser={group.allowedUser}
          />
        ))}
      </div>
    </div>
  );
}