Transaction: BRoi1g1...kcWL

{ "data": { "idknwhoru.near": { "component_alpha": { "Profile": { "": "import { socialDb } from \"@bos-web-engine/social-db-plugin\";\nimport { useState, useEffect, Suspense } from \"react\";\nimport ps from \"./styles.module.css\"\n\nconst UserProfile = ({ profile }) => {\n return <article className={ps.profile}>\n <img className={ps.avatar} src={`https://ipfs.near.social/ipfs/${profile?.image.ipfs_cid}`} />\n <div>\n <h3 className={ps.h3}>Hello, {profile?.name}</h3>\n </div>\n </article>\n}\n\nexport default function Profile({ id = \"idknwhoru.near\" }) {\n console.log({ id })\n const [data, setData] = useState(null);\n const profile = data?.[id]?.profile;\n\n const loadData = async () => {\n const res = await socialDb.get({\n key: `${id}/profile/**`\n });\n\n setData(res);\n }\n\n useEffect(() => {\n loadData();\n }, []);\n\n return (\n <section className={ps.wrapper}>\n <>\n <h2 className={ps.h2}>Ternary operator</h2>\n {\n !profile ? <p>pending...</p> : <UserProfile profile={profile} />\n }\n </>\n <hr />\n <Suspense fallback={<p>pending...</p>}>\n <h2 className={ps.h2}>Suspense</h2>\n <UserProfile profile={profile} />\n </Suspense>\n <hr />\n <>\n <h2 className={ps.h2}>None</h2>\n <UserProfile profile={profile} />\n </>\n </section>\n );\n}\n\nexport default Profile as BWEComponent;", "css": "@import url(\"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css\");\n\n.wrapper {\n --avatar-size: 60px;\n --font-family: Pretendard Variable;\n --font-style: normal;\n --h2-font-size: 28px;\n --h2-line-height: 33px;\n --h3-font-weight: 700;\n --h3-font-size: 24px;\n --h3-line-height: 29px;\n --h3-letter-spacing: -0.003em;\n\n display: block;\n}\n\n.profile {\n display: flex;\n}\n\n.avatar {\n width: var(--avatar-size);\n height: var(--avatar-size);\n border-radius: 50%;\n}\n\n.h2 {\n font-family: var(--font-family);\n font-style: var(--font-style);\n font-size: var(--h2-font-size);\n line-height: var(--h2-line-height);\n}\n\n.h3 {\n font-weight: var(--h3-font-weight);\n font-size: var(--h3-font-size);\n line-height: var(--h3-line-height);\n letter-spacing: var(--h3-letter-spacing);\n}" } } } } }