🆙 Cleanup

src/components/inventory/views/prefix/InventoryPrefixView.tsx

@@ -1,8 +1,32 @@
 import { FC, useEffect, useState } from 'react';
 import { FaTrashAlt } from 'react-icons/fa';
-import { IPrefixItem, LocalizeText } from '../../../../api';
+import { IPrefixItem, LocalizeText, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../api';
 import { useInventoryPrefixes, useNotification } from '../../../../hooks';
-import { NitroButton, PrefixPreview } from '../../../../layout';
+import { NitroButton } from '../../../../layout';
+
+const PrefixPreview: FC<{ text: string; color: string; icon: string; effect?: string; className?: string; textSize?: string }> = ({ text, color, icon, effect = '', className = '', textSize = 'text-sm' }) =>
+{
+    const colors = parsePrefixColors(text, color);
+    const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
+    const fxStyle = getPrefixEffectStyle(effect, colors[0] || '#FFFFFF');
+
+    return (
+        <span className={ `font-bold ${ textSize } ${ className }` } style={ fxStyle }>
+            { effect === 'pulse' && <style>{ PREFIX_EFFECT_KEYFRAMES }</style> }
+            { icon && <span className="mr-0.5">{ icon }</span> }
+            <span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
+                {'{'}
+                { hasMultiColor
+                    ? [ ...text ].map((char, i) => (
+                        <span key={ i } style={ { color: colors[i] || colors[colors.length - 1], ...getPrefixEffectStyle(effect, colors[i]) } }>{ char }</span>
+                    ))
+                    : text
+                }
+                {'}'}
+            </span>
+        </span>
+    );
+};
 
 const PrefixItemView: FC<{
     prefix: IPrefixItem;