const ownerId = "contribut3.near"; const Container = styled.div` display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; position: relative; gap: 3.5rem; `; const Sidebar = styled.div` position: sticky; top: 0.25rem; width: calc((100% - 3.5rem) / 5); `; const Content = styled.div` display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: calc((100% - 3.5rem) / 5 * 4); gap: 3rem; `; const contentWidget = { dashboard: "Profile.Dashboard", inbox: "Inbox", basic: "Profile.Basic", tech: "Profile.Tech", funding: "Profile.Funding", founders: "Profile.Founders", files: "Profile.Files", requests: "Manage.Requests", contracts: "Manage.Contracts", credits: "Profile.Credits", growth: "Profile.Growth", permissions: "Profile.Permissions", settings: "Profile.Settings", }; const getContent = (tab) => { if (tab in contentWidget) { return tab; } return "dashboard"; }; const contentKey = getContent(props.content); const content = ( <Widget src={`${ownerId}/widget/${contentWidget[contentKey]}`} props={{ ...props, }} /> ); return ( <Container> <Sidebar> <Widget src={`${ownerId}/widget/Sidebar`} props={{ ...props }} /> </Sidebar> <Content> {contentKey === "dashboard" ? ( <Widget src={`${ownerId}/widget/Profile.HowSection`} /> ) : ( <></> )} <Widget src={`${ownerId}/widget/Project.Layout`} props={{ children: content, accountId: props.accountId ?? context.accountId, }} /> </Content> </Container> );