@isthatuzii/create-nano-app/templates/solid-js/src/template-ui/components/layout/IconToolbar.jsx

Desktop application scaffolding tool for the Nano Framework

import { createSignal, onMount } from "solid-js";
import { 
  FolderOpen, 
  Database, 
  FileText, 
  Settings, 
  Terminal,
  Layout,
  Search,
  Save
} from "lucide-solid";
import "./IconToolbar.css";
import { createIconToolbarFunctions } from "./IconToolbar.functions.js";

function IconToolbar(props) {
  const [state, setState] = createSignal({
    activeTool: 'open'
  });

  const functions = createIconToolbarFunctions(
    state,
    setState,
    props
  );

  onMount(() => {
    functions.initialize();
  });

  const toolItems = [
    { id: 'open', icon: FolderOpen, label: 'Open', group: 'file' },
    { id: 'data', icon: Database, label: 'Data', group: 'file' },
    { id: 'content', icon: FileText, label: 'Content', group: 'file' },
    { id: 'settings', icon: Settings, label: 'Settings', group: 'tools' },
    { id: 'console', icon: Terminal, label: 'Console', group: 'tools' },
    { id: 'layout', icon: Layout, label: 'Layout', group: 'view' },
    { id: 'search', icon: Search, label: 'Search', group: 'view' },
    { id: 'save', icon: Save, label: 'Save', group: 'file' }
  ];

  return (
    <div class="icon-toolbar">
      <div class="toolbar-section">
        {toolItems.map(item => (
          <div 
            class="toolbar-item"
            classList={{ active: state().activeTool === item.id }}
            onClick={() => functions.handleToolClick(item.id)}
            title={item.label}
          >
            <item.icon class="icon size-md" />
          </div>
        ))}
      </div>
    </div>
  );
}

export default IconToolbar;