const ownerId = "contribut3.near"; const availableContent = ["projects", "contributors", "requests"]; const getContent = (content) => { if (!content || !availableContent.includes(content)) { return "projects"; } return content; }; const contentSelector = ( <Widget src={`${ownerId}/widget/TabSelector`} props={{ tab: "home", content: getContent(props.content), search: props.search, update: props.update, buttons: [ { id: "projects", text: "Projects", }, { id: "vendors", text: "Vendors", }, { id: "backers", text: "Backers", }, { id: "requests", text: "Requests", }, ], }} /> ); const content = { projects: ( <Widget src={`${ownerId}/widget/EntityList`} props={{ search: props.search, update: props.update }} /> ), contributors: ( <Widget src={`${ownerId}/widget/ContributorList`} props={{ search: props.search, update: props.update }} /> ), requests: ( <Widget src={`${ownerId}/widget/NeedList`} props={{ search: props.search, update: props.update }} /> ), }[getContent(props.content)]; const header = ( <div> <h1 className="fs-3">Find projects, contributors or requests</h1> </div> ); const Heading = styled.div` display: flex; flex-direction: column; align-items: flex-start; padding: 0px; h1 { font-style: normal; font-weight: 700; font-size: 2em; color: #101828; } h2 { font-style: normal; font-weight: 400; font-size: 1em; line-height: 1.5em; color: #475467; } `; return ( <div> <div className="mb-3"> <Heading> <h1>Discover NEAR Horizon</h1> <h2>Explore projects, vendors, investors and contribution requests</h2> </Heading> <div className="d-flex flex-row justify-content-between"> {contentSelector} <Widget src={`${ownerId}/widget/SearchInput`} props={{ search: props.search, update: props.update }} /> </div> </div> <div className="px-3 pt-3">{content}</div> </div> );