From bb436b2eca23f39b85bf915a477798bdf40665c7 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Tue, 9 May 2023 13:06:59 -0400
Subject: [PATCH] better badge

---
 chain-forge/src/CsvNode.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/chain-forge/src/CsvNode.js b/chain-forge/src/CsvNode.js
index 21de84e..b5ab32d 100644
--- a/chain-forge/src/CsvNode.js
+++ b/chain-forge/src/CsvNode.js
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Text } from '@mantine/core';
+import { Badge, Text } from '@mantine/core';
 import useStore from './store';
 import NodeLabel from './NodeLabelComponent'
 import { IconCsv } from '@tabler/icons-react';
@@ -55,7 +55,8 @@ const CsvNode = ({ data, id }) => {
         // generate a HTML code that highlights the elements
         const html = [];
         elements.forEach((e, idx) => {
-            html.push(<span key={idx} className="csv-element">{e}</span>);
+            html.push(<Badge color="orange" size="lg" radius="sm">{e}</Badge>)
+            // html.push(<span key={idx} className="csv-element">{e}</span>);
             if (idx < elements.length - 1) {
                 html.push(<span key={idx + 'comma'} className="csv-comma">,</span>);
             }