dev: create a global component for emoji/icon logo (#4851)

packages/ui/src/emoji/helpers.ts

@@ -0,0 +1,11 @@
+export const emojiCodeToUnicode = (emoji: string) => {
+  if (!emoji) return "";
+
+  // convert emoji code to unicode
+  const uniCodeEmoji = emoji
+    .split("-")
+    .map((emoji) => parseInt(emoji, 10).toString(16))
+    .join("-");
+
+  return uniCodeEmoji;
+};

packages/ui/src/emoji/index.ts

@@ -2,3 +2,4 @@ export * from "./emoji-icon-picker-new";
 export * from "./emoji-icon-picker";
 export * from "./emoji-icon-helper";
 export * from "./icons";
+export * from "./logo";

packages/ui/src/emoji/logo.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { FC } from "react";
+import { Emoji } from "emoji-picker-react";
+import useFontFaceObserver from "use-font-face-observer";
+// icons
+import { LUCIDE_ICONS_LIST } from "./icons";
+// helpers
+import { emojiCodeToUnicode } from "./helpers";
+
+type TLogoProps = {
+  in_use: "emoji" | "icon";
+  emoji?: {
+    value?: string;
+    url?: string;
+  };
+  icon?: {
+    name?: string;
+    color?: string;
+  };
+};
+
+type Props = {
+  logo: TLogoProps;
+  size?: number;
+  type?: "lucide" | "material";
+};
+
+export const Logo: FC<Props> = (props) => {
+  const { logo, size = 16, type = "material" } = props;
+
+  // destructuring the logo object
+  const { in_use, emoji, icon } = logo;
+
+  // derived values
+  const value = in_use === "emoji" ? emoji?.value : icon?.name;
+  const color = icon?.color;
+  const lucideIcon = LUCIDE_ICONS_LIST.find((item) => item.name === value);
+
+  const isMaterialSymbolsFontLoaded = useFontFaceObserver([
+    {
+      family: `Material Symbols Rounded`,
+      style: `normal`,
+      weight: `normal`,
+      stretch: `condensed`,
+    },
+  ]);
+  // if no value, return empty fragment
+  if (!value) return <></>;
+
+  if (!isMaterialSymbolsFontLoaded) {
+    return (
+      <span
+        style={{
+          height: size,
+          width: size,
+        }}
+        className="rounded animate-pulse bg-custom-background-80"
+      />
+    );
+  }
+
+  // emoji
+  if (in_use === "emoji") {
+    return <Emoji unified={emojiCodeToUnicode(value)} size={size} />;
+  }
+
+  // icon
+  if (in_use === "icon") {
+    return (
+      <>
+        {type === "lucide" ? (
+          <>
+            {lucideIcon && (
+              <lucideIcon.element
+                style={{
+                  color: color,
+                  height: size,
+                  width: size,
+                }}
+              />
+            )}
+          </>
+        ) : (
+          <span
+            className="material-symbols-rounded"
+            style={{
+              fontSize: size,
+              color: color,
+              scale: "115%",
+            }}
+          >
+            {value}
+          </span>
+        )}
+      </>
+    );
+  }
+
+  // if no value, return empty fragment
+  return <></>;
+};