Merge pull request #767 from Prop-House/snca-add-winning-props-to-hou…

…se-page Add tab bar to display winning props
prop-house · Jan 24, 2024 · f389350 · f389350
2 parents 72ea617 + c6d2074
commit f389350
Show file tree

Hide file tree

Showing 8 changed files with 255 additions and 111 deletions.
diff --git a/packages/prop-house-webapp/src/components/HousePropCard/HousePropCard.module.css b/packages/prop-house-webapp/src/components/HousePropCard/HousePropCard.module.css
@@ -0,0 +1,46 @@
+.propCard {
+  height: 300px;
+  cursor: pointer;
+  border: 1px solid var(--border-med);
+}
+.propCardHeader {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  color: var(--brand-gray);
+  justify-content: space-between;
+}
+.voteDisplay {
+  display: flex;
+  align-items: center;
+}
+.voteDisplay svg {
+  margin-right: 6px;
+}
+.proposer {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  font-size: 16px;
+}
+.propTitle {
+  margin: 12px 0 6px 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.propImgContainer {
+}
+.propImgContainer img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  min-height: 120px;
+  min-width: 120px;
+  max-height: 140px;
+  border-radius: 6px;
+  outline: 1px solid var(--border-light);
+}
diff --git a/packages/prop-house-webapp/src/components/HousePropCard/index.tsx b/packages/prop-house-webapp/src/components/HousePropCard/index.tsx
@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Proposal } from '@prophouse/sdk-react';
+import Card, { CardBgColor, CardBorderRadius } from '../Card';
+import EthAddress from '../EthAddress';
+import classes from './HousePropCard.module.css';
+import { replaceIpfsGateway } from '../../utils/ipfs';
+import getFirstImageFromProp from '../../utils/getFirstImageFromProp';
+import { MdHowToVote } from 'react-icons/md';
+
+const HousePropCard: React.FC<{ proposal: Proposal }> = ({ proposal }) => {
+  const navigate = useNavigate();
+
+  const [imgUrlFromProp, setImgUrlFromProp] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    let imgUrl;
+    const getImg = async () => {
+      imgUrl = await getFirstImageFromProp(proposal);
+      setImgUrlFromProp(imgUrl);
+    };
+    getImg();
+  }, [proposal]);
+  return (
+    <div onClick={() => navigate(`/${proposal.round}/${proposal.id}`)}>
+      <Card
+        bgColor={CardBgColor.White}
+        borderRadius={CardBorderRadius.ten}
+        classNames={classes.propCard}
+      >
+        <div className={classes.propCardHeader}>
+          <EthAddress address={proposal.proposer} addAvatar className={classes.proposer} />
+          <div className={classes.voteDisplay}>
+            <MdHowToVote />
+            {proposal.votingPower}
+          </div>
+        </div>
+        <h5 className={classes.propTitle}>{proposal.title}</h5>
+
+        {imgUrlFromProp ? (
+          <div className={classes.propImgContainer}>
+            <img
+              src={replaceIpfsGateway(imgUrlFromProp)}
+              crossOrigin="anonymous"
+              alt="propCardImage"
+            />
+          </div>
+        ) : (
+          <p>{proposal.tldr}</p>
+        )}
+      </Card>
+    </div>
+  );
+};
+export default HousePropCard;
diff --git a/packages/prop-house-webapp/src/components/HouseTabBar/HouseTabBar.module.css b/packages/prop-house-webapp/src/components/HouseTabBar/HouseTabBar.module.css
@@ -0,0 +1,47 @@
+.stickyContainer {
+  background: white;
+  top: 0;
+  position: sticky !important;
+  z-index: 1;
+  border-bottom: 1px var(--border-light) solid;
+}
+
+.tabBarContainer {
+  display: flex;
+}
+
+.tabOption {
+  display: flex;
+  gap: 10px;
+  border-bottom: 2px solid transparent;
+  padding-bottom: 12px;
+  margin-right: 20px;
+}
+.tabOption.selected {
+  border-bottom: 2px solid var(--border-dark);
+}
+.tabOption:hover {
+  cursor: pointer;
+  border-bottom: 2px solid var(--border-dark);
+}
+
+.tabOptionName {
+  font-weight: 600;
+  color: var(--brand-gray);
+}
+.tabOptionName.selected,
+.tabOptionName:hover {
+  color: var(--brand-black) !important;
+}
+
+.tabOptionNumber {
+  font-weight: 700;
+  font-size: 14px;
+  border-radius: 6px;
+  padding: 0px 2px;
+  align-self: center;
+  background: var(--border-light);
+  color: var(--brand-gray);
+  min-width: 20px;
+  text-align: center;
+}
diff --git a/packages/prop-house-webapp/src/components/HouseTabBar/index.tsx b/packages/prop-house-webapp/src/components/HouseTabBar/index.tsx
@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import classes from './HouseTabBar.module.css';
+import { Proposal, Round } from '@prophouse/sdk-react';
+
+export enum SelectedTab {
+  Rounds,
+  Props,
+}
+
+const HouseTabBar: React.FC<{
+  rounds: Round[];
+  proposals: Proposal[];
+  selectedTab: SelectedTab;
+  setSelectedTab: React.Dispatch<React.SetStateAction<SelectedTab>>;
+}> = ({ rounds, proposals, selectedTab, setSelectedTab }) => {
+  const propsIsSelected = selectedTab === SelectedTab.Props;
+  const roundsIsSelected = selectedTab === SelectedTab.Rounds;
+  return (
+    <div className={classes.tabBarContainer}>
+      <div
+        className={clsx(classes.tabOption, roundsIsSelected && classes.selected)}
+        onClick={() => setSelectedTab(SelectedTab.Rounds)}
+      >
+        <span className={clsx(classes.tabOptionName, roundsIsSelected && classes.selected)}>
+          Rounds
+        </span>
+        <span className={classes.tabOptionNumber}>{rounds?.length}</span>
+      </div>
+      <div
+        className={clsx(classes.tabOption, propsIsSelected && classes.selected)}
+        onClick={() => setSelectedTab(SelectedTab.Props)}
+      >
+        <span className={clsx(classes.tabOptionName, propsIsSelected && classes.selected)}>
+          Awarded Proposals
+        </span>
+        <span className={classes.tabOptionNumber}>{proposals?.length}</span>
+      </div>
+    </div>
+  );
+};
+
+export default HouseTabBar;
diff --git a/packages/prop-house-webapp/src/components/PropActivityItem/index.tsx b/packages/prop-house-webapp/src/components/PropActivityItem/index.tsx
@@ -20,16 +20,22 @@ const PropActivityItem: React.FC<{ proposal: Proposal }> = ({ proposal }) => {
   }, [proposal]);
   return (
     <div onClick={() => navigate(`/${proposal.round}/${proposal.id}`)}>
-      proposed&nbsp;
-      <span>{proposal.title}</span>
-      {imgUrlFromProp && (
-        <div className={classes.propImgContainer}>
-          <img
-            src={replaceIpfsGateway(imgUrlFromProp)}
-            crossOrigin="anonymous"
-            alt="propCardImage"
-          />
-        </div>
+      {imgUrlFromProp ? (
+        <>
+          <span>{proposal.title}</span>
+          <div className={classes.propImgContainer}>
+            <img
+              src={replaceIpfsGateway(imgUrlFromProp)}
+              crossOrigin="anonymous"
+              alt="propCardImage"
+            />
+          </div>
+        </>
+      ) : (
+        <>
+          proposed&nbsp;
+          <span>{proposal.title}</span>
+        </>
       )}
     </div>
   );

diff --git a/packages/prop-house-webapp/src/pages/House/House.module.css b/packages/prop-house-webapp/src/pages/House/House.module.css
@@ -1,6 +1,5 @@
 .houseContainer {
   background: var(--bg-dark);
-
   min-height: 350px;
   padding: 1rem;
 }
@@ -10,8 +9,7 @@
   top: 0;
   position: sticky !important;
   z-index: 1;
-  padding-top: 12px;
-  border-bottom: 1px solid var(--border-light);
+  border-bottom: 1px var(--border-light) solid;
 }
 
 @media (max-width: 575px) {
@@ -20,6 +18,6 @@
     padding-left: 0 !important;
   }
   .stickyContainer {
-    padding: 12px 0px 8px 0px;
+    padding: 12px 0px 0px 0px;
   }
 }