Projects feed

apps/builddao/widget/components/Avatar.jsx

@@ -4,9 +4,9 @@ function Avatar(props) {
   const ImageWrapper = styled.div`
     img {
       width: ${(props) =>
-        props.variant === "mobile" ? "40px" : "52px"} !important;
+        props.variant === "mobile" ? "40px" : props.size ?? "52px"} !important;
       height: ${(props) =>
-        props.variant === "mobile" ? "40px" : "52px"} !important;
+        props.variant === "mobile" ? "40px" : props.size ?? "52px"} !important;
       flex-shrink: 0 !important;
       border-radius: 100px !important;
     }
@@ -21,15 +21,15 @@ function Avatar(props) {
         !props.variant &&
         `
       img {
-        width: 40px !important;
-        height: 40px !important;
+        width: ${props.size ?? "40px"} !important;
+        height: ${props.size ?? "40px"} !important;
       }
     `}
     }
   `;
 
   return (
-    <ImageWrapper variant={props.variant}>
+    <ImageWrapper variant={props.variant} size={props.size} style={props.style}>
       <Widget src="mob.near/widget/ProfileImage" props={{ accountId }} />
     </ImageWrapper>
   );

apps/builddao/widget/components/ProfileImages.jsx

@@ -0,0 +1,57 @@
+const { Avatar } = VM.require("buildhub.near/widget/components") || {
+  Avatar: () => <></>,
+};
+
+const ProfileImages = ({ accountIds }) => {
+  if (accountIds.length < 1) {
+    return "";
+  }
+
+  if (accountIds.length === 1) {
+    return <Avatar accountId={accountIds[0]} size={"24px"} />;
+  }
+
+  if (accountIds.length === 2) {
+    return (
+      <div className="d-flex align-items-center">
+        <Avatar accountId={accountIds[0]} size={"24px"} />
+        <Avatar
+          style={{ marginLeft: "-4px" }}
+          accountId={accountIds[1]}
+          size={"24px"}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="d-flex align-items-center">
+      <Avatar accountId={accountIds[0]} size={"24px"} />
+      <Avatar
+        style={{ marginLeft: "-4px" }}
+        accountId={accountIds[1]}
+        size={"24px"}
+      />
+      <div
+        style={{
+          marginLeft: "-4px",
+          marginTop: "2px",
+          height: "24px",
+          width: "24px",
+          border: "1px solid var(--stroke-color, rgba(255, 255, 255, 0.2))",
+          backgroundColor: "var(--bg-2, #23242b)",
+          borderRadius: "100%",
+          fontSize: "10px",
+          fontWeight: "700",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        +{accountIds.length - 2}
+      </div>
+    </div>
+  );
+};
+
+return { ProfileImages };

apps/builddao/widget/components/modals/FilterProjects.jsx

@@ -0,0 +1,30 @@
+const { Modal } = VM.require("buildhub.near/widget/components") || {
+  Modal: () => <></>,
+};
+
+const showModal = props.showModal;
+const toggleModal = props.toggleModal;
+const toggle = props.toggle;
+const bootstrapTheme = props.bootstrapTheme || "dark";
+const filters = props.filters;
+const setFilters = props.setFilters;
+
+return (
+  <Modal
+    open={showModal}
+    title={"Project Filters"}
+    onOpenChange={toggleModal}
+    toggle={toggle}
+  >
+    <Widget
+      src="buildhub.near/widget/components.modals.projects.Filters"
+      loading=""
+      props={{
+        bootstrapTheme,
+        toggleModal,
+        filters,
+        setFilters,
+      }}
+    />
+  </Modal>
+);

apps/builddao/widget/components/modals/projects/Filters.jsx

@@ -0,0 +1,69 @@
+const { Button } = VM.require("buildhub.near/widget/components") || {
+  Button: () => <></>,
+};
+
+const [teamSize, setTeamSize] = useState(props.filters.teamSize ?? "");
+const [tags, setTags] = useState(props.filters.tags ?? []);
+
+const handleTags = (tags) => {
+  let filtered = tags.map((tag) => (tag.customOption ? tag.label : tag));
+  setTags(filtered);
+};
+
+return (
+  <div className="d-flex flex-column gap-3">
+    <div className="d-flex flex-column gap-3" key={"team-sizes"}>
+      <label>Team Size</label>
+      <div className="d-flex align-items-center gap-2 flex-wrap">
+        <select
+          value={teamSize}
+          onChange={(e) => setTeamSize(e.target.value)}
+          className="form-select"
+        >
+          <option selected disabled value="">
+            Select Team Size
+          </option>
+          <option value="1-10">1-10</option>
+          <option value="10-50">10-50</option>
+          <option value="50-100">50-100</option>
+          <option value="100+">100+</option>
+        </select>
+      </div>
+    </div>
+    <div className="form-group">
+      <label className="mb-3">Tags</label>
+      <Typeahead
+        multiple
+        options={["Community", "Open Source", "Weekly", "DAO"]}
+        allowNew
+        placeholder="Start Typing"
+        selected={tags}
+        onChange={(e) => handleTags(e)}
+      />
+    </div>
+    <div className="d-flex align-items-center justify-content-end gap-2">
+      <Button
+        variant="outline"
+        onClick={() => {
+          setTeamSize("");
+          setTags([]);
+        }}
+      >
+        Clear Filters
+      </Button>
+      <Button
+        variant="primary"
+        onClick={() => {
+          props.setFilters({
+            ...filters,
+            tags: tags,
+            teamSize: teamSize,
+          });
+          props.toggleModal();
+        }}
+      >
+        Filter
+      </Button>
+    </div>
+  </div>
+);

apps/builddao/widget/components/project/Card.jsx

@@ -0,0 +1,72 @@
+const { Avatar, Hashtag, Button } = VM.require(
+  "buildhub.near/widget/components",
+) || {
+  Hashtag: () => <></>,
+  Avatar: () => <></>,
+  Button: () => <></>,
+};
+
+const { ProfileImages } = VM.require(
+  "buildhub.near/widget/components.ProfileImages",
+) || {
+  ProfileImages: () => <></>,
+};
+
+const Card = styled.div`
+  border-radius: 16px;
+  background: var(--bg-2, #23242b);
+
+  display: flex;
+  padding: 24px 29px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+
+  color: var(--text-color, #fff);
+
+  .info {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+
+    h4 {
+      font-size: 16px;
+      font-weight: 700;
+      margin: 0;
+    }
+
+    span {
+      color: var(--white-50, #b0b0b0);
+      font-size: 13px;
+      font-weight: 700;
+    }
+  }
+`;
+
+const ProjectCard = ({ title, tags, people, accountId }) => {
+  return (
+    <Card>
+      <Avatar accountId={accountId} />
+      <div className="info">
+        <h4>{title}</h4>
+        <span>@{accountId}</span>
+      </div>
+      <div className="d-flex align-items-center gap-2">
+        {tags.map((tag) => (
+          <Hashtag>
+            <span className="fw-bold">{tag}</span>
+          </Hashtag>
+        ))}
+      </div>
+      <div>
+        <ProfileImages accountIds={people} />
+      </div>
+      <Button className="align-self-stretch" variant="outline">
+        Open
+      </Button>
+    </Card>
+  );
+};
+
+return { ProjectCard };

apps/builddao/widget/config/app.jsx

@@ -52,5 +52,13 @@ return {
       },
       hide: true,
     },
+    projects: {
+      path: "buildhub.near/widget/page.project-feed",
+      blockHeight: "final",
+      init: {
+        name: "Project Feed",
+      },
+      hide: true,
+    },
   },
 };