compoder

Here's a React component for a user profile card that includes dynamic data fetching and responsive design:

```jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Card, Avatar, Typography, Divider } from 'antd';

const { Meta } = Card;
const { Text } = Typography;

const UserProfileCard = ({ userId }) => {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await axios.get(`/api/users/${userId}`);
        setUserData(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching user data:', error);
        setLoading(false);
      }
    };
    fetchUserData();
  }, [userId]);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <Card
      style={{ width: 300 }}
      cover={
        <img
          alt="example"
          src={userData?.profileImage}
        />
      }
    >
      <Meta
        avatar={<Avatar src={userData?.avatar} />}
        title={userData?.name}
        description={
          <div>
            <Text strong>Email:</Text> {userData?.email}
            <Divider type="horizontal" />
            <Text strong>Bio:</Text> {userData?.bio}
          </div>
        }
      />
    </Card>
  );
};

export default UserProfileCard;
```

This component fetches user data from an API endpoint based on the provided userId prop. It displays the user's profile image, name, email, and bio in a responsive card layout using Ant Design components. The component handles loading states and error cases gracefully.