From 9f1d2878df7c6c54ff9282ebec6ede0cb8a6a851 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 6 Mar 2024 14:56:56 -0300
Subject: [PATCH] Add emoji support to CollectionCardComponent

---
 .../src/components/exampleComponent/index.tsx   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/exampleComponent/index.tsx b/src/frontend/src/components/exampleComponent/index.tsx
index fa021b299..5618ff996 100644
--- a/src/frontend/src/components/exampleComponent/index.tsx
+++ b/src/frontend/src/components/exampleComponent/index.tsx
@@ -30,6 +30,8 @@ export default function CollectionCardComponent({
 }) {
     const addFlow = useFlowsManagerStore((state) => state.addFlow);
     const navigate = useNavigate();
+    const emojiRegex = /\p{Emoji}/u;
+    const isEmoji= (str:string)=> emojiRegex.test(str);
 
     return (
         <Card
@@ -41,17 +43,20 @@ export default function CollectionCardComponent({
                 <CardHeader>
                     <div>
                         <CardTitle className="flex w-full items-center justify-between gap-3 text-xl">
-                            {flow.icon && (
-                                <div className="flex-shrink-0 h-7 w-7">
-                                    {flow.icon}
+                            {flow.icon && isEmoji(flow.icon) && (
+                                <div className="rounded-md p-2 flex align-middle items-center justify-center" style={{backgroundColor:flow.icon_bg_color}}>
+
+                                    <div className="pl-0.5 h-7 w-7">
+                                        {flow.icon}
+                                    </div>
+
                                 </div>
-                            
                             )}
-                            {!flow.icon && <IconComponent
+                            {(!flow.icon || !isEmoji(flow.icon)) && <IconComponent
                                 className={cn(
                                     "flex-shrink-0 h-7 w-7 text-flow-icon",
                                 )}
-                                name="Group"
+                                name={flow.icon || "Group"}
                             />}
                             <ShadTooltip content={flow.name}>
                                 <div className="w-full truncate">{flow.name}</div>