34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import React from "react";
|
|
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
|
|
|
interface CollapsableButtonProps {
|
|
showCollapsable: boolean;
|
|
text: string;
|
|
onClick: () => void;
|
|
icon?: IconDefinition;
|
|
}
|
|
|
|
export default function CollapsableButton(
|
|
{
|
|
showCollapsable,
|
|
text,
|
|
icon,
|
|
onClick
|
|
}: CollapsableButtonProps) {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={`group px-4 py-2 rounded-lg mr-2 transition-all duration-200 flex items-center gap-2 ${
|
|
showCollapsable
|
|
? 'bg-primary/20 text-primary border border-primary/40 shadow-md shadow-primary/20 scale-105'
|
|
: 'bg-secondary/30 text-muted hover:text-text-primary hover:bg-secondary hover:shadow-sm hover:scale-105'
|
|
}`}
|
|
>
|
|
{icon && <FontAwesomeIcon icon={icon}
|
|
className="w-4 h-4 transition-transform duration-200 group-hover:scale-110"/>}
|
|
<span className={'hidden lg:block text-sm font-medium'}>{text}</span>
|
|
</button>
|
|
)
|
|
}
|