89 lines
4.3 KiB
TypeScript
89 lines
4.3 KiB
TypeScript
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faSave, faX} from "@fortawesome/free-solid-svg-icons";
|
|
import React from "react";
|
|
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
|
|
|
interface PanelHeaderProps {
|
|
title: string;
|
|
badge?: string;
|
|
description: string;
|
|
icon?: IconDefinition;
|
|
callBackAction?: () => Promise<void>;
|
|
secondActionIcon?: IconDefinition;
|
|
secondActionCallback?: () => Promise<void>;
|
|
actionIcon?: IconDefinition;
|
|
actionText?: string;
|
|
}
|
|
|
|
export default function PanelHeader(
|
|
{
|
|
title,
|
|
badge,
|
|
description,
|
|
icon,
|
|
callBackAction,
|
|
secondActionCallback,
|
|
secondActionIcon = faSave,
|
|
actionIcon = faX,
|
|
actionText
|
|
}: PanelHeaderProps) {
|
|
return (
|
|
<div className={'border-b border-primary/30 shrink-0 bg-gradient-to-r from-dark-background/50 to-transparent'}>
|
|
<div className="flex justify-between items-center p-4">
|
|
<div className="flex-1">
|
|
<h2 className="text-lg lg:text-xl text-primary font-bold flex items-center gap-3 flex-wrap">
|
|
{
|
|
icon && (
|
|
<div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
|
<FontAwesomeIcon icon={icon} className="text-primary w-5 h-5"/>
|
|
</div>
|
|
)
|
|
}
|
|
<span className="tracking-wide">{title}</span>
|
|
{
|
|
badge &&
|
|
<span
|
|
className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-medium border border-primary/30">{badge}</span>
|
|
}
|
|
</h2>
|
|
{description && <p className="text-text-secondary text-xs mt-2 ml-13">{description}</p>}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{
|
|
actionText && (
|
|
<button onClick={callBackAction}
|
|
className="group text-text-primary px-4 py-2 text-sm bg-secondary/50 rounded-xl hover:bg-secondary transition-all border border-secondary/50 hover:border-primary/30 flex items-center gap-2 hover:shadow-md hover:scale-105">
|
|
<div
|
|
className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center transition-transform group-hover:scale-110">
|
|
<FontAwesomeIcon icon={actionIcon} className="w-4 h-4"/>
|
|
</div>
|
|
{
|
|
actionText && <span className="font-medium">{actionText}</span>
|
|
}
|
|
</button>
|
|
)
|
|
}
|
|
{
|
|
secondActionCallback && (
|
|
<button onClick={secondActionCallback}
|
|
className="group w-10 h-10 bg-primary/10 hover:bg-primary/20 rounded-lg flex items-center justify-center transition-all hover:shadow-md hover:scale-110 border border-primary/30">
|
|
<FontAwesomeIcon icon={secondActionIcon}
|
|
className="w-4 h-4 text-primary transition-transform group-hover:scale-110"/>
|
|
</button>
|
|
)
|
|
}
|
|
{
|
|
callBackAction && actionIcon && !actionText && (
|
|
<button onClick={callBackAction}
|
|
className="group text-muted hover:text-text-primary transition-all hover:scale-110">
|
|
<FontAwesomeIcon icon={actionIcon}
|
|
className={'w-5 h-5 transition-transform group-hover:rotate-90'}/>
|
|
</button>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|