YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Changed The Header Structure and deleted unused fonts

Browse source
This commit is contained in:
sageTheDM 2024-09-25 12:12:19 +02:00
parent bb6f529651
commit b834112e61
10 changed files with 151 additions and 210 deletions
Download patch file Download diff file Expand all files Collapse all files

71
app/components/Credits.tsx Normal file
View file

@ -0,0 +1,71 @@
import React from 'react';
const Credits: React.FC = () => {
return (
<div className="credits-container">
<section id="credits" className="credits-section">
<h1 className="title">Credits</h1>
<h2 className="subtitle">Icons</h2>
<p className="paragraph">
This project utilizes the following icon resources:
</p>
<a
href="https://www.svgrepo.com/author/Solar%20Icons/"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Solar Icons
</a>
<a
href="https://www.svgrepo.com/author/Dazzle%20UI/"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Dazzle UI
</a>
<h2 className="subtitle">Fonts</h2>
<p className="paragraph">
The fonts used in this project are provided by:
</p>
<a
href="https://github.com/itfoundry/Poppins"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Poppins
</a>
<a
href="https://openfontlicense.org"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight
</a>
<a
href="http://www.apache.org/licenses/LICENSE-2.0"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Roboto, Rock Salt
</a>
<a
href="https://ubuntu.com/legal/font-licence"
className="credit-btn"
target="_blank"
rel="noopener noreferrer"
>
Ubuntu
</a>
</section>
</div>
);
};
export default Credits;

45
app/components/Header.tsx
View file

@ -1,26 +1,25 @@
// Header.tsx
import React, { useState } from 'react';
import Login from './Login';
interface HeaderProps {
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
showDivs: boolean;
toggleDivs: () => void;
showHistoryModelsToggle: boolean;
showToggle: boolean; // Add this prop
showToggle: boolean;
}
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
const [menuOpen, setMenuOpen] = useState(false);
const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
onViewChange(page)
toggleMenu()
}
const toggleMenu = () => {
setMenuOpen(!menuOpen);
};
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
onViewChange(page);
toggleMenu();
};
return (
<>
@ -30,17 +29,19 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
<span></span>
<span></span>
</div>
<nav className={`nav-links ${menuOpen ? "active":""}`}>
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
{showToggle && showHistoryModelsToggle && (
<button onClick={toggleDivs} className="nav-btn">
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
</button>
)}
</nav>
<nav className={`nav-links ${menuOpen ? "active" : ""}`}>
<button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
<button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
{showToggle && showHistoryModelsToggle && (
<button onClick={toggleDivs} className="nav-btn">
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
</button>
)}
</nav>
<button onClick={() => onViewChange('AI')} className="header-button header-logo">
{/* AI logo or text */}
</button>
<div className="login-button">
<Login />