classify web

components/PagesComponent/ProductDetail/ProductFeature.jsx

@@ -0,0 +1,80 @@
+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;