Spaces:
Running
Running
File size: 2,336 Bytes
372531f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import Image from "next/image";
const SimilarTopics = ({
similarQuestions,
handleDisplayResult,
reset,
}: {
similarQuestions: string[];
handleDisplayResult: (item: string) => void;
reset: () => void;
}) => {
return (
<div className="container flex h-auto w-full shrink-0 gap-4 rounded-lg border border-solid border-[#C2C2C2] bg-white p-5 lg:p-10">
<div className="hidden lg:block">
<Image
src="/img/similarTopics.svg"
alt="footer"
width={24}
height={24}
/>
</div>
<div className="flex-1 divide-y divide-[#E5E5E5]">
<div className="flex gap-4 pb-3">
<Image
src="/img/similarTopics.svg"
alt="footer"
width={24}
height={24}
className="block lg:hidden"
/>
<h3 className="text-base font-bold uppercase text-black">
Similar topics:{" "}
</h3>
</div>
<div className="max-w-[890px] space-y-[15px] divide-y divide-[#E5E5E5]">
{similarQuestions.length > 0 ? (
similarQuestions.map((item) => (
<button
className="flex cursor-pointer items-center gap-4 pt-3.5"
key={item}
onClick={() => {
reset();
handleDisplayResult(item);
}}
>
<div className="flex items-center">
<Image
src="/img/arrow-circle-up-right.svg"
alt="footer"
width={24}
height={24}
/>
</div>
<p className="text-sm font-light leading-[normal] text-[#1B1B16] [leading-trim:both] [text-edge:cap]">
{item}
</p>
</button>
))
) : (
<>
<div className="h-10 w-full animate-pulse rounded-md bg-gray-300" />
<div className="h-10 w-full animate-pulse rounded-md bg-gray-300" />
<div className="h-10 w-full animate-pulse rounded-md bg-gray-300" />
</>
)}
</div>
</div>
</div>
);
};
export default SimilarTopics;
|