ContactList.tsx

import * as React from "react"
import { Stack, addPropertyControls, ControlType } from "framer"
import { ContactItem } from "./canvas"

type Props = {
    count: number
}

export function ContactList({ count = 5 }: Props) {
    const [users, setUsers] = React.useState([])
    React.useEffect(() => {
        fetch(`https://randomuser.me/api/?results=${count}`).then(response => {
            response.json().then(json => {
                setUsers(json.results)
            })
        })
    }, [count])

    return (
        <Stack gap={0} alignment="start">
            {users.map(user => (
                <ContactItem
                    key={user.name.last}
                    name={`${user.name.first} ${user.name.last}`}
                    email={user.email}
                    avatar={user.picture.medium}
                />
            ))}
        </Stack>
    )
}

addPropertyControls(ContactList, {
    count: {
        type: ControlType.Number,
        title: "count",
        defaultValue: 5,
    },
})