43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import type { SubscriptionInfo } from "@/client/model";
|
|
|
|
interface FollowerCardListProps {
|
|
users: SubscriptionInfo[];
|
|
}
|
|
|
|
export function FollowerCardList({ users }: FollowerCardListProps) {
|
|
if (users.length === 0) {
|
|
return (
|
|
<div className="text-center py-12" style={{ color: "var(--text-muted)" }}>
|
|
<p>No followers yet</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{users.map((user) => (
|
|
<div
|
|
key={user.user_uid}
|
|
className="flex items-center gap-3 p-4 rounded-lg border transition-colors"
|
|
style={{ backgroundColor: "var(--surface-elevated)", borderColor: "var(--border-default)" }}
|
|
>
|
|
<Avatar className="w-12 h-12 rounded-lg">
|
|
<AvatarFallback className="rounded-lg" style={{ backgroundColor: "var(--accent)", color: "var(--accent-fg)" }}>
|
|
U
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-semibold truncate" style={{ color: "var(--text-primary)" }}>
|
|
{user.user_uid.slice(0, 8)}...
|
|
</p>
|
|
<p className="text-xs truncate" style={{ color: "var(--text-muted)" }}>
|
|
{new Date(user.subscribed_at).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |