1 files changed, 50 insertions, 0 deletions
diff --git a/front/src/components/Sigil.tsx b/front/src/components/Sigil.tsx
new file mode 100644
index 0000000..4978a72
--- /dev/null
+++ b/front/src/components/Sigil.tsx
@@ -0,0 +1,50 @@
+import comet from "@/assets/icons/comet.svg";
+import { auraToHex } from "@/logic/utils";
+import { isValidPatp } from "urbit-ob";
+import { sigil } from "urbit-sigils";
+import { reactRenderer } from "urbit-sigils";
+
+interface SigilProps {
+  patp: string;
+  size: number;
+  color?: string;
+}
+
+const Sigil = (props: SigilProps) => {
+  const color = props.color ? auraToHex(props.color) : "black";
+  if (!isValidPatp(props.patp)) return <div className="sigil bad-sigil">X</div>;
+  else if (props.patp.length > 28)
+    return (
+      <img
+        className="comet-icon"
+        src={comet}
+        alt=""
+        style={{ width: `${props.size}px`, height: `${props.size}px` }}
+      />
+    );
+  else if (props.patp.length > 15)
+    // moons
+    return (
+      <>
+        {sigil({
+          patp: props.patp.substring(props.patp.length - 13),
+          renderer: reactRenderer,
+          size: props.size,
+          colors: ["grey", "white"],
+        })}
+      </>
+    );
+  else
+    return (
+      <>
+        {sigil({
+          patp: props.patp,
+          renderer: reactRenderer,
+          size: props.size,
+          colors: [color, "white"],
+        })}
+      </>
+    );
+};
+
+export default Sigil;