72 lines
2.5 KiB
TypeScript
72 lines
2.5 KiB
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { useEffect, useState } from 'react'
|
|
import SuitableList from './SuitableList'
|
|
import SuitableSearch from './SuitableSearch'
|
|
import { useSuitable } from '@/hooks/useSuitable'
|
|
|
|
export default function Suitable() {
|
|
const [reference, setReference] = useState(true)
|
|
|
|
const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
|
|
|
|
useEffect(() => {
|
|
getSuitableCommCode()
|
|
return () => {
|
|
clearSuitableSearch({ items: true, category: true, keyword: true })
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<div className="border-frame">
|
|
<SuitableSearch />
|
|
<div className="compliance-check-wrap">
|
|
<div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
|
|
<div className="check-name-wrap">
|
|
<div className="check-name">凡例</div>
|
|
<div className="check-name-btn">
|
|
<button className="bx-btn" onClick={() => setReference(!reference)}></button>
|
|
</div>
|
|
</div>
|
|
<ul className="reference-list">
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>設置可能</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>設置不可</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>お問い合わせ</span>
|
|
</div>
|
|
</li>
|
|
<li className="reference-item">
|
|
<div className="reference-item-bx">
|
|
<div className="compliance-icon">
|
|
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
|
</div>
|
|
<span>備考</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<SuitableList />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|