User Profile Card

Build a TypeScript React component that displays user profile information with multiple elements.

Requirements

Create a component that:

• Accepts a user object prop with name (string), email (string), and bio (string) fields
• Renders a heading with the user's name
• Renders a paragraph with the user's email
• Renders a paragraph with the user's bio
• Returns these three elements without wrapping them in an additional container element
• Exports the component as the default export

API

interface User {
  name: string;
  email: string;
  bio: string;
}

interface UserProfileProps {
  user: User;
}

export default function UserProfile(props: UserProfileProps): JSX.Element;

Implementation

@generates

Test Cases

• Renders user name in a heading element @test
• Renders user email in a paragraph element @test
• Renders user bio in a paragraph element @test
• Component renders exactly 3 elements at the root level without an additional wrapper element @test

Dependencies { .dependencies }

react { .dependency }

Provides React library for building components.

@types/react { .dependency }

Provides TypeScript type definitions for React.