73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
import React, { memo, useCallback, useState } from "react";
|
|
import { ChevronUpIcon } from "@heroicons/react/24/outline";
|
|
import clsx from "clsx";
|
|
import { Transition } from "@headlessui/react";
|
|
|
|
import File from "./File";
|
|
import { FileLite } from "../types/file";
|
|
|
|
type FileViewerListProps = {
|
|
files: FileLite[];
|
|
title: string;
|
|
listExpanded?: boolean;
|
|
showScores?: boolean;
|
|
};
|
|
|
|
function FileViewerList(props: FileViewerListProps) {
|
|
const [listExpanded, setListExpanded] = useState(props.listExpanded ?? false);
|
|
|
|
const handleListExpand = useCallback(() => {
|
|
setListExpanded((prev) => !prev);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex items-left justify-center w-full">
|
|
{props.files.length > 0 && (
|
|
<div className="flex flex-col items-left justify-center w-full mt-4">
|
|
<div className="flex flex-row">
|
|
<div
|
|
className="rounded-md flex shadow p-2 mb-2 w-full bg-gray-50 items-center cursor-pointer "
|
|
onClick={handleListExpand}
|
|
>
|
|
{props.title}
|
|
<div className="bg-gray-300 ml-2 px-2 rounded-full w-max text-center text-sm ">
|
|
{props.files.length}
|
|
</div>
|
|
</div>
|
|
<div className="ml-auto w-max flex items-center justify-center">
|
|
<ChevronUpIcon
|
|
className={clsx(
|
|
"w-6 h-6 ml-2 stroke-slate-400 transition-transform cursor-pointer",
|
|
!listExpanded && "-rotate-180"
|
|
)}
|
|
onClick={handleListExpand}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Transition
|
|
show={listExpanded}
|
|
enter="transition duration-125 ease-out"
|
|
enterFrom="transform translate-y-4 opacity-0"
|
|
enterTo="transform translate-y-0 opacity-100"
|
|
leave="transition duration-125 ease-out"
|
|
leaveFrom="transform translate-y-0 opacity-100"
|
|
leaveTo="transform translate-y-4 opacity-0"
|
|
>
|
|
<div className="text-sm text-gray-500 space-y-2">
|
|
{props.files.map((file) => (
|
|
<File
|
|
key={file.name}
|
|
file={file}
|
|
showScore={props.showScores}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(FileViewerList);
|