| 6 | "": "const [state, setState] = useState({\\\\n currentTab: \\\\\\\"explore\\\\\\\",\\\\n});\\\\n\\\\nconst { currentTab } = state;\\\\n\\\\nconst updateState = (update) => {\\\\n setState({ ...state, ...update });\\\\n};\\\\n\\\\nconst font = fetch(\\\\\\\"https://fonts.cdnfonts.com/css/seven-monkey-fury-bb\\\\\\\").body;\\\\nconst Container = styled.div`\\\\n display: flex;\\\\n flex-direction: column;\\\\n height: 100vh;\\\\n font-family: \\\\\\\"Seven Monkey Fury BB\\\\\\\", sans-serif;\\\\n ${font}\\\\n .no-nft {\\\\n font-size: 34px;\\\\n text-align: center;\\\\n }\\\\n .btn-main {\\\\n font-size: 1rem;\\\\n margin-top: 1rem;\\\\n background-color: #fff;\\\\n width: fit-content;\\\\n background-image: none;\\\\n background-position: 0 90%;\\\\n background-repeat: repeat no-repeat;\\\\n background-size: 4px 3px;\\\\n border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;\\\\n border-style: solid;\\\\n border-width: 2px;\\\\n border-color: #ec2109;\\\\n box-shadow: #890e3334 15px 28px 25px -18px;\\\\n box-sizing: border-box;\\\\n color: #ec2109;\\\\n cursor: pointer;\\\\n display: inline-block;\\\\n outline: none;\\\\n padding: 1em;\\\\n text-decoration: none;\\\\n transition: all 235ms ease-in-out;\\\\n border-bottom-left-radius: 15px 255px;\\\\n border-bottom-right-radius: 225px 15px;\\\\n border-top-left-radius: 255px 15px;\\\\n border-top-right-radius: 15px 225px;\\\\n user-select: none;\\\\n -webkit-user-select: none;\\\\n touch-action: manipulation;\\\\n &.active {\\\\n background: #ec2109;\\\\n color: white;\\\\n }\\\\n @media only screen and (max-width: 480px) {\\\\n font-size: 12px;\\\\n }\\\\n }\\\\n .btn-main:hover {\\\\n box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px -5px;\\\\n transform: translate3d(0, 2px, 0);\\\\n }\\\\n .tabs {\\\\n display: flex;\\\\n flex-wrap: wrap;\\\\n font-size: 12px;\\\\n gap: 1rem;\\\\n margin-left: 1rem;\\\\n margin-bottom: 2rem;\\\\n }\\\\n`;\\\\nconst Header = styled.div`\\\\n display: flex;\\\\n flex-direction: column;\\\\n text-align: center;\\\\n h1 {\\\\n color: #ec2109;\\\\n font-size: 5rem;\\\\n }\\\\n .description {\\\\n max-width: 800px;\\\\n margin: 1rem auto;\\\\n font-size: 20px;\\\\n }\\\\n @media only screen and (max-width: 480px) {\\\\n h1 {\\\\n font-size: 3rem;\\\\n }\\\\n .description {\\\\n font-size: 14px;\\\\n margin-bottom: 2rem;\\\\n }\\\\n }\\\\n`;\\\\nconst bgIocns = [\\\\n \\\\\\\"bafkreicrkimq4qurz2otbav3qiffroysujryrny4min7lxqjlqpembzxay\\\\\\\",\\\\n \\\\\\\"bafkreihutrcg7fvrcwq47yzg3kinnnl5bqzo7on7rrrb37xejojjx3vrya\\\\\\\",\\\\n \\\\\\\"bafkreihlclbgvfhugq4y2gso2knpd6iiedyshc2lmn2eub3wwlmg77ah4e\\\\\\\",\\\\n];\\\\n\\\\nconst customStyle = `\\\\n--primary-color:#ec2109;\\\\n--primary-light: #890e3334;\\\\n`;\\\\nconst donorAddress = \\\\\\\"donors.yearofchef.near\\\\\\\";\\\\nconst cooksAddress = \\\\\\\"cooks.yearofchef.near\\\\\\\";\\\\nconst menuAddress = \\\\\\\"menu.yearofchef.near\\\\\\\";\\\\nconst ogAddress = \\\\\\\"og.yearofchef.near\\\\\\\";\\\\nconst cooksLeft = Near.view(\\\\\\\"mint.yearofchef.near\\\\\\\", \\\\\\\"nft_supply_for_owner\\\\\\\", {\\\\n account_id: cooksAddress,\\\\n});\\\\nconst ogLeft = Near.view(\\\\\\\"mint.yearofchef.near\\\\\\\", \\\\\\\"nft_supply_for_owner\\\\\\\", {\\\\n account_id: ogAddress,\\\\n});\\\\nconst menuLeft = Near.view(\\\\\\\"mint.yearofchef.near\\\\\\\", \\\\\\\"nft_supply_for_owner\\\\\\\", {\\\\n account_id: menuAddress,\\\\n});\\\\nconst donorsLeft = Near.view(\\\\\\\"mint.yearofchef.near\\\\\\\", \\\\\\\"nft_supply_for_owner\\\\\\\", {\\\\n account_id: donorAddress,\\\\n});\\\\nconst leftItems = [\\\\n { address: donorAddress, left: donorsLeft, total: \\\\\\\"1230\\\\\\\" },\\\\n { address: menuAddress, left: menuLeft, total: \\\\\\\"400\\\\\\\" },\\\\n { address: ogAddress, left: ogLeft, total: \\\\\\\"180\\\\\\\" },\\\\n { address: cooksAddress, left: cooksLeft, total: \\\\\\\"204\\\\\\\" },\\\\n];\\\\nconst OwnersCount = styled.div`\\\\n display: flex;\\\\n gap: 1rem;\\\\n justify-content: space-between;\\\\n flex-wrap: wrap;\\\\n .item {\\\\n display: flex;\\\\n gap: 1rem;\\\\n .number span {\\\\n color: #ec2109;\\\\n }\\\\n }\\\\n`;\\\\n\\\\nconst tabs = [\\\\n { label: \\\\\\\"list\\\\\\\", src: \\\\\\\"bos.yearofchef.near/widget/list\\\\\\\" },\\\\n { label: \\\\\\\"explore\\\\\\\", src: \\\\\\\"baam25.near/widget/store\\\\\\\" },\\\\n { label: \\\\\\\"activity\\\\\\\", src: \\\\\\\"baam25.near/widget/storeActivities\\\\\\\" },\\\\n {\\\\n label: \\\\\\\"royalty payouts\\\\\\\",\\\\n src: \\\\\\\"bos.yearofchef.near/widget/Donations\\\\\\\",\\\\n },\\\\n];\\\\n\\\\nreturn (\\\\n <Container>\\\\n <Header>\\\\n <h1> year of the chef</h1>\\\\n <div className=\\\\\\\"description\\\\\\\">\\\\n The free mint of 2024 hand-drawn dragon-chef NFTs for public goods\\\\n supporters on \\\\u{1fad5} Potlock where royalties are auto-redistributed to\\\\n approved public goods on the registry.\\\\n </div>\\\\n <OwnersCount>\\\\n {leftItems.map((item) => (\\\\n <div key={item.address} className=\\\\\\\"item\\\\\\\">\\\\n <div className=\\\\\\\"address\\\\\\\">{item.address}</div>\\\\n <div className=\\\\\\\"number\\\\\\\">\\\\n <span> {item.left}</span> / {item.total}\\\\n </div>\\\\n </div>\\\\n ))}\\\\n </OwnersCount>\\\\n <div className=\\\\\\\"tabs\\\\\\\">\\\\n {tabs.map((tab) => (\\\\n <div\\\\n key={tab.label}\\\\n onClick={() => updateState({ currentTab: tab.label })}\\\\n className={`btn-main ${tab.label === currentTab ? \\\\\\\"active\\\\\\\" : \\\\\\\"\\\\\\\"}`}\\\\n >\\\\n {tab.label}\\\\n </div>\\\\n ))}\\\\n <a\\\\n href=\\\\\\\"https://www.yearofchef.org/mint\\\\\\\"\\\\n target=\\\\\\\"_blank\\\\\\\"\\\\n className={`btn-main`}\\\\n >\\\\n mint\\\\n </a>\\\\n </div>\\\\n </Header>\\\\n <Widget\\\\n src={tabs.find((option) => option.label == currentTab).src}\\\\n props={{\\\\n store: \\\\\\\"mint.yearofchef.near\\\\\\\",\\\\n showHeader: false,\\\\n customStyle,\\\\n contractId: \\\\\\\"mint.yearofchef.near\\\\\\\",\\\\n color: \\\\\\\"#ec2109\\\\\\\",\\\\n }}\\\\n />\\\\n </Container>\\\\n);\\\\n", |