74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useParams } from 'next/navigation'
|
|
|
|
const inquiryDummyData = {
|
|
writer: {
|
|
name: 'writer',
|
|
email: 'writer@example.com',
|
|
},
|
|
title: 'title',
|
|
content: 'content',
|
|
files: ['file1.jpg', 'file2.jpg', 'file3.jpg'],
|
|
createdAt: '2021-01-01',
|
|
answer: {
|
|
writer: '佐藤一貴',
|
|
content:
|
|
'一次側接続は、自動切替開閉器と住宅分電盤主幹ブレーカの間に蓄電システムブレーカを配線する方法です。\n二次側接続は、住宅分電盤主幹ブレ―カの二次側に蓄電システムブレーカを接続する',
|
|
createdAt: '2021-01-01 12:00:00',
|
|
files: ['file4.jpg', 'file5.jpg', 'file6.jpg'],
|
|
},
|
|
}
|
|
|
|
export default function InquiryDetail() {
|
|
const params = useParams()
|
|
const id = params.id
|
|
return (
|
|
<div>
|
|
<h1>InquiryDetail</h1>
|
|
<p>{id}</p>
|
|
<div className="mt-5">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<p>writer</p>
|
|
<p>{inquiryDummyData.writer.name}</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<p>email</p>
|
|
<p>{inquiryDummyData.writer.email}</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<p>title</p>
|
|
<p>{inquiryDummyData.title}</p>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<p>content</p>
|
|
<p>{inquiryDummyData.content}</p>
|
|
</div>
|
|
<div>
|
|
<p>files</p>
|
|
<div className="flex flex-col gap-2">
|
|
{inquiryDummyData.files.map((file) => (
|
|
<span key={file}>{file}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
{inquiryDummyData.answer && (
|
|
<div className="mt-4">
|
|
<h1>Reply: Hanwha Japan</h1>
|
|
<div>
|
|
<p>{inquiryDummyData.answer.writer}</p>
|
|
<p>{inquiryDummyData.answer.createdAt}</p>
|
|
<p>{inquiryDummyData.answer.content}</p>
|
|
<div className="flex flex-col gap-2">
|
|
{inquiryDummyData.answer.files.map((file) => (
|
|
<span key={file}>{file}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|