@@ -183,14 +187,10 @@ return (
},
]}
Item={(p) => (
- }
- src="/*__@appAccount__*//widget/Post"
- props={{
- accountId: p.accountId,
- blockHeight: p.blockHeight,
- noBorder: true,
- }}
+
)}
/>
diff --git a/apps/builddao/widget/Post.jsx b/apps/builddao/widget/Post.jsx
index b88e8bcc..94901be7 100644
--- a/apps/builddao/widget/Post.jsx
+++ b/apps/builddao/widget/Post.jsx
@@ -16,6 +16,7 @@ const groupId = props.groupId ?? content.groupId;
const indexKey = props.indexKey;
const permissions = props.permissions;
const fullPostLink = props.fullPostLink;
+const postPage = props.postPage ?? "mob.near/widget/MainPage.N.Post.Page";
const notifyAccountId = accountId;
const item = {
@@ -27,7 +28,7 @@ const item = {
const link =
props.link ??
props.fullPostLink ??
- `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+ `/${postPage}?accountId=${accountId}&blockHeight=${blockHeight}`;
const StyledPost = styled.div`
margin-bottom: 1rem;
diff --git a/apps/builddao/widget/Resources.jsx b/apps/builddao/widget/Resources.jsx
index 625f637a..417cd3d8 100644
--- a/apps/builddao/widget/Resources.jsx
+++ b/apps/builddao/widget/Resources.jsx
@@ -23,7 +23,6 @@ const fetchResources = () => {
const res = fetch(
"https://raw.githubusercontent.com/itexpert120/buildhub-resources/main/resources.json"
);
-
return JSON.parse(res.body);
};
@@ -33,6 +32,8 @@ if (!resources) {
return Loading...
;
}
+console.log(resources);
+
const [currentResource, setCurrentResource] = useState(resources[0].name);
function getMdLinkByName(nameToFind) {
diff --git a/apps/builddao/widget/components.jsx b/apps/builddao/widget/components.jsx
new file mode 100644
index 00000000..38499bad
--- /dev/null
+++ b/apps/builddao/widget/components.jsx
@@ -0,0 +1,59 @@
+const { Button } = VM.require("buildhub.near/widget/components.Button");
+const { ProgressState } = VM.require(
+ "buildhub.near/widget/components.ProgressState"
+);
+const { Step } = VM.require("buildhub.near/widget/components.Step");
+const { InputField } = VM.require("buildhub.near/widget/components.InputField");
+const { UploadField } = VM.require(
+ "buildhub.near/widget/components.UploadField"
+);
+const { TextBox } = VM.require("buildhub.near/widget/components.TextBox");
+const { TextEditor } = VM.require("buildhub.near/widget/components.TextEditor");
+const { Checkbox } = VM.require("buildhub.near/widget/components.Checkbox");
+const { Avatar } = VM.require("buildhub.near/widget/components.Avatar");
+
+function Pagination({
+ totalPages,
+ maxVisiblePages,
+ onPageClick,
+ selectedPage,
+}) {
+ return (
+
+ );
+}
+
+function Post(props) {
+ return (
+
+ );
+}
+
+function User(props) {
+ return (
+
+ );
+}
+
+return {
+ Button,
+ Pagination,
+ Post,
+ ProgressState,
+ Step,
+ InputField,
+ UploadField,
+ TextBox,
+ TextEditor,
+ Checkbox,
+ Avatar,
+ User,
+};
diff --git a/apps/builddao/widget/components/Avatar.jsx b/apps/builddao/widget/components/Avatar.jsx
new file mode 100644
index 00000000..536eb972
--- /dev/null
+++ b/apps/builddao/widget/components/Avatar.jsx
@@ -0,0 +1,41 @@
+
+function Avatar(props) {
+ const accountId = props.accountId ?? context.accountId;
+
+ const ImageWrapper = styled.div`
+ img {
+ width: ${(props) =>
+ props.variant === "mobile" ? "40px" : "52px"} !important;
+ height: ${(props) =>
+ props.variant === "mobile" ? "40px" : "52px"} !important;
+ flex-shrink: 0 !important;
+ border-radius: 100px !important;
+ background: lightgray 50% / cover no-repeat !important;
+ }
+
+ .profile-image {
+ width: auto !important;
+ height: auto !important;
+ }
+
+ @media screen and (max-width: 768px) {
+ ${(props) =>
+ !props.variant &&
+ `
+ img {
+ width: 40px !important;
+ height: 40px !important;
+ }
+ `}
+ }
+`;
+
+
+ return (
+
+
+
+ );
+}
+
+return { Avatar };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/Button.jsx b/apps/builddao/widget/components/Button.jsx
new file mode 100644
index 00000000..885bfd4d
--- /dev/null
+++ b/apps/builddao/widget/components/Button.jsx
@@ -0,0 +1,80 @@
+const StyledButton = styled.button`
+ all: unset;
+ display: inline-flex;
+ padding: 10px 20px;
+ justify-content: center;
+ align-items: center;
+ gap: 4px;
+ border-radius: 8px;
+ font: 500 14px / normal;
+ transition: all 300ms;
+
+ ${(props) =>
+ props.type === "icon" &&
+ `
+ display: flex;
+ width: 40px;
+ height: 40px;
+ padding: 5px;
+ flex-shrink: 0;
+ border-radius: 50%;
+ `}
+
+ /* Colors based on variant prop */
+ background: ${(props) => {
+ switch (props.variant) {
+ case "primary":
+ return "#FFAF51";
+ case "outline":
+ return "transparent";
+ default:
+ return "#23242B";
+ }
+ }};
+
+ color: ${(props) => {
+ switch (props.variant) {
+ case "primary":
+ return "#000";
+ case "outline":
+ return "#fff";
+ default:
+ return "#CDD0D5";
+ }
+ }};
+
+ border: ${(props) =>
+ props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
+
+ /* Hover states */
+ &:hover {
+ background: ${(props) => {
+ switch (props.variant) {
+ case "primary":
+ return "#e49b48";
+ case "outline":
+ return "rgba(255, 255, 255, 0.20)";
+ default:
+ return "#17181c";
+ }
+ }};
+ }
+`;
+
+function Button({ id, children, variant, type, onClick, className, style }) {
+ return (
+
+ {children}
+
+ );
+}
+
+return { Button };
diff --git a/apps/builddao/widget/components/Checkbox.jsx b/apps/builddao/widget/components/Checkbox.jsx
new file mode 100644
index 00000000..27387079
--- /dev/null
+++ b/apps/builddao/widget/components/Checkbox.jsx
@@ -0,0 +1,34 @@
+const CheckboxInput = styled.input`
+ display: none;
+`;
+
+const CheckboxLabel = styled.label`
+ display: inline-flex;
+ padding: 12px;
+ align-items: center;
+ gap: 8px;
+
+ color: #fff;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 170%; /* 27.2px */
+`;
+
+function Checkbox({ value, onChange, label }) {
+ return (
+
+
+
+ {value ? (
+
+ ) : (
+
+ )}
+ {label}
+
+
+ );
+}
+
+return { Checkbox };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/InputField.jsx b/apps/builddao/widget/components/InputField.jsx
new file mode 100644
index 00000000..ab6fcff0
--- /dev/null
+++ b/apps/builddao/widget/components/InputField.jsx
@@ -0,0 +1,65 @@
+const InputContainer = styled.div`
+ display: inline-flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+`;
+
+const Label = styled.label`
+ color: var(--White-100, #fff);
+
+ /* Body/16px */
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 170%; /* 27.2px */
+`;
+
+const Input = styled.input`
+ display: flex;
+ max-width: ${(props) => props.maxWidth ?? "390px"};
+ width: 100%;
+ padding: 16px 12px;
+ align-items: flex-start;
+ gap: 10px;
+
+ border-radius: 8px;
+ border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+ background: var(--Bg-1, #0b0c14);
+
+ flex: 1 0 0;
+
+ color: var(--White-50, #cdd0d5);
+
+ /* Body/16px */
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 170%; /* 27.2px */
+`;
+
+function InputField({
+ type,
+ label,
+ key,
+ placeholder,
+ value,
+ onChange,
+ maxWidth,
+}) {
+ return (
+
+ {label && }
+
+
+ );
+}
+
+return { InputField };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/Library.jsx b/apps/builddao/widget/components/Library.jsx
new file mode 100644
index 00000000..46c19ab4
--- /dev/null
+++ b/apps/builddao/widget/components/Library.jsx
@@ -0,0 +1,706 @@
+const {
+ Button,
+ Pagination,
+ ProgressState,
+ Step,
+ Post,
+ InputField,
+ UploadField,
+ TextBox,
+ TextEditor,
+ User,
+ Avatar,
+ Checkbox,
+} = VM.require("buildhub.near/widget/components");
+
+// states
+const [checked, setChecked] = useState(false);
+
+const ButtonPreview = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ embedCode: `
+ const { Step } = VM.require("buildhub.near/widget/components");
+
+ return (
+
+
+
+
+
+ );`,
+ },
+ {
+ name: "Input Field",
+ category: "Fields",
+ widgetSrc: "buildhub.near/widget/components",
+ description: "Input field for text input",
+ requiredProps: {
+ value: "Current Value of input",
+ onChange: "Callback function to handle input change",
+ },
+ optionalProps: {
+ label: "Label for input",
+ type: "Type of input field",
+ key: "Key for input field",
+ placeholder: "Placeholder text",
+ maxWidth: "Max width for input field",
+ },
+ preview: (
+ <>
+
+
+
+
+
+ ),
+ embedCode: `
+ const { InputField } = VM.require("buildhub.near/widget/components");
+
+ const [value, setValue] = useState("");
+ const [password, setPassword] = useState("");
+
+ return (
+
+ setValue(e. target.value)}
+ />
+ setPassword(e.target.value)}
+ />
+
+ );`,
+ },
+ {
+ name: "Checkbox",
+ category: "Fields",
+ widgetSrc: "buildhub.near/widget/components",
+ description: "Checkbox input for toggles",
+ requiredProps: {
+ value: "Current Value of checkbox",
+ onChange: "Callback function to handle input change",
+ },
+ optionalProps: {
+ label: "Label for checkbox",
+ },
+ preview: (
+ <>
+
+
+
+
+ ),
+ embedCode: `
+ const { Checkbox } = VM.require("buildhub.near/widget/components");
+
+ const [checked, setChecked] = useState(false);
+
+ return (
+
+ setChecked(!checked)}
+ />
+
+ );`,
+ },
+ {
+ name: "Textbox",
+ category: "Fields",
+ widgetSrc: "buildhub.near/widget/components",
+ description: "Textbox for text input",
+ requiredProps: {
+ value: "Current Value of text box",
+ onChange: "Callback function to handle input change",
+ },
+ optionalProps: {
+ label: "Label for text box",
+ },
+ preview: (
+ <>
+
+
+ ),
+ embedCode: `
+ const { TextBox } = VM.require("buildhub.near/widget/components");
+
+ const [value, setValue] = useState("");
+
+ return (
+
+ setValue(e.target.value)}
+ placeholder={"Placeholder"}
+ />
+
+ );`,
+ },
+ {
+ name: "Text Editor",
+ category: "Fields",
+ widgetSrc: "buildhub.near/widget/components",
+ description: "Text editor for markdown input",
+ requiredProps: {
+ value: "Current Value of checkbox",
+ onChange: "Callback function to handle input change",
+ },
+ optionalProps: {
+ maxWidth: "Max width of text editor",
+ },
+ preview: (
+ <>
+
+
+ ),
+ embedCode: `
+ const { TextEditor } = VM.require("buildhub.near/widget/components");
+
+ const [value, setValue] = useState("");
+
+ return (
+
+ setValue(e.target.value)}
+ />
+
+ );`,
+ },
+ {
+ name: "Upload Field",
+ category: "Fields",
+ widgetSrc: "buildhub.near/widget/components",
+ description: "Component for file uploads",
+ optionalProps: {
+ background: "Background color of upload filed (default true)",
+ },
+ preview: (
+
+
+
+
+ ),
+ embedCode: `
+ const { UploadField } = VM.require("buildhub.near/widget/components");
+
+ return (
+
+
+
+
+ );`,
+ },
+ {
+ name: "Post",
+ category: "Modals",
+ widgetSrc: "buildhub.near/widget/components",
+ description: "Post preview component",
+ requiredProps: {
+ accountId: "AccountId of post creator",
+ blockHeight: "Block height of post",
+ },
+ optionalProps: {
+ hideBorder: "Hide bottom border",
+ pinned: "Toggle pinned post",
+ hideMenu: "Hide menu",
+ hideButtons: "Hide bottom buttons",
+ content: "Content to be shown",
+ subscribe: "",
+ raw: "Show raw MD",
+ groupId: "Group ID for post",
+ indexKey: "Index key for post",
+ permissions: "Permissions for post",
+ fullPostLink: "Link to full post",
+ },
+ preview: (
+
+ ),
+ embedCode: `
+ const { Post } = VM.require("buildhub.near/widget/components");
+
+ return (
+
+ );`,
+ },
+ {
+ name: "User",
+ category: "Avatars/Users",
+ widgetSrc: "buildhub.near/widget/components",
+ description: "User component for user profile",
+ requiredProps: {
+ accountId: "AccountId of post creator",
+ blockHeight: "Block height of post",
+ },
+ optionalProps: {
+ variant: "Variant of user component (desktop, mobile)",
+ pinned: "Toggle pinned post",
+ hideMenu: "Hide menu",
+ postType: "Post type",
+ link: "Post link",
+ isPremium: "Show badge for premium users",
+ },
+ preview: (
+
+
+
+
+ ),
+ embedCode: `
+ const { User } = VM.require("buildhub.near/widget/components");
+
+ return (
+
+
+
+
+ );`,
+ },
+ {
+ name: "Avatar",
+ category: "Avatars/Users",
+ widgetSrc: "buildhub.near/widget/components",
+ description: "Show user avatar",
+ requiredProps: {
+ accountId: "AccountId of post creator",
+ },
+ optionalProps: {
+ variant: "Variant of user component (desktop, mobile)",
+ },
+ preview: (
+
+ ),
+ embedCode: `
+ const { Avatar } = VM.require("buildhub.near/widget/components");
+
+ return (
+
+ );`,
+ },
+];
+
+const renderProps = (props, optional) => {
+ return Object.entries(props || {}).map(([key, desc]) => {
+ return (
+
+ |
+
+ {key}
+
+ |
+
+
+ |
+
+ );
+ });
+};
+
+const renderComponent = (component, index) => {
+ const id = component.name.toLowerCase().replace(" ", "-");
+ return (
+
+
+
+ {component.name}
+
+
{component.description}
+
Preview
+ {component.preview}
+
Component
+
+
Props
+
+
+
+ | Key |
+ Description |
+
+
+
+ {renderProps(component.requiredProps)}
+ {renderProps(component.optionalProps, true)}
+
+
+
Example
+
+
+
+ {c.category}
+
+ );
+ }
+ const id = c.name.toLowerCase().replaceAll(" ", "-");
+ res.push(
+
+ );
+ return res;
+};
+
+const Grid = styled.div`
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+
+ .main {
+ grid-column: span 4 / span 4;
+ }
+
+ .aside {
+ grid-column: span 1 / span 1;
+ }
+
+ @media screen and (max-width: 768px) {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+`;
+
+return (
+
+
+ {components.map((component, index) => renderMenuItem(component, index))}
+
+
+ {components.map((component, index) => renderComponent(component, index))}
+
+
+);
diff --git a/apps/builddao/widget/components/Pagination.jsx b/apps/builddao/widget/components/Pagination.jsx
new file mode 100644
index 00000000..4196eb2a
--- /dev/null
+++ b/apps/builddao/widget/components/Pagination.jsx
@@ -0,0 +1,97 @@
+const totalPages = props.totalPages ?? 12; // Assume you have 12 pages
+const maxVisiblePages = props.maxVisiblePages ?? 4;
+const onPageClick = props.onPageClick
+ ? props.onPageClick
+ : () => console.log("clicked");
+const pagesToShow = Math.min(totalPages, maxVisiblePages);
+const [selectedPage, setSelectedPage] = useState(props.selectedPage ?? 11);
+const totalPageSets = Math.ceil(totalPages / maxVisiblePages);
+const [currentPageSet, setCurrentPageSet] = useState(totalPageSets);
+
+const Pagination = styled.div`
+ display: flex;
+ gap: 12px;
+
+ div {
+ display: flex;
+ height: 40px;
+ min-width: 40px;
+ padding: 12px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ border-radius: 8px;
+ color: var(--White-100, #fff);
+ transition: all 300ms;
+ cursor: pointer;
+
+ /* Other/Button_text */
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+
+ &.selected,
+ &:hover {
+ background-color: #23242b;
+ }
+
+ &.arrow {
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ }
+
+ &.disabled {
+ cursor: not-allowed;
+ }
+ }
+`;
+
+const handlePageClick = (pageNumber) => {
+ onPageClick(pageNumber);
+};
+
+const handleArrowClick = (direction) => {
+ if (direction === "left") {
+ setCurrentPageSet(Math.max(currentPageSet - 1, 1));
+ } else {
+ setCurrentPageSet(
+ Math.min(currentPageSet + 1, Math.ceil(totalPages / maxVisiblePages))
+ );
+ }
+};
+
+const getPageNumber = (index) =>
+ (currentPageSet - 1) * maxVisiblePages + index + 1;
+
+return (
+
+ handleArrowClick("left")}
+ >
+
+
+ {Array.from({ length: pagesToShow }).map((_, index) => {
+ const pageNumber = getPageNumber(index);
+ return (
+ handlePageClick(pageNumber)}
+ >
+ {pageNumber}
+
+ );
+ })}
+ handleArrowClick("right")}
+ >
+
+
+
+);
diff --git a/apps/builddao/widget/components/Post.jsx b/apps/builddao/widget/components/Post.jsx
new file mode 100644
index 00000000..f8402f4c
--- /dev/null
+++ b/apps/builddao/widget/components/Post.jsx
@@ -0,0 +1,408 @@
+const { User, BookmarkButton } = VM.require("buildhub.near/widget/components");
+
+const StyledPost = styled.div`
+ margin-bottom: 1rem;
+ .post {
+ border-radius: 16px;
+ border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+ color: #b6b6b8;
+ padding: 24px !important;
+ background-color: #23242b;
+ transition: all 300ms;
+
+ &:hover {
+ background-color: #1c1f33 !important;
+ .expand-post {
+ background-image: linear-gradient(
+ to bottom,
+ rgba(28, 31, 51, 0),
+ rgba(28, 31, 51, 1) 25%
+ ) !important;
+ }
+ }
+
+ .post-header {
+ span,
+ .text-muted {
+ color: #fff !important;
+ }
+ }
+
+ .buttons {
+ border-top: 1px solid #3c3d43;
+ padding: 0.5rem;
+ }
+
+ .expand-post {
+ background-image: linear-gradient(
+ to bottom,
+ rgba(35, 36, 43, 0),
+ rgba(35, 36, 43, 1) 25%
+ ) !important;
+ }
+ }
+
+ .dropdown-menu {
+ background-color: #0b0c14 !important;
+ color: #fff !important;
+
+ li.dropdown-item {
+ color: #fff !important;
+ &:hover {
+ a {
+ color: #0b0c14 !important;
+ }
+ }
+ }
+
+ .link-dark,
+ .dropdown-item {
+ color: #fff !important;
+
+ &:hover {
+ color: #0b0c14 !important;
+
+ span {
+ color: #0b0c14 !important;
+ }
+ }
+ }
+ }
+
+ textarea {
+ color: #b6b6b8 !important;
+ }
+`;
+
+const Wrapper = styled.div`
+ margin: 0 -12px;
+ line-height: normal;
+
+ .post {
+ position: relative;
+ padding: 12px;
+ padding-bottom: 4px;
+ display: flex;
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-size: 16px !important;
+ }
+ @media (max-width: 767px) {
+ font-size: 15px !important;
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ font-size: 15px !important;
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ strong,
+ b {
+ font-weight: 500 !important;
+ }
+ ol,
+ ul,
+ dl {
+ margin-bottom: 0.5rem;
+ white-space: inherit;
+ }
+ p {
+ margin-bottom: 0.5rem;
+ }
+ hr {
+ display: none;
+ }
+ img {
+ border-radius: var(--bs-border-radius-lg);
+ max-height: 40em;
+ }
+ th {
+ min-width: 5em;
+ }
+
+ .table > :not(caption) > * > * {
+ padding: 0.3rem;
+ }
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.03);
+ .expand-post {
+ background-image: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 0),
+ rgba(247.35, 247.35, 247.35, 1) 25%
+ );
+ }
+ }
+
+ .post-header {
+ margin: 4px 0;
+ }
+ }
+
+ .post:not(:last-child):before {
+ content: "";
+ position: absolute;
+ left: 30px;
+ top: 56px;
+ bottom: 0;
+ width: 2px;
+ background-color: #ddd;
+ z-index: -1;
+ }
+
+ .post:not(:first-child):after {
+ content: "";
+ position: absolute;
+ left: 30px;
+ top: 0;
+ width: 2px;
+ height: 8px;
+ background-color: #ddd;
+ z-index: -1;
+ }
+
+ .left {
+ margin-right: 12px;
+ min-width: 40px;
+ width: 40px;
+ overflow: hidden;
+ }
+ .right {
+ margin-top: -4px;
+ flex-grow: 1;
+ min-width: 0;
+ }
+
+ .buttons-placeholder {
+ padding-bottom: 10px;
+ }
+
+ .buttons {
+ margin-top: 10px;
+ margin-bottom: 6px;
+ column-gap: 4px;
+ color: #888;
+ }
+
+ .reposted {
+ padding-top: 30px;
+ }
+`;
+
+const RepostWidgetDesktop = styled.div`
+ @media screen and (max-width: 768px) {
+ display: none;
+ }
+`;
+
+const RepostWidgetMobile = styled.div`
+ display: none;
+ @media screen and (max-width: 768px) {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ }
+`;
+const accountId = props.accountId;
+if (!accountId) {
+ return "No accountId";
+}
+const blockHeight =
+ props.blockHeight === "now" ? "now" : parseInt(props.blockHeight);
+const pinned = !!props.pinned;
+const hideMenu = !!props.hideMenu;
+const hideButtons = !!props.hideButtons;
+const content =
+ props.content ??
+ JSON.parse(Social.get(`${accountId}/post/main`, blockHeight) ?? "null");
+const subscribe = !!props.subscribe;
+const raw = !!props.raw;
+const groupId = props.groupId ?? content.groupId;
+const indexKey = props.indexKey;
+const permissions = props.permissions;
+const fullPostLink = props.fullPostLink;
+
+const notifyAccountId = accountId;
+const item = {
+ type: "social",
+ path: `${accountId}/post/main`,
+ blockHeight,
+};
+
+const link =
+ props.link ??
+ props.fullPostLink ??
+ `/mob.near/widget/MainPage.N.Post.Page?accountId=${accountId}&blockHeight=${blockHeight}`;
+
+const contentWidget = (
+ <>
+
+ }
+ src="buildhub.near/widget/components.post.Content"
+ props={{
+ content,
+ raw,
+ truncateContent: props.truncateContent,
+ noEmbed: props.noEmbed,
+ }}
+ />
+
+
+ Repost Feed
+
+
+);
+
+return (
+
+
+
+
+
+ {fullPostLink ? (
+
+ {contentWidget}
+
+ ) : (
+ contentWidget
+ )}
+ {props.customButtons ? (
+ props.customButtons
+ ) : !pinned && !hideButtons && blockHeight !== "now" ? (
+
+ State.update({ showReply: !state.showReply }),
+ }}
+ />
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+ State.update({ showReply: false }),
+ }}
+ />
+
+ )}
+ {props.customComments
+ ? props.customComments
+ : !props.hideComments && (
+
+
+
+ )}
+
+
+);
diff --git a/apps/builddao/widget/components/ProgressState.jsx b/apps/builddao/widget/components/ProgressState.jsx
new file mode 100644
index 00000000..e96fe0ba
--- /dev/null
+++ b/apps/builddao/widget/components/ProgressState.jsx
@@ -0,0 +1,69 @@
+
+const Progress = styled.div`
+ display: flex;
+ width: 40px;
+ height: 40px;
+ padding: 12px;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+
+ border-radius: 50%;
+ border: ${(props) => {
+ switch (props.status) {
+ case "focused":
+ return "1px solid var(--Yellow, #FFAF51)";
+ case "error":
+ return "1px solid var(--System-Red, #FD2A5C)";
+ case "completed":
+ return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+ default:
+ return "1px solid var(--Stroke-color, rgba(255, 255, 255, 0.20))";
+ }
+ }};
+
+ background: ${(props) => {
+ switch (props.status) {
+ case "focused":
+ return "#2f2619";
+ case "error":
+ return "#2f101f";
+ case "completed":
+ return "#FFAF51";
+ default:
+ return "#23242B";
+ }
+ }};
+
+ color: ${(props) => {
+ switch (props.status) {
+ case "focused":
+ return "#fff";
+ case "error":
+ return "#FD2A5C";
+ case "completed":
+ return "#000";
+ default:
+ return "#fff";
+ }
+ }};
+`;
+
+function ProgressState({ children, status }) {
+ return (
+
+ );
+}
+
+return { ProgressState };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/Step.jsx b/apps/builddao/widget/components/Step.jsx
new file mode 100644
index 00000000..fb2b59bb
--- /dev/null
+++ b/apps/builddao/widget/components/Step.jsx
@@ -0,0 +1,55 @@
+const { ProgressState } = VM.require("buildhub.near/widget/components.ProgressState");
+
+const StepContainer = styled.div`
+ position: relative;
+
+ &::before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ height: 1px;
+ background: #000; /* Change color as needed */
+ background-image: repeating-linear-gradient(
+ 90deg,
+ #3c3d43,
+ #3c3d43 2px,
+ transparent 2px,
+ transparent 4px
+ );
+ transform: translateY(-50%);
+ z-index: -1;
+ }
+ `;
+
+function Step(props) {
+ const totalSteps = props.totalSteps ?? 5;
+ const currentStep = props.currentStep ?? 3;
+ const currentStatus = props.currentStatus ? props.currentStatus : "focused";
+
+ return (
+
+ {Array.from({ length: totalSteps }).map((_, i) => (
+ i + 1
+ ? "completed"
+ : "default"
+ }
+ >
+ {i + 1}
+
+ ))}
+
+ );
+}
+
+return { Step };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/TextBox.jsx b/apps/builddao/widget/components/TextBox.jsx
new file mode 100644
index 00000000..66113c3c
--- /dev/null
+++ b/apps/builddao/widget/components/TextBox.jsx
@@ -0,0 +1,45 @@
+const Label = styled.label`
+ color: var(--White-100, #fff);
+
+ /* Body/16px */
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 170%; /* 27.2px */
+`;
+
+
+const TextArea = styled.textarea`
+ display: flex;
+ min-height: 100px;
+ padding: 16px 12px;
+ align-items: flex-start;
+ gap: 10px;
+ align-self: stretch;
+
+ border-radius: 8px;
+ border: 1px solid var(--Stroke-color, rgba(255, 255, 255, 0.2));
+ background: var(--Bg-1, #0b0c14);
+
+ color: var(--White-50, #fff);
+
+ /* Body/16px */
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 170%; /* 27.2px */
+`;
+
+function TextBox({ label, value, onChange, placeholder, maxWidth }) {
+ return (
+
+
+
+
+ );
+}
+
+return { TextBox };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/TextEditor.jsx b/apps/builddao/widget/components/TextEditor.jsx
new file mode 100644
index 00000000..160ea28f
--- /dev/null
+++ b/apps/builddao/widget/components/TextEditor.jsx
@@ -0,0 +1,148 @@
+const TextareaWrapper = styled.div`
+ display: grid;
+ vertical-align: top;
+ align-items: center;
+ position: relative;
+ align-items: stretch;
+
+ textarea {
+ display: flex;
+ align-items: center;
+ transition: all 0.3s ease;
+ }
+
+ textarea::placeholder {
+ padding-top: 4px;
+ font-size: 20px;
+ }
+
+ textarea:focus::placeholder {
+ font-size: inherit;
+ padding-top: 0px;
+ }
+
+ &::after,
+ textarea,
+ iframe {
+ width: 100%;
+ min-width: 1em;
+ height: unset;
+ min-height: 3em;
+ font: inherit;
+ margin: 0;
+ resize: none;
+ background: none;
+ appearance: none;
+ border: 0px solid #eee;
+ grid-area: 1 / 1;
+ overflow: hidden;
+ outline: none;
+ }
+
+ iframe {
+ padding: 0;
+ }
+
+ textarea:focus,
+ textarea:not(:empty) {
+ border-bottom: 1px solid #eee;
+ min-height: 5em;
+ }
+
+ &::after {
+ content: attr(data-value) " ";
+ visibility: hidden;
+ white-space: pre-wrap;
+ }
+ &.markdown-editor::after {
+ padding-top: 66px;
+ font-family: monospace;
+ font-size: 14px;
+ }
+`;
+
+const MarkdownEditor = `
+ html {
+ background: #0b0c14;
+ }
+
+ * {
+ border: none !important;
+ }
+
+ .rc-md-editor {
+ background: #3c3d43;
+ border-top: 1px solid #3c3d43 !important;
+ border-radius: 8px;
+ }
+
+ .editor-container {
+ background: #3c3d43;
+ }
+
+ .drop-wrap {
+ top: -110px !important;
+ border-radius: 0.5rem !important;
+ }
+
+ .header-list {
+ display: flex;
+ align-items: center;
+ }
+
+ textarea {
+ background: #0b0c14 !important;
+ color: #fff !important;
+
+ font-family: sans-serif !important;
+ font-size: 1rem;
+
+ border: 1px solid #3c3d43 !important;
+ border-top: 0 !important;
+ border-radius: 0 0 8px 8px;
+ }
+
+ .rc-md-navigation {
+ background: #0b0c14 !important;
+ border: 1px solid #3c3d43 !important;
+ border-top: 0 !important;
+ border-bottom: 0 !important;
+ border-radius: 8px 8px 0 0;
+
+ i {
+ color: #cdd0d5;
+ }
+ }
+
+ .editor-container {
+ border-radius: 0 0 8px 8px;
+ }
+
+ .rc-md-editor .editor-container .sec-md .input {
+ overflow-y: auto;
+ padding: 8px !important;
+ line-height: normal;
+ border-radius: 0 0 8px 8px;
+ }
+`;
+
+function TextEditor({ value, onChange, maxWidth }) {
+ return (
+
+
+
+ );
+}
+
+return { TextEditor };
\ No newline at end of file
diff --git a/apps/builddao/widget/components/UploadField.jsx b/apps/builddao/widget/components/UploadField.jsx
new file mode 100644
index 00000000..6cecca50
--- /dev/null
+++ b/apps/builddao/widget/components/UploadField.jsx
@@ -0,0 +1,63 @@
+const { Button } = VM.require("buildhub.near/widget/components.Button");
+
+const UploadContainer = styled.div`
+ display: flex;
+ max-width: 390px;
+ min-height: 200px;
+ width: 100%;
+ height: 100%;
+ padding: 24px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 24px;
+
+ border-radius: 16px;
+ border: 1px dashed var(--Stroke-color, rgba(255, 255, 255, 0.2));
+ background: ${(props) => (props.background ? "#23242B" : "#0b0c14")};
+
+ p {
+ color: var(--White-100, #fff);
+ text-align: center;
+
+ /* Body/Medium-16px */
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ margin: 0;
+ }
+
+ p.secondary {
+ color: var(--White-50, #cdd0d5);
+ text-align: center;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 16px; /* 133.333% */
+ }
+
+ i {
+ color: white;
+ font-size: 2rem;
+ }
+`;
+
+function UploadField({ background }) {
+ return (
+
+
+
+
Choose a file or drag & drop it here.
+
+ JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
+
+
+
+
+
+
+
+
{name || "No-Name Profile"}
+
+
+
+
{accountId}
+
+ {blockHeight === "now" ? (
+ "now"
+ ) : (
+
+
+
+ )}
+
+
+ {pinned && (
+
+
+
+ )}
+
+ {!pinned && !hideMenu && blockHeight !== "now" && (
+
+
+
+
+ )}
+
+
+
+ {hasBookmark ? bookmarkFillSvg : bookmarkSvg}
+
+
+
+);
diff --git a/apps/builddao/widget/components/post/Content.jsx b/apps/builddao/widget/components/post/Content.jsx
new file mode 100644
index 00000000..83039a20
--- /dev/null
+++ b/apps/builddao/widget/components/post/Content.jsx
@@ -0,0 +1,134 @@
+const content = props.content;
+const noEmbed = !!props.noEmbed;
+
+const [truncated, setTruncated] = useState(props.truncateContent ?? true);
+
+const Wrapper = styled.div`
+ overflow: hidden;
+ .truncated-content {
+ max-height: 38em;
+ position: relative;
+ overflow: hidden;
+
+ .expand-post {
+ position: absolute;
+ z-index: 1;
+ top: 35em;
+ left: 0;
+ background-image: linear-gradient(
+ to bottom,
+ rgba(255, 255, 255, 0),
+ rgba(255, 255, 255, 1) 25%
+ );
+ width: 100%;
+ height: 3em;
+
+ > div {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ vertical-align: bottom;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ cursor: pointer;
+ > a {
+ margin: 0 0 0.7em 0.7em;
+ }
+ }
+ }
+
+ @media (max-width: 991px) {
+ max-height: 30em;
+ .expand-post {
+ top: 27em;
+ }
+ }
+ }
+
+ .full-content {
+ .expand-post {
+ display: none;
+ }
+ }
+`;
+
+const [onHashtag] = useState(() => (hashtag) => (
+
+ #{hashtag}
+
+));
+
+const [showLightbox, setShowLightbox] = useState(false);
+
+const [onImage] = useState(
+ () => (props) =>
+ props.src && (
+ }
+ props={{
+ image: {
+ url: props.src,
+ },
+ alt: props.alt ?? "inline image",
+ }}
+ />
+ )
+);
+
+const onLink = useCallback((props) => {
+ if (props.children[0] === "EMBED") {
+ // EMBED
+ return (
+
+ );
+ } else {
+ return ;
+ }
+}, []);
+
+return (
+
+
+
+ }
+ src="mob.near/widget/N.SocialMarkdown"
+ props={{
+ text: content.text,
+ onHashtag,
+ onImage,
+ onLink: noEmbed ? undefined : onLink,
+ }}
+ />
+
+ {content.image && (
+
+ }
+ props={{ image: content.image, alt: "attached image" }}
+ />
+
+ )}
+
+