Marking destroyed monuments

heritagemap · Nov 19, 2020 · f49ef57 · f49ef57
1 parent 219f7b4
commit f49ef57
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
@@ -45,6 +45,21 @@
   line-height: 20px;
 }
 
+.destroyed {
+  color: red;
+  font-weight: bold;
+  margin-bottom: 16px;
+
+  svg {
+    margin: 0 0 -3px 0;
+  }
+
+  span {
+    margin-left: 2px;
+  }
+
+}
+
 .mainInfo {
   display: block;
   margin-block-start: 0;

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -24,12 +24,14 @@ interface SidebarPropsInterface {
 }
 
 interface InfoInterface {
+  knid: string;
+  type: Type;
+  status?: string;
+  precise?: string;
   year: string;
   description: string;
   author: string;
   protection?: 'Ф' | 'Р' | 'М' | 'В';
-  type: Type;
-  knid: string;
   knid_new?: string;
   style?: string;
   wiki?: string;
@@ -108,10 +110,6 @@ const Sidebar = () => {
         <p className={styles.mainInfo}>{info.year}</p>
       )}
 
-      {info?.description && (
-        <p className={styles.mainInfo}>{info?.description}</p>
-      )}
-
       {info?.style && (
         <p className={styles.mainInfo}>Стиль: {info?.style}</p>
       )}
@@ -120,6 +118,25 @@ const Sidebar = () => {
         <p className={styles.mainInfo}>{info?.author}</p>
       )}
 
+      {(info?.description || info?.status === 'destroyed') && (
+        <p className={styles.mainInfo}>
+        {info?.status === 'destroyed' && (
+          <span className={styles.destroyed}>
+            <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M14.5803 8.99878C13.3041 5.61617 8.76023 5.43377 9.85759 0.517379C9.93888 0.152588 9.55683 -0.129296 9.24795 0.06139C6.29726 1.8356 4.1757 5.39232 5.95586 10.0517C6.10218 10.4331 5.66323 10.7896 5.34622 10.5408C3.87494 9.40502 3.7205 7.77175 3.85055 6.60276C3.89932 6.17164 3.34658 5.96438 3.11085 6.32088C2.5581 7.18311 1.99723 8.57595 1.99723 10.6735C2.30612 15.3163 6.15095 16.7423 7.53281 16.9247C9.50806 17.1817 11.6459 16.8086 13.1822 15.3743C14.8729 13.7742 15.4907 11.2207 14.5803 8.99878ZM7.03697 13.169C8.20749 12.8788 8.809 12.0166 8.97157 11.2538C9.23982 10.0683 8.19123 8.90758 8.89842 7.03388C9.16666 8.58424 11.5565 9.55425 11.5565 11.2456C11.6215 13.3431 9.39426 15.1422 7.03697 13.169Z" fill="red"/>
+            </svg>
+
+            <span>Утрачен{info?.description ? '. ' : ''}</span>
+          </span>
+        )}
+
+        {info?.description && (
+          <span>{info?.description}</span>
+        )}
+        </p>
+
+      )}
+
       {status && (
         <div className={styles.info}>
           <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -140,7 +157,6 @@ const Sidebar = () => {
             <path fillRule="evenodd" clipRule="evenodd" d="M3 6.95C3 3.6605 5.68286 1 9 1C12.3171 1 15 3.6605 15 6.95C15 11.4125 9 18 9 18C9 18 3 11.4125 3 6.95ZM9 9C10.1046 9 11 8.10457 11 7C11 5.89543 10.1046 5 9 5C7.89543 5 7 5.89543 7 7C7 8.10457 7.89543 9 9 9Z" fill="black"/>
           </svg>
 
-
           <div className={styles.text}>{address}</div>
         </div>
       )}