Create Post header

NEARBuilders · Jan 30, 2024 · 76bacac · 76bacac
1 parent 85ac5e9
commit 76bacac
Show file tree

Hide file tree

Showing 3 changed files with 238 additions and 149 deletions.
diff --git a/apps/builddao/widget/components/Post.jsx b/apps/builddao/widget/components/Post.jsx
@@ -1,7 +1,5 @@
-const { User, Button } = VM.require("buildhub.near/widget/components") || {
-  User: () => <></>,
-  Button: () => <></>,
-};
+const { Button } =
+  VM.require("buildhub.near/widget/components") || (() => <></>);
 
 const StyledPost = styled.div`
   margin-bottom: 1rem;
@@ -318,16 +316,19 @@ return (
       >
         <div className={`post ${props.reposted ? "reposted" : ""}`}>
           <div className="right d-flex flex-column gap-3">
-            <User
-              accountId={accountId}
-              blockHeight={blockHeight}
-              pinned={pinned}
-              hideMenu={hideMenu}
-              link={link}
-              postType={"post"}
-              flagItem={item}
-              customActions={customActions}
-              toggleModal={toggleModal}
+            <Widget
+              src="buildhub.near/widget/components.post.Header"
+              props={{
+                accountId: accountId,
+                blockHeight: blockHeight,
+                pinned: pinned,
+                hideMenu: hideMenu,
+                link: link,
+                postType: "post",
+                flagItem: item,
+                customActions: customActions,
+                toggleModal: toggleModal,
+              }}
             />
             {fullPostLink ? (
               <a

diff --git a/apps/builddao/widget/components/User.jsx b/apps/builddao/widget/components/User.jsx
@@ -1,43 +1,6 @@
 const { Avatar } =
   VM.require("buildhub.near/widget/components") || (() => <></>);
 
-const Button = styled.div`
-  line-height: 20px;
-  min-height: 20px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: left;
-  background: inherit;
-  color: #6c757d;
-  font-size: 16px;
-  .icon {
-    position: relative;
-    &:before {
-      margin: -8px;
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      border-radius: 50%;
-    }
-  }
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-
-  &:not([disabled]):hover {
-    opacity: 1 !important;
-    color: DeepSkyBlue;
-
-    .icon:before {
-      background: rgba(0, 191, 255, 0.1);
-    }
-  }
-`;
-
 const Wrapper = styled.div`
   color: #fff;
 
@@ -84,18 +47,8 @@ const Wrapper = styled.div`
 `;
 
 const accountId = props.accountId;
-const blockHeight = props.blockHeight;
-const pinned = !!props.pinned;
-const hideMenu = !!props.hideMenu;
 const name = props.name || Social.get(`${accountId}/profile/name`);
-
-const postType = props.postType ?? "post";
-const link = props.link;
 const isPremium = !!props.isPremium;
-const flagItem = props.flagItem;
-const customActions = props.customActions ?? [];
-const showTime = props.showTime ?? true;
-const toggleModal = props.toggleModal;
 
 const Overlay = (props) => (
   <a
@@ -114,94 +67,22 @@ const Overlay = (props) => (
 );
 
 return (
-  <div className="d-flex align-items-center">
-    <Overlay>
-      <div className="d-flex gap-1">
-        <Avatar variant={props.variant} accountId={accountId} />
-        <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
-          <div className="d-flex align-items-center g-1">
-            <p className="m-0">{name || "No-Name Profile"}</p>
-            <div className="flex-shrink-0">
-              <Widget
-                loading={""}
-                src="mob.near/widget/Checkmark"
-                props={{ isPremium, accountId }}
-              />
-            </div>
-          </div>
-          <p className="username">{accountId}</p>
-          {showTime && (
-            <p className="time">
-              {blockHeight === "now" ? (
-                "now"
-              ) : (
-                <a className="text-white" href={link}>
-                  <Widget
-                    loading=""
-                    src="mob.near/widget/TimeAgo"
-                    props={{ blockHeight }}
-                  />
-                </a>
-              )}
-            </p>
-          )}
-        </Wrapper>
-        {pinned && (
-          <span title="Pinned" className="ms-2">
-            <i className="bi bi-pin-angle" />
-          </span>
-        )}
-      </div>
-    </Overlay>
-    {!pinned && !hideMenu && blockHeight !== "now" && (
-      <span className="ms-auto flex-shrink-0">
-        <Button data-bs-toggle="dropdown" aria-expanded="false">
-          <i className="bi bi-three-dots-vertical"></i>
-        </Button>
-        <ul className="dropdown-menu">
-          <li className="dropdown-item">
-            <a
-              className="link-dark text-decoration-none"
-              href={`${link}&raw=true`}
-            >
-              <i className="bi bi-filetype-raw" /> View raw markdown source
-            </a>
-          </li>
-          <li>
+  <Overlay>
+    <div className="d-flex gap-1">
+      <Avatar variant={props.variant} accountId={accountId} />
+      <Wrapper variant={props.variant} className="d-flex gap-1 flex-column">
+        <div className="d-flex align-items-center g-1">
+          <p className="m-0">{name || "No-Name Profile"}</p>
+          <div className="flex-shrink-0">
             <Widget
-              src="mob.near/widget/MainPage.Common.HideAccount"
-              props={{ accountId }}
+              loading={""}
+              src="mob.near/widget/Checkmark"
+              props={{ isPremium, accountId }}
             />
-          </li>
-          {flagItem && (
-            <li>
-              <Widget
-                src="mob.near/widget/MainPage.Common.FlagContent"
-                props={{
-                  item: flagItem,
-                  label: `Flag ${postType} for moderation`,
-                }}
-              />
-            </li>
-          )}
-          {customActions.length > 0 &&
-            customActions.map((action) => (
-              <li key={action.label}>
-                <button
-                  onClick={() =>
-                    action.type === "modal"
-                      ? action.onClick(toggleModal)
-                      : action.onClick(flagItem)
-                  }
-                  className="btn btn-outline-dark dropdown-item"
-                >
-                  <i className={`bi ${action.icon}`}></i>{" "}
-                  <span>{action.label}</span>
-                </button>
-              </li>
-            ))}
-        </ul>
-      </span>
-    )}
-  </div>
+          </div>
+        </div>
+        <p className="username">{accountId}</p>
+      </Wrapper>
+    </div>
+  </Overlay>
 );