| 6 | "": "const accountId = context.accountId ?? \\\\\\\"buildcommons.near\\\\\\\";\\\\nconst [highlightIndex, setHighlightIndex] = useState(null);\\\\nconst words = [\\\\\\\"Social\\\\\\\", \\\\\\\"Network\\\\\\\", \\\\\\\"States\\\\\\\", \\\\\\\"SN\\\\\\\", \\\\\\\"NS\\\\\\\"];\\\\nconst [activeWord, setActiveWord] = useState(null);\\\\nconst [activeContent, setActiveContent] = useState(null);\\\\nconst contentMap = {\\\\n Social: (\\\\n <Widget\\\\n key={accountId}\\\\n src=\\\\\\\"hack.near/widget/SocialGraph\\\\\\\"\\\\n props={{\\\\n accountId,\\\\n height: 325,\\\\n }}\\\\n />\\\\n ),\\\\n Network: (\\\\n <div className=\\\\\\\"m-3 mt-4\\\\\\\">\\\\n <Widget src=\\\\\\\"hack.near/widget/commons\\\\\\\" />\\\\n </div>\\\\n ),\\\\n States: (\\\\n <a\\\\n href=\\\\\\\"https://blocklive.io/event/network-states-atx\\\\\\\"\\\\n className=\\\\\\\"m-3 mt-4 mb-2\\\\\\\"\\\\n style={{\\\\n display: \\\\\\\"flex\\\\\\\",\\\\n justifyContent: \\\\\\\"center\\\\\\\",\\\\n alignItems: \\\\\\\"center\\\\\\\",\\\\n height: \\\\\\\"100%\\\\\\\",\\\\n }}\\\\n >\\\\n <img\\\\n style={{ maxWidth: \\\\\\\"80%\\\\\\\" }}\\\\n src=\\\\\\\"https://builders.mypinata.cloud/ipfs/QmYxc5XbVU8TMojf98Yti8ctzAkGLd383f7LtpnjHhEMbJ\\\\\\\"\\\\n alt=\\\\\\\"Building Network States\\\\\\\"\\\\n />\\\\n </a>\\\\n ),\\\\n SN: (\\\\n <Widget\\\\n key={accountId}\\\\n src=\\\\\\\"hack.near/widget/SocialGraph\\\\\\\"\\\\n props={{\\\\n accountId,\\\\n height: 325,\\\\n }}\\\\n />\\\\n ),\\\\n NS: (\\\\n <Widget\\\\n src=\\\\\\\"hack.near/widget/SocialGraph\\\\\\\"\\\\n props={{\\\\n accountId: \\\\\\\"buildcommons.near\\\\\\\",\\\\n height: 325,\\\\n }}\\\\n />\\\\n ),\\\\n};\\\\nconst Wrapper = styled.div`\\\\n display: flex;\\\\n flex-direction: column;\\\\n justify-content: center;\\\\n align-items: center;\\\\n padding: 19px;\\\\n margin: auto;\\\\n background: #fff;\\\\n`;\\\\nconst H1 = styled.h1`\\\\n font-family: \\\\\\\"Courier\\\\\\\", sans-serif;\\\\n font-style: normal;\\\\n font-weight: 555;\\\\n font-size: 55px;\\\\n line-height: 1;\\\\n text-align: center;\\\\n color: #212428;\\\\n margin: 8px;\\\\n max-width: 700px;\\\\n span {\\\\n display: inline-block;\\\\n background: #edff00;\\\\n border-radius: 12px;\\\\n position: relative;\\\\n padding: 0.2em 0.3em 0.1em;\\\\n margin: 0.1em;\\\\n text-align: center;\\\\n svg {\\\\n position: absolute;\\\\n left: 50%;\\\\n top: 50%;\\\\n transform: translate(-50%, -50%);\\\\n width: 50px;\\\\n height: auto;\\\\n }\\\\n }\\\\n @media (max-width: 900px) {\\\\n font-size: 39px;\\\\n span {\\\\n border-radius: 12px;\\\\n svg {\\\\n width: 18px;\\\\n left: 50%;\\\\n top: 50%;\\\\n transform: translate(-50%, -50%);\\\\n }\\\\n }\\\\n }\\\\n`;\\\\nconst LeftWord = styled.span`\\\\n font-family: \\\\\\\"Courier\\\\\\\", sans-serif;\\\\n font-size: 23px;\\\\n font-style: bold;\\\\n font-weight: 555;\\\\n color: #212428;\\\\n padding: 0.2em 0.6em;\\\\n display: inline-block;\\\\n height: 42px;\\\\n background-color: ${(props) => (props.highlight ? \\\\\\\"#EDFF00\\\\\\\" : \\\\\\\"transparent\\\\\\\")};\\\\n border-radius: ${() => {\\\\n if (activeWord === \\\\\\\"SN\\\\\\\") {\\\\n return \\\\\\\"8px 0 0 8px\\\\\\\";\\\\n } else if (activeWord === \\\\\\\"NS\\\\\\\") {\\\\n return \\\\\\\"8px\\\\\\\";\\\\n } else {\\\\n return \\\\\\\"8px\\\\\\\";\\\\n }\\\\n }};\\\\n transition: background-color 0.3s;\\\\n cursor: pointer;\\\\n @media (max-width: 900px) {\\\\n font-size: 18px;\\\\n span {\\\\n border-radius: 5px;\\\\n }\\\\n }\\\\n`;\\\\nconst MiddleWord = styled.span`\\\\n font-family: \\\\\\\"Courier\\\\\\\", sans-serif;\\\\n font-size: 23px;\\\\n font-style: bold;\\\\n font-weight: 555;\\\\n color: #212428;\\\\n padding: 0.2em 0.6em;\\\\n height: 42px;\\\\n display: inline-block;\\\\n background-color: ${(props) => (props.highlight ? \\\\\\\"#EDFF00\\\\\\\" : \\\\\\\"transparent\\\\\\\")};\\\\n border-radius: ${() => {\\\\n if (activeWord === \\\\\\\"SN\\\\\\\") {\\\\n return \\\\\\\"0 8px 8px 0\\\\\\\";\\\\n } else if (activeWord === \\\\\\\"NS\\\\\\\") {\\\\n return \\\\\\\"8px 0 0 8px\\\\\\\";\\\\n } else {\\\\n return \\\\\\\"8px\\\\\\\";\\\\n }\\\\n }};\\\\n transition: background-color 0.3s;\\\\n cursor: pointer;\\\\n @media (max-width: 900px) {\\\\n font-size: 18px;\\\\n span {\\\\n border-radius: 5px;\\\\n }\\\\n }\\\\n`;\\\\nconst RightWord = styled.span`\\\\n font-family: \\\\\\\"Courier\\\\\\\", sans-serif;\\\\n font-size: 23px;\\\\n font-style: bold;\\\\n font-weight: 555;\\\\n color: #212428;\\\\n padding: 0.2em 0.6em;\\\\n height: 42px;\\\\n display: inline-block;\\\\n background-color: ${(props) => (props.highlight ? \\\\\\\"#EDFF00\\\\\\\" : \\\\\\\"transparent\\\\\\\")};\\\\n border-radius: ${() => {\\\\n if (activeWord === \\\\\\\"SN\\\\\\\") {\\\\n return \\\\\\\"8px\\\\\\\";\\\\n } else if (activeWord === \\\\\\\"NS\\\\\\\") {\\\\n return \\\\\\\"0 8px 8px 0\\\\\\\";\\\\n } else {\\\\n return \\\\\\\"8px\\\\\\\";\\\\n }\\\\n }};\\\\n transition: background-color 0.3s;\\\\n cursor: pointer;\\\\n @media (max-width: 900px) {\\\\n font-size: 18px;\\\\n span {\\\\n border-radius: 5px;\\\\n }\\\\n }\\\\n`;\\\\nconst FirstSpace = styled.span`\\\\n width: 19px;\\\\n height: 42px;\\\\n padding: 0.3em 0.7em;\\\\n border: #edff00;\\\\n background-color: ${(props) => (props.highlight ? \\\\\\\"#EDFF00\\\\\\\" : \\\\\\\"transparent\\\\\\\")};\\\\n display: inline-block;\\\\n cursor: pointer;\\\\n`;\\\\nconst SecondSpace = styled.span`\\\\n width: 19px;\\\\n height: 42px;\\\\n padding: 0.3em 0.7em;\\\\n border: #edff00;\\\\n background-color: ${(props) => (props.highlight ? \\\\\\\"#EDFF00\\\\\\\" : \\\\\\\"transparent\\\\\\\")};\\\\n display: inline-block;\\\\n cursor: pointer;\\\\n`;\\\\nconst handleClick = (word) => {\\\\n if (activeWord === word) {\\\\n setActiveWord(null);\\\\n setActiveContent(null);\\\\n } else {\\\\n setActiveWord(word);\\\\n setActiveContent(contentMap[word]);\\\\n }\\\\n};\\\\nreturn (\\\\n <Wrapper>\\\\n <H1>\\\\n <a\\\\n style={{ textDecoration: \\\\\\\"none\\\\\\\", color: \\\\\\\"#212428\\\\\\\" }}\\\\n href=\\\\\\\"https://commons.build\\\\\\\"\\\\n >\\\\n <span>\\\\n Build\\\\n <svg viewBox=\\\\\\\"0 0 25 23\\\\\\\" fill=\\\\\\\"none\\\\\\\" aria-hidden=\\\\\\\"true\\\\\\\"></svg>\\\\n </span>\\\\n </a>\\\\n Commons\\\\n </H1>\\\\n <div\\\\n className=\\\\\\\"mt-3 align-items-center\\\\\\\"\\\\n style={{\\\\n display: \\\\\\\"flex\\\\\\\",\\\\n alignItems: \\\\\\\"center\\\\\\\",\\\\n justifyContent: \\\\\\\"center\\\\\\\",\\\\n }}\\\\n >\\\\n <LeftWord\\\\n highlight={\\\\n highlightIndex === 0 ||\\\\n highlightIndex === 3 ||\\\\n activeWord === \\\\\\\"Social\\\\\\\" ||\\\\n activeWord === \\\\\\\"SN\\\\\\\"\\\\n }\\\\n onMouseEnter={() => setHighlightIndex(0)}\\\\n onMouseLeave={() => setHighlightIndex(-1)}\\\\n onClick={() => handleClick(\\\\\\\"Social\\\\\\\")}\\\\n >\\\\n Social\\\\n </LeftWord>\\\\n <FirstSpace\\\\n highlight={activeWord === \\\\\\\"SN\\\\\\\"}\\\\n onMouseEnter={() => setHighlightIndex(3)}\\\\n onMouseLeave={() => setHighlightIndex(-1)}\\\\n onClick={() => handleClick(\\\\\\\"SN\\\\\\\")}\\\\n />\\\\n <MiddleWord\\\\n highlight={\\\\n highlightIndex === 1 ||\\\\n highlightIndex === 3 ||\\\\n highlightIndex === 4 ||\\\\n activeWord === \\\\\\\"Network\\\\\\\" ||\\\\n activeWord === \\\\\\\"SN\\\\\\\" ||\\\\n activeWord === \\\\\\\"NS\\\\\\\"\\\\n }\\\\n onMouseEnter={() => setHighlightIndex(1)}\\\\n onMouseLeave={() => setHighlightIndex(-1)}\\\\n onClick={() => handleClick(\\\\\\\"Network\\\\\\\")}\\\\n >\\\\n Network\\\\n </MiddleWord>\\\\n <SecondSpace\\\\n highlight={activeWord === \\\\\\\"NS\\\\\\\"}\\\\n onMouseEnter={() => setHighlightIndex(4)}\\\\n onMouseLeave={() => setHighlightIndex(-1)}\\\\n onClick={() => handleClick(\\\\\\\"NS\\\\\\\")}\\\\n />\\\\n <RightWord\\\\n highlight={\\\\n highlightIndex === 2 ||\\\\n highlightIndex === 4 ||\\\\n activeWord === \\\\\\\"States\\\\\\\" ||\\\\n activeWord === \\\\\\\"NS\\\\\\\"\\\\n }\\\\n onMouseEnter={() => setHighlightIndex(2)}\\\\n onMouseLeave={() => setHighlightIndex(-1)}\\\\n onClick={() => handleClick(\\\\\\\"States\\\\\\\")}\\\\n >\\\\n States\\\\n </RightWord>\\\\n </div>\\\\n {activeContent ? (\\\\n activeContent\\\\n ) : (\\\\n <a\\\\n href=\\\\\\\"https://blocklive.io/event/network-states-atx\\\\\\\"\\\\n className=\\\\\\\"m-3 mt-4 mb-2\\\\\\\"\\\\n style={{\\\\n display: \\\\\\\"flex\\\\\\\",\\\\n justifyContent: \\\\\\\"center\\\\\\\",\\\\n alignItems: \\\\\\\"center\\\\\\\",\\\\n height: \\\\\\\"100%\\\\\\\",\\\\n }}\\\\n >\\\\n <img\\\\n style={{ maxWidth: \\\\\\\"80%\\\\\\\" }}\\\\n src=\\\\\\\"https://builders.mypinata.cloud/ipfs/QmYxc5XbVU8TMojf98Yti8ctzAkGLd383f7LtpnjHhEMbJ\\\\\\\"\\\\n alt=\\\\\\\"Building Network States\\\\\\\"\\\\n />\\\\n </a>\\\\n )}\\\\n </Wrapper>\\\\n);\\\\n" |