forked from React-Group/interstellar_ai
110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
"use client";
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import Header from './components/Header';
|
|
import AI from './components/AI';
|
|
import FAQ from './components/Faq'; // Ensure the import path is correct
|
|
import Documentation from './components/Documentation'; // Ensure the import path is correct
|
|
import History from './components/History';
|
|
import Models from './components/Models';
|
|
import Credits from './components/Credits';
|
|
import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme';
|
|
import './styles/master.css';
|
|
|
|
const LandingPage: React.FC = () => {
|
|
const [showDivs, setShowDivs] = useState(true);
|
|
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
|
|
const conversationRef = useRef<HTMLDivElement>(null);
|
|
|
|
const [primaryColor, setPrimaryColor] = useState("#fefefe");
|
|
const [secondaryColor, setSecondaryColor] = useState("#fefefe");
|
|
const [accentColor, setAccentColor] = useState("#fefefe");
|
|
const [basicBackgroundColor, setBasicBackgroundColor] = useState("#fefefe");
|
|
const [basicTextColor, setBasicTextColor] = useState("#fefefe");
|
|
|
|
// Synchronize state with local storage on mount
|
|
useEffect(() => {
|
|
if (typeof localStorage !== 'undefined') {
|
|
setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
|
|
setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe");
|
|
setAccentColor(localStorage.getItem("accentColor") || "#fefefe");
|
|
setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe");
|
|
setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe");
|
|
}
|
|
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]);
|
|
|
|
const toggleDivs = () => {
|
|
setShowDivs(prevState => !prevState);
|
|
};
|
|
|
|
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
|
|
setView(view);
|
|
if (view !== 'AI') {
|
|
setShowDivs(false);
|
|
}
|
|
};
|
|
|
|
// Apply theme based on selectedTheme and color settings
|
|
useEffect(() => {
|
|
if (typeof localStorage !== 'undefined') {
|
|
const savedTheme = localStorage.getItem('selectedTheme');
|
|
if (savedTheme) {
|
|
switch (savedTheme) {
|
|
case 'IOMARKET':
|
|
applyIOMarketTheme();
|
|
break;
|
|
case 'WHITE':
|
|
applyWhiteTheme();
|
|
break;
|
|
case 'BLACK':
|
|
applyBlackTheme();
|
|
break;
|
|
case 'CUSTOM':
|
|
applyCustomTheme();
|
|
break;
|
|
case 'BASIC-CUSTOM':
|
|
applyBasicCustomTheme(
|
|
primaryColor,
|
|
secondaryColor,
|
|
accentColor,
|
|
basicBackgroundColor,
|
|
basicTextColor
|
|
);
|
|
break;
|
|
default:
|
|
applyIOMarketTheme();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly
|
|
|
|
return (
|
|
<>
|
|
<Header
|
|
toggleDivs={toggleDivs}
|
|
showDivs={showDivs}
|
|
onViewChange={handleViewChange}
|
|
showHistoryModelsToggle={true}
|
|
showToggle={view === 'AI'}
|
|
/>
|
|
<div className="container">
|
|
<div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
|
|
{showDivs && (
|
|
<div className="history-models">
|
|
<History />
|
|
<Models />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
|
|
{view === 'AI' && <AI />}
|
|
{view === 'FAQ' && <FAQ />}
|
|
{view === 'Documentation' && <Documentation />}
|
|
{view === 'Credits' && <Credits />}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LandingPage;
|