feat: layout for share button

IQSS · Nov 20, 2024 · 63a307f · 63a307f
1 parent 3285d46
commit 63a307f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/src/sections/collection/Collection.module.scss b/src/sections/collection/Collection.module.scss
@@ -11,10 +11,19 @@
   gap: 10px;
 }
 
-.action-buttons {
+.metrics-actions-container {
   display: flex;
-  justify-content: flex-end;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 1rem;
+
+  .right-content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
 }
 
 .subtext {

diff --git a/src/sections/collection/Collection.tsx b/src/sections/collection/Collection.tsx
@@ -14,6 +14,7 @@ import { CollectionSkeleton } from './CollectionSkeleton'
 import { PageNotFound } from '../page-not-found/PageNotFound'
 import { CreatedAlert } from './CreatedAlert'
 import { PublishCollectionButton } from './publish-collection/PublishCollectionButton'
+import { ShareButton } from './share-button/ShareButton'
 import styles from './Collection.module.scss'
 
 interface CollectionProps {
@@ -47,9 +48,11 @@ export function Collection({
 
   const canUserAddCollection = Boolean(collectionUserPermissions?.canAddCollection)
   const canUserAddDataset = Boolean(collectionUserPermissions?.canAddDataset)
-  const canUserPublishCollection = user && Boolean(collectionUserPermissions?.canPublishCollection)
+  const canUserPublishCollection = Boolean(collectionUserPermissions?.canPublishCollection)
 
   const showAddDataActions = Boolean(user && (canUserAddCollection || canUserAddDataset))
+  const showPublishButton = user && !collection?.isReleased && canUserPublishCollection
+
   const { t } = useTranslation('collection')
 
   if (!isLoading && !collection) {
@@ -71,14 +74,25 @@ export function Collection({
                 {t('publishedAlert')}
               </Alert>
             )}
-            {!collection.isReleased && canUserPublishCollection && (
-              <div className={styles['action-buttons']}>
-                <PublishCollectionButton
-                  repository={collectionRepository}
-                  collectionId={collection.id}
-                />
+
+            <div className={styles['metrics-actions-container']}>
+              <div className={styles.metrics}>Metrics</div>
+              <div className={styles['right-content']}>
+                <div className={styles['contact-share-btns']}>
+                  {/* 👇 Here should go Contact button also */}
+                  {/* <ContactButton /> */}
+
+                  <ShareButton />
+                </div>
+
+                {showPublishButton && (
+                  <PublishCollectionButton
+                    repository={collectionRepository}
+                    collectionId={collection.id}
+                  />
+                )}
               </div>
-            )}
+            </div>
 
             <CollectionItemsPanel
               key={collection.id}