Transaction: 8GbFMG4...ov2R

{ "data": { "saidulbadhon.near": { "widget": { "SearchPage.ComponentDetails.ComponentSummary": { "": "if (!props.src) return \"\";\r\n\r\nState.init({\r\n copiedShareUrl: false,\r\n});\r\n\r\nconst src = props.src;\r\nconst primaryAction = props.primaryAction || \"viewDetails\";\r\nconst [accountId, widget, widgetName] = src.split(\"/\");\r\nconst data = Social.get(`${accountId}/widget/${widgetName}/metadata/**`);\r\nconst metadata = data || {};\r\nconst tags = Object.keys(metadata.tags || {});\r\nconst appUrl = `/#/${src}`;\r\nconst detailsUrl = `/#/adminalpha.near/widget/ComponentDetailsPage?src=${src}`;\r\nconst shareUrl = `https://alpha.near.org${detailsUrl}`;\r\nconst size = props.size || \"large\";\r\n\r\nconst primaryActions = {\r\n open: {\r\n display: \"Open\",\r\n url: appUrl,\r\n },\r\n viewDetails: {\r\n display: \"View Details\",\r\n url: detailsUrl,\r\n },\r\n};\r\n\r\nconst sizes = {\r\n medium: {\r\n gap: \"16px\",\r\n thumbnail: \"56px\",\r\n title: \"16px\",\r\n },\r\n large: {\r\n gap: \"16px\",\r\n thumbnail: \"100px\",\r\n title: \"32px\",\r\n },\r\n};\r\n\r\nconst Wrapper = styled.div``;\r\n\r\nconst Header = styled.div`\r\n display: flex;\r\n align-items: center;\r\n gap: ${(p) => sizes[p.size].gap};\r\n margin-bottom: 32px;\r\n\r\n > * {\r\n min-width: 0;\r\n }\r\n\r\n @media (max-width: 770px) {\r\n gap: 16px;\r\n }\r\n`;\r\n\r\nconst TagsWrapper = styled.div`\r\n margin-bottom: 32px;\r\n`;\r\n\r\nconst Actions = styled.div`\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n margin-bottom: 16px;\r\n`;\r\n\r\nconst Title = styled.h1`\r\n font-size: ${(p) => sizes[p.size].title};\r\n line-height: 1.2em;\r\n color: #11181c;\r\n margin: 0 0 8px;\r\n font-weight: 600;\r\n\r\n @media (max-width: 770px) {\r\n font-size: 16px;\r\n margin: 0;\r\n }\r\n`;\r\n\r\nconst Thumbnail = styled.div`\r\n width: ${(p) => sizes[p.size].thumbnail};\r\n height: ${(p) => sizes[p.size].thumbnail};\r\n flex-shrink: 0;\r\n border: 1px solid #eceef0;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1),\r\n 0px 1px 2px rgba(16, 24, 40, 0.06);\r\n\r\n img {\r\n object-fit: cover;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n @media (max-width: 770px) {\r\n width: 58px;\r\n height: 58px;\r\n }\r\n`;\r\n\r\nconst sharedButtonStyles = `\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 8px 16px;\r\n height: 32px;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n font-size: 12px;\r\n line-height: 15px;\r\n text-align: center;\r\n cursor: pointer;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n outline: none;\r\n }\r\n\r\n i {\r\n color: #7E868C;\r\n }\r\n\r\n .bi-16 {\r\n font-size: 16px;\r\n }\r\n`;\r\n\r\nconst Button = styled.button`\r\n ${sharedButtonStyles}\r\n color: ${(p) => (p.primary ? \"#09342E\" : \"#11181C\")} !important;\r\n background: ${(p) => (p.primary ? \"#59E692\" : \"#FBFCFD\")};\r\n border: ${(p) => (p.primary ? \"none\" : \"1px solid #D7DBDF\")};\r\n\r\n &:hover,\r\n &:focus {\r\n background: ${(p) => (p.primary ? \"rgb(112 242 164)\" : \"#ECEDEE\")};\r\n }\r\n`;\r\n\r\nconst ButtonLink = styled.a`\r\n ${sharedButtonStyles}\r\n color: ${(p) => (p.primary ? \"#09342E\" : \"#11181C\")} !important;\r\n background: ${(p) => (p.primary ? \"#59E692\" : \"#FBFCFD\")};\r\n border: ${(p) => (p.primary ? \"none\" : \"1px solid #D7DBDF\")};\r\n\r\n &:hover,\r\n &:focus {\r\n background: ${(p) => (p.primary ? \"rgb(112 242 164)\" : \"#ECEDEE\")};\r\n }\r\n`;\r\n\r\nconst Text = styled.p`\r\n margin: 0;\r\n font-size: 14px;\r\n line-height: 20px;\r\n color: ${(p) => (p.bold ? \"#11181C\" : \"#687076\")};\r\n font-weight: ${(p) => (p.bold ? \"600\" : \"400\")};\r\n font-size: ${(p) => (p.small ? \"12px\" : \"14px\")};\r\n overflow: ${(p) => (p.ellipsis ? \"hidden\" : \"visible\")};\r\n text-overflow: ${(p) => (p.ellipsis ? \"ellipsis\" : \"unset\")};\r\n white-space: ${(p) => (p.ellipsis ? \"nowrap\" : \"\")};\r\n\r\n i {\r\n margin-right: 4px;\r\n }\r\n`;\r\n\r\nreturn (\r\n <Wrapper>\r\n <Header size={size}>\r\n <Thumbnail size={size}>\r\n <Widget\r\n src=\"mob.near/widget/Image\"\r\n props={{\r\n image: metadata.image,\r\n fallbackUrl:\r\n \"https://ipfs.near.social/ipfs/bafkreifc4burlk35hxom3klq4mysmslfirj7slueenbj7ddwg7pc6ixomu\",\r\n alt: metadata.name,\r\n }}\r\n />\r\n </Thumbnail>\r\n\r\n <div>\r\n <Title size={size}>{metadata.name || widgetName}</Title>\r\n <Text ellipsis>{src}</Text>\r\n </div>\r\n </Header>\r\n\r\n {props.showTags && tags.length > 0 && (\r\n <TagsWrapper>\r\n <Widget\r\n src=\"adminalpha.near/widget/Tags\"\r\n props={{\r\n tags,\r\n }}\r\n />\r\n </TagsWrapper>\r\n )}\r\n\r\n <Actions>\r\n <ButtonLink primary href={primaryActions[primaryAction].url}>\r\n {primaryActions[primaryAction].display}\r\n </ButtonLink>\r\n\r\n <ButtonLink href={`/#/edit/${src}`}>\r\n {context.accountId === accountId ? (\r\n <>\r\n <i className=\"bi bi-pencil-fill\"></i> Edit\r\n </>\r\n ) : (\r\n <>\r\n <i className=\"bi bi-git\"></i> Fork\r\n </>\r\n )}\r\n </ButtonLink>\r\n\r\n <ButtonLink href={`${detailsUrl}&tab=source`}>\r\n <i className=\"bi bi-code-square\"></i>\r\n View Source\r\n </ButtonLink>\r\n\r\n <OverlayTrigger\r\n placement=\"top\"\r\n overlay={<Tooltip>Copy URL to clipboard</Tooltip>}\r\n >\r\n <Button\r\n type=\"button\"\r\n onMouseLeave={() => {\r\n State.update({ copiedShareUrl: false });\r\n }}\r\n onClick={() => {\r\n clipboard.writeText(shareUrl).then(() => {\r\n State.update({ copiedShareUrl: true });\r\n });\r\n }}\r\n >\r\n {state.copiedShareUrl ? (\r\n <i className=\"bi bi-16 bi-check\"></i>\r\n ) : (\r\n <i className=\"bi bi-16 bi-link-45deg\"></i>\r\n )}\r\n Share\r\n </Button>\r\n </OverlayTrigger>\r\n </Actions>\r\n </Wrapper>\r\n);\r\n" } } } } }