LGram16
82cf4b8fd0
Backend changes (C#): - Add SelectRecipe method to MachineBridge for recipe selection - Add currentRecipeId tracking in MainForm - Implement SELECT_RECIPE handler in WebSocketServer Frontend changes (React/TypeScript): - Add selectRecipe method to communication layer - Update handleSelectRecipe to call backend and handle response - Recipe selection updates ModelInfoPanel automatically - Add error handling and logging for recipe operations Layout improvements: - Add Layout component with persistent Header and Footer - Create separate IOMonitorPage for full-screen I/O monitoring - Add dynamic IO tab switcher in Header (Inputs/Outputs) - Ensure consistent UI across all pages 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
|
|
interface TechButtonProps {
|
|
children?: React.ReactNode;
|
|
onClick?: () => void;
|
|
active?: boolean;
|
|
variant?: 'blue' | 'red' | 'amber' | 'green' | 'default' | 'danger';
|
|
className?: string;
|
|
disabled?: boolean;
|
|
title?: string;
|
|
}
|
|
|
|
export const TechButton: React.FC<TechButtonProps> = ({
|
|
children,
|
|
onClick,
|
|
active = false,
|
|
variant = 'blue',
|
|
className = '',
|
|
disabled = false,
|
|
title
|
|
}) => {
|
|
const colors = {
|
|
blue: 'from-blue-600 to-cyan-600 hover:shadow-glow-blue border-cyan-400/30',
|
|
red: 'from-red-600 to-pink-600 hover:shadow-glow-red border-red-400/30',
|
|
amber: 'from-amber-500 to-orange-600 hover:shadow-orange-500/50 border-orange-400/30',
|
|
green: 'from-emerald-500 to-green-600 hover:shadow-green-500/50 border-green-400/30',
|
|
default: 'from-slate-600 to-slate-500 hover:shadow-slate-500/50 border-slate-400/30',
|
|
danger: 'from-red-600 to-pink-600 hover:shadow-glow-red border-red-400/30'
|
|
};
|
|
|
|
const variantKey = variant === 'danger' ? 'red' : (variant === 'default' ? 'blue' : variant);
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
title={title}
|
|
className={`
|
|
relative px-4 py-2 font-tech font-bold tracking-wider uppercase transition-all duration-300
|
|
clip-tech border-b-2 border-r-2
|
|
${disabled
|
|
? 'opacity-50 cursor-not-allowed bg-slate-900 text-slate-600 border-slate-800'
|
|
: (active
|
|
? `bg-gradient-to-r ${colors[variantKey]} text-white`
|
|
: 'bg-slate-800/50 text-slate-400 hover:text-white hover:bg-slate-700/50 border-slate-600')
|
|
}
|
|
${className}
|
|
`}
|
|
>
|
|
{active && !disabled && <div className="absolute inset-0 bg-white/20 animate-pulse pointer-events-none"></div>}
|
|
{children}
|
|
</button>
|
|
);
|
|
};
|