React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

import export works again || animation is weird

Browse source
This commit is contained in:
sageTheDM 2024-10-03 10:58:41 +02:00
parent f94b99d357
commit 0a9472f44f
4 changed files with 153 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

106
app/page.tsx
View file

@ -7,35 +7,34 @@ import Documentation from './components/Documentation'; // Ensure the import pat
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 { 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'); // Added 'Credits' here
const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
const conversationRef = useRef<HTMLDivElement>(null);
const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
useEffect(()=>{
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")
})
// Synchronize state with local storage on mount
useEffect(() => {
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");
}, []);
const toggleDivs = () => {
setShowDivs(prevState => !prevState);
};
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
setView(view);
if (view !== 'AI') {
setShowDivs(false);
@ -44,49 +43,49 @@ const LandingPage: React.FC = () => {
const [selectedTheme, setSelectedTheme] = useState<string>('');
useEffect(() => {
const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) {
setSelectedTheme(savedTheme);
// Apply the saved theme on initial load
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;
}
}
}, []); // Runs only once when the component mounts
// Apply theme based on selectedTheme and color settings
useEffect(() => {
const savedTheme = localStorage.getItem('selectedTheme');
if (savedTheme) {
setSelectedTheme(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'} // Pass the condition here
/>
<Header
toggleDivs={toggleDivs}
showDivs={showDivs}
onViewChange={handleViewChange}
showHistoryModelsToggle={true}
showToggle={view === 'AI'}
/>
<div className="container">
<div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
{showDivs && (
@ -100,7 +99,7 @@ const LandingPage: React.FC = () => {
{view === 'AI' && <AI />}
{view === 'FAQ' && <FAQ />}
{view === 'Documentation' && <Documentation />}
{view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
{view === 'Credits' && <Credits />}
</div>
</div>
</>
@ -108,3 +107,4 @@ const LandingPage: React.FC = () => {
};
export default LandingPage;