咒語:制作一個社交媒體個人資料頁面，包括用戶頭像、個人信息、帖子列表等，使用 Material-UI 的頭像、卡片和標簽組件

import React from 'react';
import { Avatar, Card, CardContent, Typography, Grid, Paper } from '@mui/material';

// 用戶個人信息數據，可以根據需要自定義
const userData = {
  username: 'JohnDoe',
  fullName: 'John Doe',
  bio: 'Web Developer | Nature Lover | Coffee Enthusiast',
  avatarUrl: 'https://example.com/avatar.jpg', // 用戶頭像 URL
};

// 用戶帖子列表數據，可以根據需要自定義
const userPosts = [
  {
    id: 1,
    text: '這是我的第一條帖子。',
    date: '2023-09-20',
  },
  {
    id: 2,
    text: '今天的天氣真好！',
    date: '2023-09-21',
  },
  // 添加更多帖子數據
];

function UserProfile() {
  return (
    <Grid container spacing={3}>
      <Grid item xs={12} md={4}>
        <Card>
          <CardContent>
            <Avatar alt={userData.username} src={userData.avatarUrl} sx={{ width: 150, height: 150 }} />
            <Typography variant="h5" sx={{ marginTop: 2 }}>
              {userData.fullName}
            </Typography>
            <Typography variant="subtitle1" color="textSecondary">
              {userData.bio}
            </Typography>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={12} md={8}>
        <Typography variant="h6">帖子列表</Typography>
        <Paper elevation={3} sx={{ padding: 2 }}>
          {userPosts.map((post) => (
            <Card key={post.id} variant="outlined" sx={{ marginBottom: 2 }}>
              <CardContent>
                <Typography variant="body1">{post.text}</Typography>
                <Typography variant="caption" color="textSecondary">
                  發布日期：{post.date}
                </Typography>
              </CardContent>
            </Card>
          ))}
        </Paper>
      </Grid>
    </Grid>
  );
}

export default UserProfile;

這樣除了修改密碼外 我們還能顯示會員的各個資訊跟追蹤的東西