diff --git a/src/components/css/record.css b/src/components/css/record.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/record.js b/src/components/record.js new file mode 100644 index 0000000..bdfbb81 --- /dev/null +++ b/src/components/record.js @@ -0,0 +1,56 @@ +import React, { useEffect, useState } from 'react'; +import artData from './artData.json'; // 將本地 artData.json 檔案匯入 +import './css/record.css'; + + +const ArtInfo = () => { + const [apiData, setApiData] = useState([]); // 儲存從 API 獲取的資料 + const [loading, setLoading] = useState(true); + + // 模擬從 API 獲取資料 + useEffect(() => { + fetch('https://example.com/api/data') // 替換為真實 API 的 URL + .then(response => response.json()) + .then(data => { + setApiData(data); + setLoading(false); + }) + .catch(error => console.error('Error fetching data:', error)); + }, []); + + // 根據 art_id 找到對應的作品資訊 + const getArtDetailsById = (artId) => { + return artData.find(art => art.art_id === artId); + }; + + if (loading) { + return
Loading...
; + } + + return ( +時間: {new Date(item.timestamp).toLocaleString()}
+ {artDetails ? ( +名稱: {artDetails.name}
+說明: {artDetails.description}
+地址: {artDetails.address}
+找不到對應的藝術作品資料。
+ )} +