97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { useTheme } from "@/lib/contexts/ThemeContext";
|
||
|
|
|
||
|
|
interface ThemedButtonProps {
|
||
|
|
children: React.ReactNode;
|
||
|
|
onClick?: () => void;
|
||
|
|
variant?: "primary" | "secondary" | "outline";
|
||
|
|
size?: "sm" | "md" | "lg";
|
||
|
|
disabled?: boolean;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ThemedButton: React.FC<ThemedButtonProps> = ({
|
||
|
|
children,
|
||
|
|
onClick,
|
||
|
|
variant = "primary",
|
||
|
|
size = "md",
|
||
|
|
disabled = false,
|
||
|
|
className = "",
|
||
|
|
}) => {
|
||
|
|
const { colors } = useTheme();
|
||
|
|
|
||
|
|
const sizeClasses = {
|
||
|
|
sm: "px-3 py-1.5 text-sm",
|
||
|
|
md: "px-4 py-2 text-base",
|
||
|
|
lg: "px-6 py-3 text-lg",
|
||
|
|
};
|
||
|
|
|
||
|
|
const variantStyles = {
|
||
|
|
primary: {
|
||
|
|
backgroundColor: colors.primary,
|
||
|
|
color: "white",
|
||
|
|
border: `1px solid ${colors.primary}`,
|
||
|
|
hover: {
|
||
|
|
backgroundColor: colors.secondary,
|
||
|
|
borderColor: colors.secondary,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
secondary: {
|
||
|
|
backgroundColor: colors.surface,
|
||
|
|
color: colors.text,
|
||
|
|
border: `1px solid ${colors.border}`,
|
||
|
|
hover: {
|
||
|
|
backgroundColor: colors.hover,
|
||
|
|
borderColor: colors.primary,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
outline: {
|
||
|
|
backgroundColor: "transparent",
|
||
|
|
color: colors.primary,
|
||
|
|
border: `1px solid ${colors.primary}`,
|
||
|
|
hover: {
|
||
|
|
backgroundColor: colors.primary,
|
||
|
|
color: "white",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const style = variantStyles[variant];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={onClick}
|
||
|
|
disabled={disabled}
|
||
|
|
className={`
|
||
|
|
${sizeClasses[size]}
|
||
|
|
rounded-lg font-medium transition-all duration-200
|
||
|
|
disabled:opacity-50 disabled:cursor-not-allowed
|
||
|
|
${className}
|
||
|
|
`}
|
||
|
|
style={{
|
||
|
|
backgroundColor: style.backgroundColor,
|
||
|
|
color: style.color,
|
||
|
|
border: style.border,
|
||
|
|
}}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
if (!disabled) {
|
||
|
|
e.currentTarget.style.backgroundColor = style.hover.backgroundColor;
|
||
|
|
e.currentTarget.style.borderColor = style.hover.borderColor;
|
||
|
|
e.currentTarget.style.color = style.hover.color;
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
if (!disabled) {
|
||
|
|
e.currentTarget.style.backgroundColor = style.backgroundColor;
|
||
|
|
e.currentTarget.style.borderColor = style.border;
|
||
|
|
e.currentTarget.style.color = style.color;
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
};
|