@rpcbase/client 0.214.0 → 0.216.0

package/ui/SelectPills/index.tsx

@@ -0,0 +1,96 @@
+import "./select-pills.scss"
+
+
+type Props = {
+  direction?: "row" | "col";
+  size?: "md" | "sm";
+  items: Array<{ key: string; icon?: string; name: string; description?: string }>;
+  onChange: (key: string) => void;
+  activeKey?: string;
+};
+
+export const SelectPills= ({
+  direction = "row",
+  size = "md",
+  items,
+  onChange,
+  activeKey,
+}: Props) => {
+  const handleSelectType = (type: string) => () => {
+    onChange(type)
+  }
+
+  const renderRow = () => {
+    const iconSize = size === "sm" ? "24px" : "32px"
+
+    return (
+      <div className={`select-pills mb-3 card-group direction-row`}>
+        {items.map((item, index) => (
+          <div
+            key={`pill-${index}`}
+            id={`select-pill-${item.key}`}
+            className={`card select-pill ${activeKey === item.key ? "active" : ""}`}
+            onClick={handleSelectType(item.key)}
+          >
+            <div className={`card-body d-flex p-2 ${item.description ? "flex-row" : "flex-column"}`}>
+              {item.icon && (
+                <img
+                  className="d-flex mx-auto align-self-center"
+                  width={iconSize}
+                  height={iconSize}
+                  src={item.icon}
+                />
+              )}
+              <div className={`flex-column ${item.description ? "ms-3" : "text-center mt-2"}`}>
+                <h6 className="card-title mb-1 fw-bold">{item.name}</h6>
+                {item.description && (<p className="card-text">{item.description}</p>)}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const renderCol = () => {
+    const iconSize = size === "sm" ? "24px" : "32px"
+
+    return (
+      <div className="select-pills">
+        {items.map((item, index) => (
+          <div
+            key={`pill-${index}`}
+            id={`select-pill-${item.key}`}
+            className={`card select-pill direction-col ${activeKey === item.key ? "active" : ""}`}
+            onClick={handleSelectType(item.key)}
+          >
+            <div className="card-body d-flex flex-row px-2 py-3">
+              {item.icon && (
+                <img
+                  className="d-flex align-self-center me-2"
+                  style={{width: iconSize, height: iconSize}}
+                  src={item.icon}
+                />
+              )}
+
+              {size === "md" && (
+                <div className="flex-column">
+                  <h6 className="card-title mb-1 fw-bold">{item.name}</h6>
+                  <p className="card-text">{item.description}</p>
+                </div>
+              )}
+              {size === "sm" && (
+                <div className="">
+                  <h6 className="card-title my-0 d-inline-block me-1 fw-bold">{item.name}</h6>
+                  <span className="card-text">{item.description}</span>
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return direction === "row" ? renderRow() : renderCol()
+}

package/ui/SelectPills/select-pills.scss

@@ -0,0 +1,66 @@
+@import "helpers";
+
+.select-pills {
+  .card.select-pill {
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background: $light;
+    }
+
+    &:active {
+      background: $gray-300;
+    }
+
+    &.active {
+      background: $blue-300;
+      color: $white;
+    }
+  }
+
+  .select-pill {
+    .card-text {
+      color: $gray-600;
+    }
+
+    &.active,
+    &:active {
+      .card-text {
+        color: $gray-200;
+      }
+    }
+  }
+
+  .card.select-pill.direction-col {
+    cursor: pointer;
+    user-select: none;
+    border-radius: 0;
+    border-bottom: none;
+
+    &:first-child {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+    }
+
+    &:hover {
+      background: $light;
+    }
+
+    &:active {
+      background: $gray-300;
+    }
+
+    &.active {
+      background: $primary;
+      border-color: darken($primary, 15%);
+      color: $white;
+    }
+  }
+}

package/ui/icons/Close.tsx

@@ -0,0 +1,14 @@
+
+export const CloseIcon = ({size = 16}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      width={size}
+      height={size}
+    >
+      <path d="M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z" />
+    </svg>
+  )
+}

package/ui/icons/index.tsx

@@ -1,5 +1,6 @@
 
 export * from "./AddAccount"
 export * from "./Billing"
+export * from "./Close"
 export * from "./Organization"
 export * from "./Signout"