mirror of https://github.com/arc53/DocsGPT
react-router-dom
TaylorS15
1 year ago
parent
e25ac549d7
commit
1d3e5b85fc
@ -0,0 +1,60 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function APIKeyModal({
|
||||
isApiModalOpen,
|
||||
setIsApiModalOpen,
|
||||
apiKey,
|
||||
setApiKey,
|
||||
}: {
|
||||
isApiModalOpen: boolean;
|
||||
setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
apiKey: string;
|
||||
setApiKey: React.Dispatch<React.SetStateAction<string>>;
|
||||
}) {
|
||||
const [formError, setFormError] = useState(false);
|
||||
|
||||
const handleResetKey = () => {
|
||||
if (!apiKey) {
|
||||
setFormError(true);
|
||||
} else {
|
||||
setFormError(false);
|
||||
setIsApiModalOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
isApiModalOpen ? 'visible' : 'hidden'
|
||||
} absolute z-30 h-screen w-screen bg-gray-alpha`}
|
||||
>
|
||||
<div className="mx-auto mt-24 flex w-128 flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
|
||||
<p className="text-xl text-jet">OpenAI API Key</p>
|
||||
<p className="text-lg leading-5 text-gray-500">
|
||||
Before you can start using DocsGPT we need you to provide an API key
|
||||
for llm. Currently, we support only OpenAI but soon many more. You can
|
||||
find it here.
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
className="h-10 w-full border-b-2 border-jet focus:outline-none"
|
||||
value={apiKey}
|
||||
maxLength={100}
|
||||
placeholder="API Key"
|
||||
onChange={(e) => setApiKey(e.target.value)}
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
{formError && (
|
||||
<p className="text-sm text-red-500">Please enter a valid API key</p>
|
||||
)}
|
||||
<button
|
||||
onClick={handleResetKey}
|
||||
className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
export default function DocsGPT() {
|
||||
return <div className="md:ml-72 lg:ml-96">Docs GPT Chat Placeholder</div>;
|
||||
export default function DocsGPT({ isMenuOpen }: { isMenuOpen: boolean }) {
|
||||
return (
|
||||
<div className={`${isMenuOpen ? 'md:ml-72 lg:ml-96' : 'ml-16'}`}>
|
||||
Docs GPT Chat Placeholder
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,26 +1,103 @@
|
||||
import React, { useState } from 'react';
|
||||
import Arrow1 from './imgs/arrow.svg';
|
||||
import Key from './imgs/key.svg';
|
||||
import Info from './imgs/info.svg';
|
||||
import Link from './imgs/link.svg';
|
||||
|
||||
function MobileNavigation() {
|
||||
return <div>Mobile Navigation</div>;
|
||||
}
|
||||
|
||||
function DesktopNavigation() {
|
||||
function DesktopNavigation({
|
||||
isMenuOpen,
|
||||
setIsMenuOpen,
|
||||
setIsApiModalOpen,
|
||||
}: {
|
||||
isMenuOpen: boolean;
|
||||
setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
return (
|
||||
<div className="fixed h-screen w-72 border-r-2 border-gray-100 bg-gray-50 lg:w-96">
|
||||
<div className="h-16 border-b-2 border-gray-100">
|
||||
<button className="float-right mr-4 mt-5 h-5 w-5">
|
||||
<img src={Arrow1} alt="menu toggle" className="m-auto w-3" />
|
||||
<div
|
||||
className={`${
|
||||
isMenuOpen ? 'w-72 lg:w-96' : 'w-16'
|
||||
} fixed flex h-screen flex-col border-r-2 border-gray-100 bg-gray-50 transition-all`}
|
||||
>
|
||||
<div
|
||||
className={`${
|
||||
isMenuOpen ? 'w-full' : 'w-16'
|
||||
} ml-auto h-16 border-b-2 border-gray-100`}
|
||||
>
|
||||
<button
|
||||
className="float-right mr-5 mt-5 h-5 w-5"
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
>
|
||||
<img
|
||||
src={Arrow1}
|
||||
alt="menu toggle"
|
||||
className={`${
|
||||
isMenuOpen ? 'rotate-0' : 'rotate-180'
|
||||
} m-auto w-3 transition-all`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{isMenuOpen && (
|
||||
<>
|
||||
<div className="flex-grow border-b-2 border-gray-100"></div>
|
||||
|
||||
<div className="flex h-16 flex-col border-b-2 border-gray-100">
|
||||
<div
|
||||
className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
|
||||
onClick={() => setIsApiModalOpen(true)}
|
||||
>
|
||||
<img src={Key} alt="key" className="ml-2 w-6" />
|
||||
<p className="my-auto text-eerie-black">Reset Key</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex h-48 flex-col border-b-2 border-gray-100">
|
||||
<div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
|
||||
<img src={Info} alt="info" className="ml-2 w-5" />
|
||||
<p className="my-auto text-eerie-black">About</p>
|
||||
</div>
|
||||
|
||||
<div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
|
||||
<img src={Link} alt="link" className="ml-2 w-5" />
|
||||
<p className="my-auto text-eerie-black">Discord</p>
|
||||
</div>
|
||||
|
||||
<div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
|
||||
<img src={Link} alt="link" className="ml-2 w-5" />
|
||||
<p className="my-auto text-eerie-black">Github</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Navigation({ isMobile }: { isMobile: boolean }) {
|
||||
export default function Navigation({
|
||||
isMobile,
|
||||
isMenuOpen,
|
||||
setIsMenuOpen,
|
||||
setIsApiModalOpen,
|
||||
}: {
|
||||
isMobile: boolean;
|
||||
isMenuOpen: boolean;
|
||||
setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
if (isMobile) {
|
||||
return <MobileNavigation />;
|
||||
} else {
|
||||
return <DesktopNavigation />;
|
||||
return (
|
||||
<DesktopNavigation
|
||||
isMenuOpen={isMenuOpen}
|
||||
setIsMenuOpen={setIsMenuOpen}
|
||||
setIsApiModalOpen={setIsApiModalOpen}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
export default function PastChat() {}
|
||||
@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="black" fill-opacity="0.54"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 273 B |
@ -0,0 +1,3 @@
|
||||
<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.65 4C10.83 1.67 8.61 0 6 0C2.69 0 0 2.69 0 6C0 9.31 2.69 12 6 12C8.61 12 10.83 10.33 11.65 8H16V12H20V8H22V4H11.65ZM6 8C4.9 8 4 7.1 4 6C4 4.9 4.9 4 6 4C7.1 4 8 4.9 8 6C8 7.1 7.1 8 6 8Z" fill="black" fill-opacity="0.54"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 337 B |
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 16H2V2H9V0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.1 18 18 17.1 18 16V9H16V16ZM11 0V2H14.59L4.76 11.83L6.17 13.24L16 3.41V7H18V0H11Z" fill="black" fill-opacity="0.54"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 293 B |
@ -1,10 +1,13 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue