imio.smartweb.core 1.2.12__py3-none-any.whl → 1.2.68__py3-none-any.whl

imio/smartweb/core/webcomponents/src/components/News/News.scss

@@ -1,21 +1,25 @@
 .breadcrumb {
   padding: 0;
 }
+
 .r-result-list {
   margin-top: 50px;
   padding-left: 0;
   list-style: none;
 }
+
 #portal-column-content {
   h1 {
     font-size: 0px;
     position: absolute;
   }
 }
+
 #viewlet-below-content-title,
 #viewlet-below-content-description {
   display: none;
 }
+
 /* image */
 /* text */
 .r-item-text {
@@ -24,31 +28,29 @@
   display: flex;
   flex-direction: column;
 }
+
 .r-item-title {
   display: block;
 }
 
-.r-results-numbers {
-  width: 100%;
-  margin-bottom: 0.5rem;
-  span {
-    font-weight: bold;
-  }
-}
+
 // content
 
 .r-content-img {
-  padding-bottom: 56.25%;
+  padding-bottom: 60%;
 }
+
 .new-content {
   max-width: 700px;
   margin: 0 auto;
 }
+
 //// for bla ////
 /* list item */
 .r-load-more {
   text-align: center;
   margin-bottom: 2rem;
+
   button {
     background: #000;
     border: solid 1px transparent;
@@ -61,13 +63,16 @@
     font-size: 14px;
     margin: 0 auto;
     display: block;
+
     &:hover {
       background: rgba(0, 0, 0, 0.871);
     }
   }
 }
+
 .r-actu-wrapper {
   position: relative;
+
   &:after {
     width: 495px;
     display: block;
@@ -78,6 +83,7 @@
     right: 0;
     transform: translateY(-20%);
   }
+
   .r-list-item-group {
     max-width: 900px;
     margin: 30px auto;
@@ -86,38 +92,43 @@
     border: 1px solid #D1D1D1;
   }
 }
+
 /* text */
 .r-item-title {
   font-size: 18px;
   font-weight: bold;
 }
+
 .r-item-description {
   font-size: 16px;
   color: #444444;
   margin-top: 10px;
 }
+
 /* image */
 .r-item-img {
   border-radius: 15px 15px 15px 0px;
 }
+
 .r-actu-wrapper {
   .r-item-img {
-    height: 183px;
-    flex: 0 0 247px;
+    width: 100%;
+    aspect-ratio: 1.674107142857143;
     background-position: top;
     background-size: cover;
     background-repeat: no-repeat;
+
     @media screen and (min-width:775px) {
       width: 323px;
-      height: 220px;
-      flex: 0 0 323px;
     }
   }
 }
+
 /* arrow more */
 .r-item-read-more {
   margin-top: auto;
 }
+
 .r-item-arrow-more {
   width: 50px;
   height: 50px;
@@ -127,15 +138,16 @@
   margin-left: auto;
   align-self: center;
   margin-right: 30px;
-  background: url(../../assets/next-react.svg);
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.44 10'%3E%3Cg id='Calque_2' data-name='Calque 2'%3E%3Cg id='Calque_1-2' data-name='Calque 1'%3E%3Cg id='ui-arrow-right'%3E%3Cg id='arrow'%3E%3Cline id='Ligne_7' data-name='Ligne 7' x1='1' y1='5' x2='19.44' y2='5' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-width:2px'/%3E%3Cline id='Ligne_8' data-name='Ligne 8' x1='14.83' y1='1' x2='19.44' y2='5' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-width:2px'/%3E%3Cline id='Ligne_9' data-name='Ligne 9' x1='14.83' y1='9' x2='19.44' y2='5' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-width:2px'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-size: 20px;
   background-position: center;
 }
+
 .r-list-item-group {
   &:hover {
     .r-item-arrow-more {
-      background: url(../../assets/next-react-white.svg), #F9B331;
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.44 10'%3E%3Cg data-name='Calque 2'%3E%3Cg data-name='Calque 1'%3E%3Cpath d='M1 5h18.44' data-name='Ligne 7' style='fill:none;stroke:%23fff;stroke-linecap:round;stroke-width:2px'/%3E%3Cpath d='m14.83 1 4.61 4' data-name='Ligne 8' style='fill:none;stroke:%23fff;stroke-linecap:round;stroke-width:2px'/%3E%3Cpath d='m14.83 9 4.61-4' data-name='Ligne 9' style='fill:none;stroke:%23fff;stroke-linecap:round;stroke-width:2px'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), #F9B331;
       background-repeat: no-repeat;
       background-size: 20px;
       background-position: center;
@@ -144,10 +156,11 @@
 }
 
 .r-list-item {
-  @media screen and (max-width:600px) {
+  @media screen and (max-width:774px) {
     flex-direction: column;
   }
 }
+
 .r-item-read-more {
   @media screen and (max-width:600px) {
     position: relative;
@@ -158,6 +171,7 @@
   display: inline-flex;
   align-self: center;
   margin-right: 0.4rem;
+
   svg {
     top: .125em;
     position: relative;
@@ -165,6 +179,7 @@
     width: 1em;
   }
 }
+
 .dpinlb {
   display: inline-block;
   vertical-align: top;
@@ -175,12 +190,15 @@
     width: 30px;
     height: 30px;
   }
+
   ul {
     display: flex;
     align-items: center;
     margin: 0;
+
     li {
       list-style: none;
+
       a {
         &:hover {
           opacity: .7;
@@ -188,4 +206,12 @@
       }
     }
   }
+}
+
+.r-item-categorie {
+  margin-top: 5px;
+  text-transform: uppercase;
+  color: #747474;
+  font-weight: 400;
+  font-size: 13px;
 }

imio/smartweb/core/webcomponents/src/components/News/NewsCard/NewsCard.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState, useContext } from "react";
+import moment from "moment";
+import ReactMarkdown from "react-markdown";
+import { Translate } from "react-translated";
+import { LanguageContext } from "../News.jsx";
+const NewsCard = ({ item, showCategoriesOrTopics, contextAuthenticatedUser }) => {
+    const [limitDescription, setLimitDescription] = useState();
+    const [itemTopic, setItemTopic] = useState(null);
+
+    const numberLimit = 150;
+    const title = item.title && item.title;
+    const description = item.description || "";
+
+    useEffect(() => {
+        if (description.length >= numberLimit) {
+            let truncatedDescription = description.substring(0, numberLimit);
+            if (description.endsWith("**")) {
+                truncatedDescription += "**";
+            }
+            setLimitDescription(truncatedDescription + "...");
+        } else {
+            setLimitDescription(description);
+        }
+        if (item.topics && item.topics.length > 0) {
+            setItemTopic(item.topics[0].title);
+        } else {
+            setItemTopic(null);
+        }
+    }, [item]);
+    moment.locale(useContext(LanguageContext));
+    const created = moment(item.created).startOf("minute").fromNow();
+    const lastModified = moment(item.modified).startOf("minute").fromNow();
+    return (
+        <>
+            <div className="r-list-item">
+                <div
+                    className={
+                        item.image_vignette_scale
+                            ? "r-item-img"
+                            : "r-item-img r-item-img-placeholder"
+                    }
+                    style={{
+                        backgroundImage: item.image_vignette_scale
+                            ? "url(" + item.image_vignette_scale + ")"
+                            : "",
+                    }}
+                />
+                <div className="r-item-text">
+                    <span className="r-item-title">{title}</span>
+                    {showCategoriesOrTopics === "topic" ? (
+                        itemTopic && (
+                            <span className="r-item-categorie">{item.topics[0].title}</span>
+                        )
+                    ) : showCategoriesOrTopics === "category" ? (
+                        item.local_category ? (
+                            <span className="r-item-categorie">{item.local_category.title}</span>
+                        ) : (
+                            item.category && (
+                                <span className="r-item-categorie">{item.category.title}</span>
+                            )
+                        )
+                    ) : (
+                        ""
+                    )}
+                    {description ? (
+                        <ReactMarkdown className="r-item-description">
+                            {limitDescription}
+                        </ReactMarkdown>
+                    ) : (
+                        ""
+                    )}
+                    <div className="r-item-read-more" style={{ textDecoration: "none" }}>
+                        {created === lastModified ? (
+                            <div className="r-card-date-last">
+                                <span>
+                                    <Translate text="Publié" />{" "}
+                                </span>
+                                <span>{created}</span>
+                            </div>
+                        ) : (
+                            <div className="r-card-date-last">
+                                <span>
+                                    <Translate text="Actualisé" />{" "}
+                                </span>
+                                <span>{lastModified}</span>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div className="r-item-arrow-more"></div>
+            </div>
+        </>
+    );
+};
+
+export default NewsCard;

imio/smartweb/core/webcomponents/src/components/News/NewsContent/NewsContent.jsx

@@ -0,0 +1,309 @@
+import { useNavigate } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import useAxios from "../../../hooks/useAxios";
+import useFilterQuery from "../../../hooks/useFilterQuery";
+import moment from "moment";
+import Moment from "react-moment";
+import ReactMarkdown from "react-markdown";
+import Spotlight from "spotlight.js";
+import "../../../../node_modules/flexbin/flexbin.css";
+import { Translate } from "react-translated";
+import queryString from "query-string";
+
+const ContactContent = ({ queryUrl, onChange, contextAuthenticatedUser }) => {
+    let navigate = useNavigate();
+    const parsed = queryString.parse(useFilterQuery().toString());
+    const parsed2 = { ...parsed, UID: parsed["u"], fullobjects: 1 };
+    const [params, setParams] = useState(parsed2);
+    const [item, setitem] = useState({});
+    const [files, setFiles] = useState();
+    const [gallery, setGallery] = useState();
+    const { response, error, isLoading } = useAxios(
+        {
+            method: "get",
+            url: "",
+            baseURL: queryUrl,
+            headers: {
+                Accept: "application/json",
+            },
+            params: params,
+        },
+        []
+    );
+    useEffect(() => {
+        if (response !== null) {
+            setitem(response.items[0]);
+        }
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "instant",
+        });
+    }, [response]);
+
+    /// use to set file and gallery items
+    useEffect(() => {
+        if (item.items && item.items.length > 0) {
+            setFiles(item.items.filter((files) => files["@type"] === "File"));
+            setGallery(item.items.filter((files) => files["@type"] === "Image"));
+        }
+    }, [item]);
+
+    function handleClick() {
+        navigate("..");
+        onChange(null);
+    }
+    moment.locale("fr");
+    const created = moment(item.created).startOf("minute").fromNow();
+    const lastModified = moment(item.modified).startOf("minute").fromNow();
+    return (
+        <div className="new-content r-content">
+            <button type="button" onClick={handleClick}>
+                <Translate text="Retour" />
+            </button>
+
+            {contextAuthenticatedUser === "False" ? (
+                <a
+                    href={item["@id"]}
+                    target="_blank"
+                    title="Editer la fiche"
+                    className="edit-rest-elements edit-rest-elements-content"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-pencil-square"
+                        viewBox="0 0 16 16"
+                    >
+                        <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
+                        <path
+                            fill-rule="evenodd"
+                            d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
+                        />
+                    </svg>
+                </a>
+            ) : (
+                ""
+            )}
+
+            <article>
+                <header>
+                    <h2 className="r-content-title">{item.title}</h2>
+                    <div className="r-content-description">
+                        <ReactMarkdown>{item.description}</ReactMarkdown>
+                    </div>
+                </header>
+                <figure>
+                    <div
+                        className="r-content-img"
+                        style={{
+                            backgroundImage: item.image_affiche_scale
+                                ? "url(" + item.image_affiche_scale + ")"
+                                : "",
+                        }}
+                    />
+                </figure>
+                <div className="r-content-news-info">
+                    <div className="r-content-news-info-container">
+                        {/* date */}
+                        <div className="r-content-news-info-schedul">
+                            <div className="icon-baseline">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    preserveAspectRatio="xMinYMin"
+                                    viewBox="0 0 19.41 19.41"
+                                >
+                                    <path d="M16.09,2.74H14.35V.85a.44.44,0,0,0-.43-.44H12.47A.44.44,0,0,0,12,.85V2.74H7.38V.85A.44.44,0,0,0,7,.41H5.5a.44.44,0,0,0-.44.44V2.74H3.32A1.74,1.74,0,0,0,1.58,4.48V17.26A1.74,1.74,0,0,0,3.32,19H16.09a1.74,1.74,0,0,0,1.75-1.74V4.48A1.74,1.74,0,0,0,16.09,2.74Zm-.21,14.52H3.54A.22.22,0,0,1,3.32,17h0V6.22H16.09V17a.21.21,0,0,1-.21.22Z" />
+                                </svg>
+                            </div>
+                            <div className="dpinlb">
+                                <div className="r-content-news-info--date">
+                                    <div className="r-content-date">
+                                        {created === lastModified ? (
+                                            <div className="r-content-date-publish">
+                                                <span>
+                                                    <Translate text="Publié" /> {created}
+                                                </span>
+                                            </div>
+                                        ) : (
+                                            <div>
+                                                <div className="r-content-date-publish">
+                                                    <span>
+                                                        <Translate text="Publié" /> {created}
+                                                    </span>
+                                                </div>
+                                                <div className="r-card-date-last">
+                                                    <span>
+                                                        <Translate text="Actualisé" />{" "}
+                                                        {lastModified}{" "}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        {/* link  */}
+                        {item.site_url === null && item.video_url === null ? (
+                            ""
+                        ) : (
+                            <div className="r-content-news-info-link">
+                                <div className="icon-baseline">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 19.41 19.41"
+                                    >
+                                        <path d="M16.36,2.22H3.06a1.3,1.3,0,0,0-1.3,1.3h0v9a1.3,1.3,0,0,0,1.3,1.3H7.52v1.74h-.7a.8.8,0,0,0,0,1.6h5.79a.8.8,0,0,0,0-1.6h-.7V13.85h4.45a1.31,1.31,0,0,0,1.3-1.3v-9A1.3,1.3,0,0,0,16.36,2.22Zm-1.9,10.83a.37.37,0,1,1,.36-.37h0a.36.36,0,0,1-.36.36Zm1.6.08a.45.45,0,1,1,.44-.45h0a.44.44,0,0,1-.44.45h0Zm.53-1.35H2.82V3.52a.23.23,0,0,1,.23-.23H16.36a.23.23,0,0,1,.23.23h0v8.27Z" />
+                                    </svg>
+                                </div>
+                                <div className="dpinlb">
+                                    {item.site_url === null ? (
+                                        ""
+                                    ) : (
+                                        <div className="r-content-news-info-event_link">
+                                            <a href={item.site_url}>{item.site_url}</a>
+                                        </div>
+                                    )}
+                                    {item.video_url === null ? (
+                                        ""
+                                    ) : (
+                                        <div className="r-content-news-info--video">
+                                            <a href={item.video_url}>
+                                                <Translate text="Lien vers la vidéo" />
+                                            </a>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                        {/* Social */}
+                        {item.facebook === null &&
+                        item.instagram === null &&
+                        item.twitter === null ? (
+                            ""
+                        ) : (
+                            <div className="r-content-news-info-social">
+                                <ul>
+                                    {!item.facebook ? (
+                                        ""
+                                    ) : (
+                                        <li>
+                                            <a href={item.facebook} target="_blank">
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    height="800"
+                                                    width="1200"
+                                                    viewBox="-204.79995 -341.33325 1774.9329 2047.9995"
+                                                >
+                                                    <path
+                                                        d="M1365.333 682.667C1365.333 305.64 1059.693 0 682.667 0 305.64 0 0 305.64 0 682.667c0 340.738 249.641 623.16 576 674.373V880H402.667V682.667H576v-150.4c0-171.094 101.917-265.6 257.853-265.6 74.69 0 152.814 13.333 152.814 13.333v168h-86.083c-84.804 0-111.25 52.623-111.25 106.61v128.057h189.333L948.4 880H789.333v477.04c326.359-51.213 576-333.635 576-674.373"
+                                                        fill="#100f0d"
+                                                    />
+                                                    <path
+                                                        d="M948.4 880l30.267-197.333H789.333V554.609C789.333 500.623 815.78 448 900.584 448h86.083V280s-78.124-13.333-152.814-13.333c-155.936 0-257.853 94.506-257.853 265.6v150.4H402.667V880H576v477.04a687.805 687.805 0 00106.667 8.293c36.288 0 71.91-2.84 106.666-8.293V880H948.4"
+                                                        fill="#fff"
+                                                    />
+                                                </svg>
+                                            </a>
+                                        </li>
+                                    )}
+                                    {!item.instagram ? (
+                                        ""
+                                    ) : (
+                                        <li>
+                                            <a href={item.instagram} target="_blank">
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    height="800"
+                                                    width="1200"
+                                                    viewBox="-100.7682 -167.947 873.3244 1007.682"
+                                                >
+                                                    <g fill="#100f0d">
+                                                        <path d="M335.895 0c-91.224 0-102.663.387-138.49 2.021-35.752 1.631-60.169 7.31-81.535 15.612-22.088 8.584-40.82 20.07-59.493 38.743-18.674 18.673-30.16 37.407-38.743 59.495C9.33 137.236 3.653 161.653 2.02 197.405.386 233.232 0 244.671 0 335.895c0 91.222.386 102.661 2.02 138.488 1.633 35.752 7.31 60.169 15.614 81.534 8.584 22.088 20.07 40.82 38.743 59.495 18.674 18.673 37.405 30.159 59.493 38.743 21.366 8.302 45.783 13.98 81.535 15.612 35.827 1.634 47.266 2.021 138.49 2.021 91.222 0 102.661-.387 138.488-2.021 35.752-1.631 60.169-7.31 81.534-15.612 22.088-8.584 40.82-20.07 59.495-38.743 18.673-18.675 30.159-37.407 38.743-59.495 8.302-21.365 13.981-45.782 15.612-81.534 1.634-35.827 2.021-47.266 2.021-138.488 0-91.224-.387-102.663-2.021-138.49-1.631-35.752-7.31-60.169-15.612-81.534-8.584-22.088-20.07-40.822-38.743-59.495-18.675-18.673-37.407-30.159-59.495-38.743-21.365-8.302-45.782-13.981-81.534-15.612C438.556.387 427.117 0 335.895 0zm0 60.521c89.686 0 100.31.343 135.729 1.959 32.75 1.493 50.535 6.965 62.37 11.565 15.68 6.094 26.869 13.372 38.622 25.126 11.755 11.754 19.033 22.944 25.127 38.622 4.6 11.836 10.072 29.622 11.565 62.371 1.616 35.419 1.959 46.043 1.959 135.73 0 89.687-.343 100.311-1.959 135.73-1.493 32.75-6.965 50.535-11.565 62.37-6.094 15.68-13.372 26.869-25.127 38.622-11.753 11.755-22.943 19.033-38.621 25.127-11.836 4.6-29.622 10.072-62.371 11.565-35.413 1.616-46.036 1.959-135.73 1.959-89.694 0-100.315-.343-135.73-1.96-32.75-1.492-50.535-6.964-62.37-11.564-15.68-6.094-26.869-13.372-38.622-25.127-11.754-11.753-19.033-22.943-25.127-38.621-4.6-11.836-10.071-29.622-11.565-62.371-1.616-35.419-1.959-46.043-1.959-135.73 0-89.687.343-100.311 1.959-135.73 1.494-32.75 6.965-50.535 11.565-62.37 6.094-15.68 13.373-26.869 25.126-38.622 11.754-11.755 22.944-19.033 38.622-25.127 11.836-4.6 29.622-10.072 62.371-11.565 35.419-1.616 46.043-1.959 135.73-1.959" />
+                                                        <path d="M335.895 447.859c-61.838 0-111.966-50.128-111.966-111.964 0-61.838 50.128-111.966 111.966-111.966 61.836 0 111.964 50.128 111.964 111.966 0 61.836-50.128 111.964-111.964 111.964zm0-284.451c-95.263 0-172.487 77.224-172.487 172.487 0 95.261 77.224 172.485 172.487 172.485 95.261 0 172.485-77.224 172.485-172.485 0-95.263-77.224-172.487-172.485-172.487m219.608-6.815c0 22.262-18.047 40.307-40.308 40.307-22.26 0-40.307-18.045-40.307-40.307 0-22.261 18.047-40.308 40.307-40.308 22.261 0 40.308 18.047 40.308 40.308" />
+                                                    </g>
+                                                </svg>
+                                            </a>
+                                        </li>
+                                    )}
+                                    {!item.twitter ? (
+                                        ""
+                                    ) : (
+                                        <li>
+                                            <a href={item.twitter} target="_blank">
+                                                <svg
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    height="800"
+                                                    width="1200"
+                                                    viewBox="-44.7006 -60.54775 387.4052 363.2865"
+                                                >
+                                                    <path
+                                                        fill="#000"
+                                                        d="M93.719 242.19c112.46 0 173.96-93.168 173.96-173.96 0-2.646-.054-5.28-.173-7.903a124.338 124.338 0 0030.498-31.66c-10.955 4.87-22.744 8.148-35.11 9.626 12.622-7.57 22.313-19.543 26.885-33.817a122.62 122.62 0 01-38.824 14.841C239.798 7.433 223.915 0 206.326 0c-33.764 0-61.144 27.381-61.144 61.132 0 4.798.537 9.465 1.586 13.941-50.815-2.557-95.874-26.886-126.03-63.88a60.977 60.977 0 00-8.279 30.73c0 21.212 10.794 39.938 27.208 50.893a60.685 60.685 0 01-27.69-7.647c-.009.257-.009.507-.009.781 0 29.61 21.075 54.332 49.051 59.934a61.218 61.218 0 01-16.122 2.152 60.84 60.84 0 01-11.491-1.103c7.784 24.293 30.355 41.971 57.115 42.465-20.926 16.402-47.287 26.171-75.937 26.171-4.929 0-9.798-.28-14.584-.846 27.059 17.344 59.189 27.464 93.722 27.464"
+                                                    />
+                                                </svg>
+                                            </a>
+                                        </li>
+                                    )}
+                                </ul>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                <div
+                    className="r-content-text"
+                    dangerouslySetInnerHTML={{
+                        __html: item.text && item.text.data,
+                    }}
+                ></div>
+                {/* add files to download */}
+                {files && (
+                    <div className="r-content-files">
+                        {files.map((file, i) => (
+                            <div className="r-content-file">
+                                <a
+                                    key={i}
+                                    href={file.targetUrl}
+                                    className="r-content-file-link"
+                                    rel="nofollow"
+                                >
+                                    <span className="r-content-file-title">{file.title}</span>
+                                    <span className="r-content-file-icon">
+                                        <svg
+                                            width="21"
+                                            height="21"
+                                            viewBox="0 0 24 24"
+                                            fill="none"
+                                            stroke="#8899a4"
+                                            stroke-width="2"
+                                            stroke-linecap="square"
+                                            stroke-linejoin="arcs"
+                                        >
+                                            <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"></path>
+                                        </svg>{" "}
+                                    </span>
+                                </a>
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {/* add gallery */}
+                {gallery && (
+                    <div className="r-content-gallery">
+                        <div className="spotlight-group flexbin r-content-gallery">
+                            {gallery.map((image, i) => (
+                                <a key={i} className="spotlight" href={image.image_full_scale}>
+                                    <img src={image.image_preview_scale} alt="" />
+                                </a>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </article>
+        </div>
+    );
+};
+export default ContactContent;