Tag, and change every.near with config_account

near-everything · Apr 30, 2024 · 527e04d · 527e04d
1 parent 237e8fa
commit 527e04d
Show file tree

Hide file tree

Showing 15 changed files with 143 additions and 54 deletions.
diff --git a/apps/every.near/widget/components.jsx b/apps/every.near/widget/components.jsx
@@ -1,11 +1,11 @@
-const { Avatar } = VM.require("every.near/widget/components.ui.avatar");
-const { AvatarGroup } = VM.require("every.near/widget/components.ui.avatar-group");
-const { Badge } = VM.require("every.near/widget/components.ui.badge");
-const { Button } = VM.require("every.near/widget/components.ui.button");
-const { Chip } = VM.require("every.near/widget/components.ui.chip");
-const { Container } = VM.require("every.near/widget/components.ui.container");
-const { Logo } = VM.require("every.near/widget/components.ui.logo");
-
+const { Avatar } = VM.require("${config_account}/widget/components.ui.avatar");
+const { AvatarGroup } = VM.require("${config_account}/widget/components.ui.avatar-group");
+const { Badge } = VM.require("${config_account}/widget/components.ui.badge");
+const { Button } = VM.require("${config_account}/widget/components.ui.button");
+const { Chip } = VM.require("${config_account}/widget/components.ui.chip");
+const { Container } = VM.require("${config_account}/widget/components.ui.container");
+const { Logo } = VM.require("${config_account}/widget/components.ui.logo");
+const { Tag } = VM.require("${config_account}/widget/components.ui.tag");
 return {
   Avatar,
   AvatarGroup,
@@ -14,4 +14,5 @@ return {
   Chip,
   Container,
   Logo,
+  Tag,
 };
diff --git a/apps/every.near/widget/components/chips.jsx b/apps/every.near/widget/components/chips.jsx
@@ -1,4 +1,4 @@
-const { Chip } = VM.require("every.near/widget/components") || {
+const { Chip } = VM.require("${config_account}/widget/components") || {
   Chip: () => <></>,
 };
 

diff --git a/apps/every.near/widget/components/navbar.jsx b/apps/every.near/widget/components/navbar.jsx
@@ -1,14 +1,14 @@
-const { Avatar, Button, Badge, Logo } = VM.require("every.near/widget/components") || {
+const { Avatar, Button, Badge, Logo } = VM.require("${config_account}/widget/components") || {
   Avatar: () => <></>,
   Button: () => <></>,
   Badge: () => <></>,
   Logo: () => <></>,
 };
 
-const { MobileRight } = VM.require("every.near/widget/components.navbar.mobile-right") || {
+const { MobileRight } = VM.require("${config_account}/widget/components.navbar.mobile-right") || {
   MobileRight: () => <></>,
 };
-const { MobileLeft } = VM.require("every.near/widget/components.navbar.mobile-left") || {
+const { MobileLeft } = VM.require("${config_account}/widget/components.navbar.mobile-left") || {
   MobileLeft: () => <></>,
 };
 
@@ -35,7 +35,7 @@ const {
   Sun,
   UserCircle,
   Video,
-} = VM.require("every.near/widget/icons") || {
+} = VM.require("${config_account}/widget/icons") || {
   Bell: () => <></>,
   Check: () => <></>,
   ChevronDown: () => <></>,

diff --git a/apps/every.near/widget/components/navbar/mobile-left.jsx b/apps/every.near/widget/components/navbar/mobile-left.jsx
@@ -1,11 +1,11 @@
-const { Badge, Button, Logo } = VM.require("every.near/widget/components") || {
+const { Badge, Button, Logo } = VM.require("${config_account}/widget/components") || {
   Badge: () => <></>,
   Button: () => <></>,
   Logo: () => <></>,
 };
 
 const { Code, Everything, LayoutTemplate, PaintRoller, PartyPopper, ShoppingCart, X, Video } =
-  VM.require("every.near/widget/icons") || {
+  VM.require("${config_account}/widget/icons") || {
     Code: () => <></>,
     Everything: () => <></>,
     LayoutTemplate: () => <></>,

diff --git a/apps/every.near/widget/components/navbar/mobile-right.jsx b/apps/every.near/widget/components/navbar/mobile-right.jsx
@@ -1,4 +1,4 @@
-const { Avatar, Button, Logo } = VM.require("every.near/widget/components") || {
+const { Avatar, Button, Logo } = VM.require("${config_account}/widget/components") || {
   Avatar: () => <></>,
   Button: () => <></>,
   Logo: () => <></>,
@@ -17,7 +17,7 @@ const {
   QRCode,
   Download,
   LogOut,
-} = VM.require("every.near/widget/icons") || {
+} = VM.require("${config_account}/widget/icons") || {
   Everything: () => <></>,
   X: () => <></>,
   GitFork: () => <></>,

diff --git a/apps/every.near/widget/components/ui/avatar-group.jsx b/apps/every.near/widget/components/ui/avatar-group.jsx
@@ -1,4 +1,4 @@
-const { Avatar } = VM.require("every.near/widget/components.ui.avatar") || {
+const { Avatar } = VM.require("${config_account}/widget/components.ui.avatar") || {
   Avatar: () => <></>,
 };
 

diff --git a/apps/every.near/widget/components/ui/avatar.jsx b/apps/every.near/widget/components/ui/avatar.jsx
@@ -1,4 +1,4 @@
-const { User } = VM.require("every.near/widget/icons") || {
+const { User } = VM.require("${config_account}/widget/icons") || {
   User: () => <></>,
 };
 

diff --git a/apps/every.near/widget/components/ui/badge.jsx b/apps/every.near/widget/components/ui/badge.jsx
@@ -13,6 +13,10 @@ const StyledBadge = styled.div`
   background: rgba(0, 0, 0, 0.05);
   color: #171717;
   background: ${(props) => {
+    if (props.variant === "outline") {
+      return "white";
+    }
+
     if (props.color === "black") {
       return props.variant === "alpha" ? "rgba(0, 0, 0, 0.05)" : "#171717";
     } else if (props.color === "blue") {
@@ -27,6 +31,19 @@ const StyledBadge = styled.div`
   }};
 
   color: ${(props) => {
+    if (props.variant === "outline") {
+      if (props.color === "black") {
+        return "var(--badge-alpha-black-color, #171717)";
+      } else if (props.color === "blue") {
+        return "#006ADC";
+      } else if (props.color === "green") {
+        return "#18794E";
+      } else if (props.color === "yellow") {
+        return "#35290F";
+      } else if (props.color === "red") {
+        return "#CD2B31";
+      }
+    }
     if (props.color === "black") {
       return props.variant === "alpha" ? "var(--badge-alpha-black-color, #171717)" : "#fff";
     } else if (props.color === "blue") {
@@ -40,6 +57,53 @@ const StyledBadge = styled.div`
     }
   }};
 
+  border: 1px solid
+    ${(props) => {
+      if (props.variant === "outline") {
+        if (props.color === "black") {
+          return "var(--badge-alpha-black-color, #171717)";
+        } else if (props.color === "blue") {
+          return "#006ADC";
+        } else if (props.color === "green") {
+          return "#18794E";
+        } else if (props.color === "yellow") {
+          return "#35290F";
+        } else if (props.color === "red") {
+          return "#CD2B31";
+        }
+      }
+    }};
+
+  svg,
+  path {
+    fill: ${(props) => {
+      if (props.variant === "outline") {
+        if (props.color === "black") {
+          return "var(--badge-alpha-black-color, #171717)";
+        } else if (props.color === "blue") {
+          return "#006ADC";
+        } else if (props.color === "green") {
+          return "#18794E";
+        } else if (props.color === "yellow") {
+          return "#35290F";
+        } else if (props.color === "red") {
+          return "#CD2B31";
+        }
+      }
+      if (props.color === "black") {
+        return props.variant === "alpha" ? "var(--badge-alpha-black-color, #171717)" : "#fff";
+      } else if (props.color === "blue") {
+        return props.variant === "alpha" ? "#006ADC" : "#fff";
+      } else if (props.color === "green") {
+        return props.variant === "alpha" ? "#18794E" : "#fff";
+      } else if (props.color === "yellow") {
+        return props.variant === "alpha" ? "#35290F" : "#fff";
+      } else if (props.color === "red") {
+        return props.variant === "alpha" ? "#CD2B31" : "#fff";
+      }
+    }};
+  }
+
   font-family: Poppins, sans-serif;
   font-size: 14px;
   font-weight: 500;

diff --git a/apps/every.near/widget/components/ui/chip.jsx b/apps/every.near/widget/components/ui/chip.jsx
@@ -1,4 +1,4 @@
-const { Plus, X } = VM.require("every.near/widget/icons") || {
+const { Plus, X } = VM.require("${config_account}/widget/icons") || {
   Plus: () => <></>,
   X: () => <></>,
 };

diff --git a/apps/every.near/widget/components/ui/library.jsx b/apps/every.near/widget/components/ui/library.jsx
@@ -1,5 +1,5 @@
 const { Avatar, AvatarGroup, Button, Badge, Container } = VM.require(
-  "every.near/widget/components"
+  "${config_account}/widget/components"
 ) || {
   Avatar: () => <></>,
   AvatarGroup: () => <></>,
@@ -210,15 +210,15 @@ return (
     <h2>Chips</h2>
     <h3>Single</h3>
     <Widget
-      src="every.near/widget/components.chips"
+      src="${config_account}/widget/components.chips"
       props={{
         items: badgeColors,
         onSelect: (selected) => setSelected(selected),
       }}
     />
     <h3>Multiple</h3>
     <Widget
-      src="every.near/widget/components.chips"
+      src="${config_account}/widget/components.chips"
       props={{
         items: badgeColors,
         onSelect: (selected) => setSelected(selected),

diff --git a/apps/every.near/widget/components/ui/logo.jsx b/apps/every.near/widget/components/ui/logo.jsx
@@ -1,4 +1,4 @@
-const { Everything } = VM.require("every.near/widget/icons") || {
+const { Everything } = VM.require("${config_account}/widget/icons") || {
   Everything: () => <></>,
 };
 

diff --git a/apps/every.near/widget/components/ui/tag.jsx b/apps/every.near/widget/components/ui/tag.jsx
@@ -0,0 +1,24 @@
+const { X } = VM.require("${config_account}/widget/icons") || {
+  X: () => <></>,
+};
+
+const { Badge } = VM.require("${config_account}/widget/components") || {
+  Badge: () => <></>,
+};
+
+const Tag = ({ children, size, variant, color, ...restProps }) => {
+  return (
+    <Badge
+      size={size}
+      variant={variant === "soft" ? "alpha" : variant}
+      color={color ?? "gray"}
+      {...restProps}
+      style={{ cursor: "pointer" }}
+    >
+      {children}
+      <X />
+    </Badge>
+  );
+};
+
+return { Tag };
diff --git a/apps/every.near/widget/icons.jsx b/apps/every.near/widget/icons.jsx
@@ -1,28 +1,28 @@
-const { Bell } = VM.require("every.near/widget/icons.bell");
-const { Check } = VM.require("every.near/widget/icons.check");
-const { ChevronDown } = VM.require("every.near/widget/icons.chevron-down");
-const { ChevronUp } = VM.require("every.near/widget/icons.chevron-up");
-const { Code } = VM.require("every.near/widget/icons.code");
-const { Download } = VM.require("every.near/widget/icons.download");
-const { Everything } = VM.require("every.near/widget/icons.everything");
-const { FileCode } = VM.require("every.near/widget/icons.file-code");
-const { GitFork } = VM.require("every.near/widget/icons.git-fork");
-const { Grip } = VM.require("every.near/widget/icons.grip");
-const { History } = VM.require("every.near/widget/icons.history");
-const { LayoutTemplate } = VM.require("every.near/widget/icons.layout-template");
-const { LogOut } = VM.require("every.near/widget/icons.log-out");
-const { Menu } = VM.require("every.near/widget/icons.menu");
-const { Moon } = VM.require("every.near/widget/icons.moon");
-const { PaintRoller } = VM.require("every.near/widget/icons.paint-roller");
-const { PartyPopper } = VM.require("every.near/widget/icons.party-popper");
-const { Plus } = VM.require("every.near/widget/icons.plus");
-const { QRCode } = VM.require("every.near/widget/icons.qr-code");
-const { ShoppingCart } = VM.require("every.near/widget/icons.shopping-cart");
-const { Sun } = VM.require("every.near/widget/icons.sun");
-const { UserCircle } = VM.require("every.near/widget/icons.user-circle");
-const { User } = VM.require("every.near/widget/icons.user");
-const { Video } = VM.require("every.near/widget/icons.video");
-const { X } = VM.require("every.near/widget/icons.x");
+const { Bell } = VM.require("${config_account}/widget/icons.bell");
+const { Check } = VM.require("${config_account}/widget/icons.check");
+const { ChevronDown } = VM.require("${config_account}/widget/icons.chevron-down");
+const { ChevronUp } = VM.require("${config_account}/widget/icons.chevron-up");
+const { Code } = VM.require("${config_account}/widget/icons.code");
+const { Download } = VM.require("${config_account}/widget/icons.download");
+const { Everything } = VM.require("${config_account}/widget/icons.everything");
+const { FileCode } = VM.require("${config_account}/widget/icons.file-code");
+const { GitFork } = VM.require("${config_account}/widget/icons.git-fork");
+const { Grip } = VM.require("${config_account}/widget/icons.grip");
+const { History } = VM.require("${config_account}/widget/icons.history");
+const { LayoutTemplate } = VM.require("${config_account}/widget/icons.layout-template");
+const { LogOut } = VM.require("${config_account}/widget/icons.log-out");
+const { Menu } = VM.require("${config_account}/widget/icons.menu");
+const { Moon } = VM.require("${config_account}/widget/icons.moon");
+const { PaintRoller } = VM.require("${config_account}/widget/icons.paint-roller");
+const { PartyPopper } = VM.require("${config_account}/widget/icons.party-popper");
+const { Plus } = VM.require("${config_account}/widget/icons.plus");
+const { QRCode } = VM.require("${config_account}/widget/icons.qr-code");
+const { ShoppingCart } = VM.require("${config_account}/widget/icons.shopping-cart");
+const { Sun } = VM.require("${config_account}/widget/icons.sun");
+const { UserCircle } = VM.require("${config_account}/widget/icons.user-circle");
+const { User } = VM.require("${config_account}/widget/icons.user");
+const { Video } = VM.require("${config_account}/widget/icons.video");
+const { X } = VM.require("${config_account}/widget/icons.x");
 
 return {
   Bell,

diff --git a/apps/every.near/widget/index.jsx b/apps/every.near/widget/index.jsx
@@ -1,5 +1,5 @@
 const widgets = {
-  navbar: "every.near/widget/components.navbar",
+  navbar: "${config_account}/widget/components.navbar",
 };
 
 const config = {
@@ -23,7 +23,7 @@ const config = {
     param: "page",
     routes: {
       home: {
-        path: "every.near/widget/page.home",
+        path: "${config_account}/widget/page.home",
         blockHeight: "final",
         init: {
           name: "Home",
@@ -144,6 +144,6 @@ const Root = styled.div`
 
 return (
   <Root>
-    <Widget src="every.near/widget/app.view" props={{ config, ...props }} />
+    <Widget src="${config_account}/widget/app.view" props={{ config, ...props }} />
   </Root>
 );
diff --git a/apps/every.near/widget/page/home.jsx b/apps/every.near/widget/page/home.jsx
@@ -1,9 +1,9 @@
-const { Container } = VM.require("every.near/widget/components") || {
+const { Container } = VM.require("${config_account}/widget/components") || {
   Container: () => <></>,
 };
 
 return (
   <Container>
-    <Widget src="every.near/widget/components.ui.library" loading="" />
+    <Widget src="${config_account}/widget/components.ui.library" loading="" />
   </Container>
 );