98 lines
No EOL
3.7 KiB
TypeScript
98 lines
No EOL
3.7 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useSearchParams } from "react-router-dom";
|
|
import { MdExpandMore, MdExpandLess } from "react-icons/md";
|
|
|
|
import DashboardPromptSettings from './DashboardPromptSettings/DashboardPromptSettings';
|
|
import DashboardPromptSet from './DashboardPromptSet/DashboardPromptSet';
|
|
import { Prompt } from '../../../hooks/usePrompts';
|
|
|
|
import styles from './DashboardPrompt.module.css';
|
|
|
|
interface DashboardPromptProps {
|
|
onPromptRun: (prompt: Prompt) => void;
|
|
isCollapsed: boolean;
|
|
onToggleCollapse: () => void;
|
|
}
|
|
|
|
const DashboardPrompt: React.FC<DashboardPromptProps> = ({
|
|
onPromptRun,
|
|
isCollapsed,
|
|
onToggleCollapse
|
|
}) => {
|
|
const [activeTab, setActiveTab] = useState("Prompt Vorlage");
|
|
const [searchParams] = useSearchParams();
|
|
|
|
useEffect(() => {
|
|
const expandedPrompt = searchParams.get('expandedPrompt');
|
|
const promptId = searchParams.get('promptId');
|
|
|
|
if (expandedPrompt) {
|
|
setActiveTab("Prompt Vorlage");
|
|
} else if (promptId) {
|
|
setActiveTab("Einstellungen");
|
|
}
|
|
}, [searchParams]);
|
|
|
|
return (
|
|
<div className={`${styles.dashboard_prompt} ${isCollapsed ? styles.collapsed : ''}`}>
|
|
<div className={ styles.prompt_header }>
|
|
<div className={ styles.prompt_button_div }>
|
|
{[
|
|
"Prompt Vorlage",
|
|
"Einstellungen"
|
|
].map((tab) => (
|
|
<div key={tab} className={styles.buttonWrapper}>
|
|
<button
|
|
className={`${styles.prompt_button} ${
|
|
!isCollapsed
|
|
? (activeTab === tab ? styles.prompt_button_active : styles.prompt_button_inactive)
|
|
: styles.prompt_button_collapsed
|
|
}`}
|
|
onClick={()=> setActiveTab(tab)}
|
|
>
|
|
{ tab }
|
|
</button>
|
|
{!isCollapsed && activeTab === tab && (
|
|
<div className={styles.horizontalLine}></div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div
|
|
className={styles.expandIcon}
|
|
onClick={onToggleCollapse}
|
|
style={{
|
|
transform: !isCollapsed ? 'rotate(0deg)' : 'rotate(180deg)',
|
|
transition: 'transform 0.3s ease'
|
|
}}
|
|
>
|
|
<MdExpandLess size={24} />
|
|
</div>
|
|
</div>
|
|
{!isCollapsed && (
|
|
<div className={styles.horizontalLineLight}></div>
|
|
)}
|
|
{!isCollapsed && (
|
|
<div
|
|
className={styles.content_wrapper}
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
flex: 1,
|
|
minHeight: 0
|
|
}}
|
|
>
|
|
<div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
|
|
{activeTab === "Prompt Vorlage" ? (
|
|
<DashboardPromptSet onPromptRun={onPromptRun} />
|
|
) : (
|
|
<DashboardPromptSettings />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DashboardPrompt; |