Adding Bullet and ThemeProvider components

[RamboGj]

Ok, now it is working like this.
1 - I have a ThemeProvider widget that returns a theme const
https://near.social/rambo-dev.near/widget/ThemeProvider

2 - You can pass this theme spreading to the component and retrieve this on styled components props:

const { theme } = VM.require("rambo-dev.near/widget/ThemeProvider");

const StyledBullet = styled.div`
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  font-family: Aeonik, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
   ${({ variant, theme }) => {
     const isDefault = variant === "default";

     const background = isDefault
       ? theme.colors.blue500
       : theme.colors.seablue500;
     const color = isDefault ? theme.colors.blue500 : theme.colors.seablue500;
     const border = `1px solid ${background}33`;

     return `
      background: ${background}33;
      color: ${color};
      border: ${border};
    `;
   }}
`;

function Bullet({ children, variant }) {
  const defaultVariant = variant || "default";

  return (
    <StyledBullet theme={theme} variant={defaultVariant}>
      {children}
    </StyledBullet>
  );
}

return { Bullet };

3 - Finally you can use this component into your dapp

const { Bullet } = VM.require("rambo-dev.near/widget/BuildDAOBullet");

return <Bullet>Hello test</Bullet>;

Widgets:
https://near.social/rambo-dev.near/widget/BuildDAOBullet
https://near.social/rambo-dev.near/widget/ThemeProvider

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
gateway	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 10, 2024 11:08pm