53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import * as Icons from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
type IconName = keyof typeof Icons;
|
|
type ButtonProps = {
|
|
icon?: keyof typeof Icons;
|
|
text?: string;
|
|
href: string;
|
|
target?: "_blank" | "_self" | "_parent" | "_top";
|
|
size?: "sm" | "md" | "lg";
|
|
variation?: "primary" | "accent" | "outline";
|
|
};
|
|
|
|
const Button: React.FC<ButtonProps> = ({
|
|
icon,
|
|
text,
|
|
href,
|
|
target,
|
|
size = "md",
|
|
variation = "primary",
|
|
}) => {
|
|
const baseStyles = "inline-flex items-center justify-center rounded font-medium focus:outline-none transition no-underline";
|
|
|
|
const sizeStyles = {
|
|
sm: "px-3 py-1 my-6 text-sm",
|
|
md: "px-4 py-2 my-6 text-base",
|
|
lg: "px-5 py-3 my-6 text-lg",
|
|
};
|
|
|
|
const variationStyles = {
|
|
primary: "bg-primary text-white hover:bg-primary/90",
|
|
accent: "bg-accent text-white hover:bg-accent/90",
|
|
outline: "border border-accent text-accent hover:bg-accent/10",
|
|
};
|
|
|
|
const Icon = icon ? (Icons[icon] as React.FC<{ className?: string }>) : null; // Tipe eksplisit sebagai React.FC
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
target={target}
|
|
rel={target === "_blank" ? "noopener noreferrer" : undefined}
|
|
className={`${baseStyles} ${sizeStyles[size]} ${variationStyles[variation]}`}
|
|
>
|
|
{text && <span>{text}</span>}
|
|
{Icon && <Icon className="mr-2 h-5 w-5" />}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default Button;
|