咒語:
使用mui 生成JSX 設計一個天氣應用頁面，利用 Material-UI 的卡片、圖標和數據表格來顯示當前和詳細的天氣信息。
使用 fetch(
'https://opendata.cwb.gov.tw/api/v1/rest/datastore/O-A0003-001?Authorization=你的授權碼&locationName=臺北'
我要繁體中文版本的

import React, { useEffect, useState } from 'react';
import { Card, CardContent, Typography, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, CircularProgress } from '@mui/material';
import WeatherIcon from '@mui/icons-material/Weather';
import axios from 'axios';

const WeatherApp = () => {
  const [weatherData, setWeatherData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 替換為你的 API 授權碼
    const apiKey = '你的授權碼';
    // 替換為你想要取得天氣資訊的地點，例如：臺北
    const locationName = '臺北';

    axios
      .get(`https://opendata.cwb.gov.tw/api/v1/rest/datastore/O-A0003-001?Authorization=${apiKey}&locationName=${locationName}`)
      .then((response) => {
        setWeatherData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        console.error('取得天氣資訊時發生錯誤:', error);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      <Typography variant="h4" gutterBottom>
        天氣應用程式
      </Typography>

      {loading ? (
        <CircularProgress />
      ) : (
        <Card variant="outlined">
          <CardContent>
            <Typography variant="h5" component="div">
              目前天氣資訊
            </Typography>

            {weatherData ? (
              <TableContainer component={Paper}>
                <Table>
                  <TableHead>
                    <TableRow>
                      <TableCell>地點</TableCell>
                      <TableCell>時間</TableCell>
                      <TableCell>天氣</TableCell>
                      <TableCell>溫度 (攝氏度)</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {weatherData.records.location[0].weatherElement.map((element) => (
                      <TableRow key={element.elementName}>
                        <TableCell>{weatherData.records.location[0].locationName}</TableCell>
                        <TableCell>{element.time.obsTime}</TableCell>
                        <TableCell>
                          <WeatherIcon color="primary" />
                          {element.elementValue}
                        </TableCell>
                        <TableCell>{element.elementValue}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            ) : (
              <Typography variant="body1">找不到天氣資訊</Typography>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  );
};

export default WeatherApp;

發現他不知道我們的資料格式 直接問他怎麼取資料
咒語: [{"elementName":"ELEV","elementValue":"6.3"},{"elementName":"WDIR","elementValue":"190"},{"elementName":"WDSD","elementValue":"1.2"},{"elementName":"TEMP","elementValue":"25.2"},{"elementName":"HUMD","elementValue":"0.94"},{"elementName":"PRES","elementValue":"1004.9"},{"elementName":"24R","elementValue":"-990.0"},{"elementName":"H_FX","elementValue":"3.0"},{"elementName":"H_XD","elementValue":"160"},{"elementName":"H_FXT","elementValue":"1353"},{"elementName":"H_F10","elementValue":"2.1"},{"elementName":"H_10D","elementValue":"160"},{"elementName":"H_F10T","elementValue":"1358"},{"elementName":"H_UVI","elementValue":"0.69"},{"elementName":"D_TX","elementValue":"26.4"},{"elementName":"D_TXT","elementValue":"0856"},{"elementName":"D_TN","elementValue":"23.9"},{"elementName":"D_TNT","elementValue":"0353"},{"elementName":"D_TS","elementValue":"0.0"},{"elementName":"VIS","elementValue":"7-10"},{"elementName":"Weather","elementValue":"陰有靄"}]
weatherData.weatherElement長這樣 我要找到陰有靄 應該怎樣寫fn

  function weatherNow() {
    let weatherDescription = "";
    if (weatherData && weatherData.weatherElement) {
      const weatherElements = weatherData.weatherElement;
      for (const element of weatherElements) {
        // 如果找到 elementName 為 "Weather" 的元素
        if (element.elementName === "Weather") {
          weatherDescription = element.elementValue;
          return weatherDescription;
        }
      }
    }
  }

把所有格是變成表格以供查閱
咒語:用mui Table 展現上述weatherData.weatherElement TableHead用elementName 但要依據意思直接猜測直接翻譯成相對意思 把此項加上可收盒的抽屜

import React from "react";
import {   Accordion,
  AccordionDetails,
  AccordionSummary,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography, } from "@mui/material";

const weatherData = [
  { "elementName": "ELEV", "elementValue": "6.3" },
  { "elementName": "WDIR", "elementValue": "190" },
  { "elementName": "WDSD", "elementValue": "1.2" },
  { "elementName": "TEMP", "elementValue": "25.2" },
  { "elementName": "HUMD", "elementValue": "0.94" },
  { "elementName": "PRES", "elementValue": "1004.9" },
  { "elementName": "24R", "elementValue": "-990.0" },
  { "elementName": "H_FX", "elementValue": "3.0" },
  { "elementName": "H_XD", "elementValue": "160" },
  { "elementName": "H_FXT", "elementValue": "1353" },
  { "elementName": "H_F10", "elementValue": "2.1" },
  { "elementName": "H_10D", "elementValue": "160" },
  { "elementName": "H_F10T", "elementValue": "1358" },
  { "elementName": "H_UVI", "elementValue": "0.69" },
  { "elementName": "D_TX", "elementValue": "26.4" },
  { "elementName": "D_TXT", "elementValue": "0856" },
  { "elementName": "D_TN", "elementValue": "23.9" },
  { "elementName": "D_TNT", "elementValue": "0353" },
  { "elementName": "D_TS", "elementValue": "0.0" },
  { "elementName": "VIS", "elementValue": "7-10" },
  { "elementName": "Weather", "elementValue": "陰有靄" }
];

const translateElementName = (elementName) => {
  switch (elementName) {
    case "ELEV":
      return "海拔高度（公尺）";
    case "WDIR":
      return "風向（度）";
    case "WDSD":
      return "風速（公尺/秒）";
    case "TEMP":
      return "氣溫（攝氏度）";
    case "HUMD":
      return "相對濕度（百分比）";
    case "PRES":
      return "氣壓（百帕斯卡）";
    case "24R":
      return "過去24小時累積雨量";
    case "H_FX":
      return "最大陣風風速（公尺/秒）";
    case "H_XD":
      return "最大陣風風向（度）";
    case "H_FXT":
      return "最大陣風時間";
    case "H_F10":
      return "最大10分鐘平均風速（公尺/秒）";
    case "H_10D":
      return "最大10分鐘平均風向（度）";
    case "H_F10T":
      return "最大10分鐘平均風速時間";
    case "H_UVI":
      return "紫外線指數";
    case "D_TX":
      return "當天最高溫度（攝氏度）";
    case "D_TXT":
      return "當天最高溫度時間";
    case "D_TN":
      return "當天最低溫度（攝氏度）";
    case "D_TNT":
      return "當天最低溫度時間";
    case "D_TS":
      return "當天降水總量";
    case "VIS":
      return "能見度";
    case "Weather":
      return "天氣描述";
    default:
      return elementName;
  }
};

const WeatherTable = () => {
  return (
       <Accordion>
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
        <Typography variant="h6">詳細資料</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>項目</TableCell>
                <TableCell>數值</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {weatherData.weatherElement.map((data, index) => (
                <TableRow key={index}>
                  <TableCell>{translateElementName(data.elementName)}</TableCell>
                  <TableCell>{data.elementValue}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </AccordionDetails>
    </Accordion>
  );
};

export default WeatherTable;

把該有的元件import 進去 則將卡片完成 這樣我們也可以預測台北的天氣了