const ownerId = "potlock.near"; const Container = styled.div` display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; flex: 1; @media screen and (max-width: 768px) { flex-direction: column; gap: 32px; } `; const SubRow1 = styled.div` display: flex; flex-direction: row; align-items: center; // justify-content: flex-end; gap: 40px; width: 66%; @media screen and (max-width: 768px) { width: 100%; gap: 24px; } `; const SubRow2 = styled.div` display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 40px; width: 33%; // background: pink; @media screen and (max-width: 768px) { width: 100%; justify-content: flex-start; gap: 24px; } `; // const FollowingMobile = styled.div` // display: none; // @media screen and (max-width: 768px) { // display: flex; // flex-direction: row; // align-items: center; // justify-content: flex-start; // gap: 24px; // } // `; // const existsInCart = props.cart && !!props.cart[props.projectId]; return ( <Container> {/* <FollowingMobile> <Widget src={`${ownerId}/widget/Project.FollowStats`} props={{ accountId: props.projectId }} /> <Widget src={`${ownerId}/widget/Project.FollowButton`} props={{ accountId: props.projectId }} /> </FollowingMobile> */} <SubRow1> <Widget src={`${ownerId}/widget/Project.FollowStats`} props={{ accountId: props.projectId }} /> <Widget src={`${ownerId}/widget/Project.FollowButton`} props={{ accountId: props.projectId }} /> </SubRow1> <SubRow2> <Widget src={`${ownerId}/widget/Cart.AddToCart`} props={{ ...props, showModal: true }} /> </SubRow2> </Container> );