81 lines
3.2 KiB
JavaScript
81 lines
3.2 KiB
JavaScript
import { Badge } from "@/components/ui/badge";
|
|
import { FaRegLightbulb } from "react-icons/fa";
|
|
import { isPdf, t } from "@/utils/index";
|
|
import { MdOutlineAttachFile } from "react-icons/md";
|
|
import CustomLink from "@/components/Common/CustomLink";
|
|
import CustomImage from "@/components/Common/CustomImage";
|
|
|
|
const ProductFeature = ({ filteredFields }) => {
|
|
return (
|
|
<div className="flex flex-col gap-2 bg-muted rounded-lg">
|
|
<div className="flex flex-col gap-2 p-4">
|
|
<div>
|
|
<Badge className="bg-primary rounded-sm gap-1 text-base text-white py-2 px-4">
|
|
<FaRegLightbulb />
|
|
{t("highlights")}
|
|
</Badge>
|
|
</div>
|
|
<div className="flex flex-col gap-6 items-start mt-6">
|
|
{filteredFields?.map((feature, index) => {
|
|
return (
|
|
<div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 w-full" key={index}>
|
|
<div className="flex items-center gap-2 w-full md:w-1/3">
|
|
<CustomImage
|
|
src={feature?.image}
|
|
alt={feature?.translated_name || feature?.name}
|
|
height={24}
|
|
width={24}
|
|
className="aspect-square size-6"
|
|
/>
|
|
<p className="text-base font-medium text-wrap">
|
|
{feature?.translated_name || feature?.name}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 sm:gap-4 w-full md:w-2/3">
|
|
<span className="hidden md:inline">:</span>
|
|
{feature.type === "fileinput" ? (
|
|
isPdf(feature?.value?.[0]) ? (
|
|
<div className="flex gap-1 items-center">
|
|
<MdOutlineAttachFile size={20} />
|
|
<CustomLink
|
|
href={feature?.value?.[0]}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{t("viewPdf")}
|
|
</CustomLink>
|
|
</div>
|
|
) : (
|
|
<CustomLink
|
|
href={feature?.value}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<CustomImage
|
|
src={feature?.value}
|
|
alt="Preview"
|
|
width={36}
|
|
height={36}
|
|
/>
|
|
</CustomLink>
|
|
)
|
|
) : (
|
|
<p className="text-base text-muted-foreground w-full">
|
|
{Array.isArray(feature?.translated_selected_values)
|
|
? feature?.translated_selected_values.join(", ")
|
|
: feature?.translated_selected_values}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductFeature;
|