node edit and like buttons + actions

src/components/node/NodePanel/index.tsx

@@ -7,9 +7,14 @@ import { NodePanelInner } from '~/components/node/NodePanelInner';
 interface IProps {
   node: INode;
   layout: {};
+
+  can_edit: boolean;
+  can_like: boolean;
+  onEdit: () => void;
+  onLike: () => void;
 }
 
-const NodePanel: FC<IProps> = ({ node, layout }) => {
+const NodePanel: FC<IProps> = ({ node, layout, can_edit, can_like, onEdit, onLike }) => {
   const [stack, setStack] = useState(false);
 
   const ref = useRef(null);
@@ -37,9 +42,25 @@ const NodePanel: FC<IProps> = ({ node, layout }) => {
   return (
     <div className={styles.place} ref={ref}>
       {stack ? (
-        createPortal(<NodePanelInner node={node} stack />, document.body)
+        createPortal(
+          <NodePanelInner
+            node={node}
+            stack
+            onEdit={onEdit}
+            onLike={onLike}
+            can_edit={can_edit}
+            can_like={can_like}
+          />,
+          document.body
+        )
       ) : (
-        <NodePanelInner node={node} />
+        <NodePanelInner
+          node={node}
+          onEdit={onEdit}
+          onLike={onLike}
+          can_edit={can_edit}
+          can_like={can_like}
+        />
       )}
     </div>
   );

src/components/node/NodePanelInner/index.tsx

@@ -9,25 +9,42 @@ import classNames from 'classnames';
 interface IProps {
   node: INode;
   stack?: boolean;
+
+  can_edit: boolean;
+  can_like: boolean;
+  onEdit: () => void;
+  onLike: () => void;
 }
 
-const NodePanelInner: FC<IProps> = ({ node: { title, user }, stack }) => {
+const NodePanelInner: FC<IProps> = ({
+  node: { title, user },
+  stack,
+  can_edit,
+  can_like,
+  onEdit,
+  onLike,
+}) => {
   return (
     <div className={classNames(styles.wrap, { stack })}>
       <div className={styles.content}>
         <Group horizontal className={styles.panel}>
           <Filler>
             <div className={styles.title}>{title || '...'}</div>
-            {user && user.username && <div className={styles.name}>~ {user.username}</div>}
+            {user && user.username && <div className={styles.name}>~{user.username}</div>}
           </Filler>
         </Group>
 
         <div className={styles.buttons}>
-          <Icon icon="edit" size={24} />
-
-          <div className={styles.sep} />
-
-          <Icon icon="heart" size={24} />
+          {can_edit && (
+            <div>
+              <Icon icon="edit" size={24} onClick={onEdit} />
+            </div>
+          )}
+          {can_like && (
+            <div>
+              <Icon icon="heart" size={24} onClick={onLike} />
+            </div>
+          )}
         </div>
       </div>
     </div>

src/components/node/NodePanelInner/styles.scss

@@ -66,22 +66,43 @@
 
   & > * {
     margin: 0 $gap;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      fill: darken(white, 50%);
+      transition: fill 0.25s;
+    }
+
+    &:hover {
+      svg {
+        fill: $red;
+      }
+    }
+
+    &::after {
+      content: ' ';
+      flex: 0 0 6px;
+      height: $gap;
+      width: 6px;
+      border-radius: 4px;
+      background: transparentize(black, 0.7);
+      margin-left: $gap * 2;
+    }
 
     &:first-child {
       margin-left: 0;
     }
+
     &:last-child {
       margin-right: 0;
+      &::after {
+        display: none;
+      }
     }
   }
-  //height: 54px;
-  //border-radius: $radius $radius 0 0;
-  //background: linear-gradient(176deg, #f42a00, #5c1085);
-  //position: absolute;
-  //bottom: 0;
-  //right: 10px;
-  //width: 270px;
-  //display: flex;
 }
 
 .mark {
@@ -102,9 +123,4 @@
 }
 
 .sep {
-  flex: 0 0 6px;
-  height: 6px;
-  width: 6px;
-  border-radius: 4px;
-  background: transparentize(black, 0.7);
 }