Add preview

Author: moysa

src/pages/ReadsEditor.module.scss

@@ -472,7 +472,7 @@
     font-size: 16px;
     font-weight: 400;
     line-height: 22px;
-    border-radius: 12px;
+    border-radius: 0;
     padding: 0;
     width: 100%;
     margin: 0;
@@ -488,6 +488,7 @@
   .tagList {
     display: flex;
     gap: 4px;
+    flex-wrap: wrap;
 
     .tag {
       display: inline-block;
@@ -566,7 +567,7 @@
 .titleImage {
   width: 100%;
   max-height: 598px;
-
+  border-radius: 12px;
 }
 
 .accordionTrigger {
@@ -606,9 +607,9 @@
 .sectionButton {
   background: none;
   color: var(--text-secondary);
-  font-size: 18px;
+  font-size: 14px;
   font-weight: 600;
-  line-height: 20px;
+  line-height: 16px;
   border: none;
 
   display: flex;
@@ -619,4 +620,54 @@
   &.open {
     color: var(--text-primary);
   }
+
+  span {
+    margin-right: 4px;
+  }
+}
+
+.metadataPreview {
+  padding-left: 8px;
+  .titlePreview {
+    color: var(--text-primary);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 20px;
+  }
+
+  .titleImagePreview {
+    max-height: 200px;
+    border-radius: 12px;
+  }
+
+  .summaryPreview {
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 26px;
+  }
+
+  .tagPreview {
+    width: 200px;
+    .tagList {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+
+      .tag {
+        display: inline-block;
+        color: var(--text-secondary);
+        font-size: 8px;
+        font-weight: 400;
+        line-height: 10px;
+        background-color: var(--background-input);
+        padding: 6px 10px;
+        border-radius: 12px;
+        width: fit-content;
+        margin-block: 2px;
+        margin-right: 4px;
+        cursor: pointer;
+      }
+    }
+  }
 }

src/pages/ReadsEditor.tsx

@@ -331,9 +331,48 @@ const ReadsEditor: Component = () => {
               setAccordionSection((as) => [...as, 'metadata']);
             }}
           >
+            <Show
+              when={accordionSection().includes('metadata')}
+              fallback={<span>Show</span>}
+            >
+              <span>Hide</span>
+            </Show>
             Metadata
           </button>
 
+          <Show when={!accordionSection().includes('metadata')}>
+            <div class={styles.metadataPreview}>
+              <Show when={article.title.length > 0}>
+                <div class={styles.titlePreview}>
+                  {article.title}
+                </div>
+              </Show>
+
+              <Show when={article.image.length > 0}>
+                <img
+                  class={styles.titleImagePreview}
+                  src={article.image}
+                />
+              </Show>
+
+              <Show when={article.summary.length > 0}>
+                <div class={styles.summaryPreview}>
+                  {article.summary}
+                </div>
+              </Show>
+
+              <Show when={article.tags.length > 0}>
+                <div class={styles.tagPreview}>
+                  <div class={styles.tagList}>
+                    <For each={article.tags}>
+                      {tag => <div class={styles.tag}>{tag}</div>}
+                    </For>
+                  </div>
+                </div>
+              </Show>
+            </div>
+          </Show>
+
           <button
             class={`${styles.sectionButton} ${accordionSection().includes('content') ? styles.open : ''}`}
             onClick={() => {
@@ -345,6 +384,12 @@ const ReadsEditor: Component = () => {
               setAccordionSection((as) => [...as, 'content']);
             }}
           >
+            <Show
+              when={accordionSection().includes('content')}
+              fallback={<span>Show</span>}
+            >
+              <span>Hide</span>
+            </Show>
             Content
           </button>
         </div>