48 lines
No EOL
1.8 KiB
TypeScript
48 lines
No EOL
1.8 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useSearchParams } from "react-router-dom";
|
|
|
|
import DashboardPromptArea from './DashboardPromptArea/DashboardPromptArea';
|
|
import DashboardPromptSet from './DashboardPromptSet/DashboardPromptSet';
|
|
|
|
import styles from './DashboardPrompt.module.css';
|
|
|
|
const DashboardPrompt: React.FC = () => {
|
|
const [activeTab, setActiveTab] = useState("Prompt Area");
|
|
const [searchParams] = useSearchParams();
|
|
|
|
useEffect(() => {
|
|
// If there's an expandedPrompt parameter, switch to the Prompt Set tab
|
|
const expandedPrompt = searchParams.get('expandedPrompt');
|
|
const promptId = searchParams.get('promptId');
|
|
|
|
if (expandedPrompt) {
|
|
setActiveTab("Prompt Set");
|
|
} else if (promptId) {
|
|
setActiveTab("Prompt Area");
|
|
}
|
|
}, [searchParams]);
|
|
|
|
return (
|
|
<div className={ styles.dashboard_prompt }>
|
|
<div className={ styles.prompt_button_div }>
|
|
{["Prompt Area", "Prompt Set"].map((tab) => (
|
|
<div key={tab} className={styles.buttonWrapper}>
|
|
<button
|
|
key={tab}
|
|
className={`${styles.prompt_button} ${activeTab === tab ? styles.prompt_button_active : styles.prompt_button_inactive}`}
|
|
onClick={()=> setActiveTab(tab)} >
|
|
{ tab }
|
|
</button>
|
|
{activeTab === tab && <div className={styles.horizontalLine}></div>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className={styles.horizontalLineLight}></div>
|
|
<div>
|
|
{activeTab === "Prompt Area" ? <DashboardPromptArea /> : <DashboardPromptSet />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DashboardPrompt; |