Better Decorative Nodes

Author: AttAditya

src/components/engine/DecorativeNode/index.tsx

@@ -1,5 +1,7 @@
 import type { NodeModel } from "@defs/Node"
 
+import { DynamicIcon } from "@components/commons/DynamicIcon";
+
 import "./style.css";
 
 export function DecorativeNode({
@@ -8,7 +10,8 @@ export function DecorativeNode({
   node: NodeModel;
 }) {
   return (<>
-    <div className="decorative-node">
+    <div className="decorative-node" style={{ color: node.color }}>
+      <DynamicIcon className="decorative-node-icon" icon={node.icon} />
       <span className="decorative-node-name">{node.name}</span>
     </div>
   </>);

src/components/engine/DecorativeNode/style.css

@@ -1,9 +1,20 @@
 .decorative-node {
   grid-column: 1 / -1;
   margin-top: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.25rem;
+  background-color: currentColor;
+  border-radius: 0.25rem;
 }
 
 .decorative-node:first-child {
   margin-top: 0;
 }
 
+.decorative-node-icon {
+  height: 100%;
+  padding: 0.25rem;
+}
+