GeorgeandClaude Sonnet 5
ab3c613165
Base para el flujo de ramas por cliente. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import type { ElementType } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
interface ActionCardProps {
|
|
title: string;
|
|
icon: ElementType;
|
|
to: string;
|
|
}
|
|
|
|
export default function DashboardActionCard({
|
|
title,
|
|
icon: Icon,
|
|
to,
|
|
}: ActionCardProps) {
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<div
|
|
onClick={() => navigate(to)}
|
|
style={{
|
|
background: "var(--color-surface)",
|
|
border: "1px solid var(--color-border)",
|
|
borderRadius: "8px",
|
|
padding: "24px 20px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: "12px",
|
|
cursor: "pointer",
|
|
transition: "background 0.15s",
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLDivElement).style.background =
|
|
"var(--color-primary-active)";
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLDivElement).style.background =
|
|
"var(--color-surface)";
|
|
}}
|
|
>
|
|
<Icon
|
|
size={40}
|
|
style={{ color: "var(--color-primary)" }}
|
|
/>
|
|
<span
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
fontWeight: 600,
|
|
color: "var(--color-text)",
|
|
}}
|
|
>
|
|
{title}
|
|
</span>
|
|
</div>
|
|
);
|
|
} |