63 lines
3.2 KiB
TypeScript
63 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import { MdKeyboardArrowDown } from 'react-icons/md';
|
|
|
|
interface DocumentPagesInterface {
|
|
selectedDocuments: DocumentType[];
|
|
setDropDownTogglePage: React.Dispatch<React.SetStateAction<string>>;
|
|
dropDownTogglePage: string;
|
|
}
|
|
|
|
const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {
|
|
return (
|
|
<div className='bg-white h-full p-4 overflow-y-auto'>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
|
|
return (
|
|
<div
|
|
key={indx}
|
|
// tabIndex={1}
|
|
// onBlur={() => setDropDownTogglePage('')}
|
|
>
|
|
<div
|
|
onClick={() => (`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
|
|
className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
|
|
{
|
|
document.pages != undefined && <img
|
|
key={indx}
|
|
className='rounded-sm shadow'
|
|
src={document.pages[0].src}
|
|
alt="" />
|
|
}
|
|
|
|
<div
|
|
className={`flex items-center justify-between w-full text-xs rounded-sm cursor-pointer ${(dropDownTogglePage === 'pageDropDown' + indx) ? "text-slate-100" : "text-slate-600"}`}>
|
|
<p className={`whitespace-nowrap overflow-hidden text-ellipsis max-w-[18ch]`}>{document.name}</p>
|
|
<MdKeyboardArrowDown className={`${(dropDownTogglePage === 'pageDropDown' + indx) ? 'rotate-180' : ''}`} />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{
|
|
dropDownTogglePage === 'pageDropDown' + indx &&
|
|
<div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
|
|
{document.pages != undefined && document.pages.map((img, indx) => (
|
|
<a
|
|
href={"#" + document.documentId + indx}
|
|
className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'
|
|
>
|
|
<p className='text-center text-xs text-slate-600'>{indx + 1}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
}
|
|
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DocumentPages |