mirror of
https://github.com/arc53/DocsGPT.git
synced 2025-11-30 00:53:14 +00:00
Settings page added
This commit is contained in:
SoumyadiptoPal
@@ -6,6 +6,7 @@ import PageNotFound from './PageNotFound';
|
||||
import { inject } from '@vercel/analytics';
|
||||
import { useMediaQuery } from './hooks';
|
||||
import { useState } from 'react';
|
||||
import Setting from './Setting';
|
||||
|
||||
inject();
|
||||
|
||||
@@ -27,6 +28,7 @@ export default function App() {
|
||||
<Route path="/" element={<Conversation />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="*" element={<PageNotFound />} />
|
||||
<Route path="/settings" element={<Setting />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,6 +7,7 @@ import Message from './assets/message.svg';
|
||||
import Hamburger from './assets/hamburger.svg';
|
||||
import Key from './assets/key.svg';
|
||||
import Info from './assets/info.svg';
|
||||
import SettingGear from './assets/settingGear.svg';
|
||||
import Documentation from './assets/documentation.svg';
|
||||
import Discord from './assets/discord.svg';
|
||||
import Github from './assets/github.svg';
|
||||
@@ -320,6 +321,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 border-b-2 py-2">
|
||||
<NavLink
|
||||
to="/settings"
|
||||
className={({ isActive }) =>
|
||||
`my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${
|
||||
isActive ? 'bg-gray-3000' : ''
|
||||
}`
|
||||
}
|
||||
>
|
||||
<img src={SettingGear} alt="info" className="ml-2 w-5 opacity-60" />
|
||||
<p className="my-auto text-eerie-black">Settings</p>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/about"
|
||||
className={({ isActive }) =>
|
||||
|
||||
137
frontend/src/Setting.tsx
Normal file
137
frontend/src/Setting.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import React, { useState } from 'react';
|
||||
import Arrow2 from './assets/dropdown-arrow.svg';
|
||||
|
||||
const Setting = () => {
|
||||
const list = ['General', 'Prompts', 'Documents', 'Widgets'];
|
||||
const [active, setActive] = useState('General');
|
||||
const returnActiveTabs = (): JSX.Element => {
|
||||
if (active === 'General') return <General />;
|
||||
else if (active === 'Prompts') return <Prompts />;
|
||||
else if (active === 'Documents') return <Documents />;
|
||||
else if (active === 'Widgets') return <Widgets />;
|
||||
else return <></>;
|
||||
};
|
||||
return (
|
||||
<div className="pt-20 pl-2 md:p-12">
|
||||
<p className="text-2xl font-bold text-eerie-black">Settings</p>
|
||||
<div className="mt-4 flex flex-row overflow-x-scroll md:overflow-x-hidden">
|
||||
{list.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`my-auto mr-6 mb-5 flex h-9 cursor-pointer items-center gap-4 rounded-3xl px-4 font-bold text-purple-30 hover:bg-purple-3000 ${
|
||||
active === item ? 'bg-purple-3000' : ''
|
||||
}`}
|
||||
onClick={() => setActive(item)}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{returnActiveTabs()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const General = () => {
|
||||
const [theme, setTheme] = useState('Light');
|
||||
const [isThemeListOpen, setIsThemeListOpen] = useState(false);
|
||||
const themes = ['Light', 'Dark'];
|
||||
const [language, setLanguage] = useState('English');
|
||||
const languages = ['English', 'French'];
|
||||
const [isLanguageListOpen, setIsLanguageListOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<div className="mt-10 w-80">
|
||||
<p className="font-bold text-jet">Select Theme</p>
|
||||
<div className="relative my-4 flex gap-2 px-2">
|
||||
<div
|
||||
className="flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
|
||||
onClick={() => setIsThemeListOpen(!isThemeListOpen)}
|
||||
>
|
||||
{theme && (
|
||||
<p className="my-3 mx-4 overflow-hidden text-ellipsis">{theme}</p>
|
||||
)}
|
||||
<img
|
||||
src={Arrow2}
|
||||
alt="arrow"
|
||||
className={`${
|
||||
!isThemeListOpen ? 'rotate-0' : 'rotate-180'
|
||||
} ml-auto mr-3 w-3 transition-all`}
|
||||
/>
|
||||
</div>
|
||||
{isThemeListOpen && (
|
||||
<div
|
||||
className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg"
|
||||
style={{ zIndex: 100 }}
|
||||
>
|
||||
{themes.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => {
|
||||
setTheme(item);
|
||||
setIsThemeListOpen(false);
|
||||
}}
|
||||
className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
|
||||
>
|
||||
<p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
|
||||
{item}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 w-80">
|
||||
<p className="font-bold text-jet">Select Language</p>
|
||||
<div className="relative my-4 flex gap-2 px-2">
|
||||
<div
|
||||
className="flex h-12 w-full cursor-pointer justify-between rounded-3xl border-2 bg-white"
|
||||
onClick={() => setIsLanguageListOpen(!isLanguageListOpen)}
|
||||
>
|
||||
{language && (
|
||||
<p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
{language}
|
||||
</p>
|
||||
)}
|
||||
<img
|
||||
src={Arrow2}
|
||||
alt="arrow"
|
||||
className={`${
|
||||
!isLanguageListOpen ? 'rotate-0' : 'rotate-180'
|
||||
} ml-auto mr-3 w-3 transition-all`}
|
||||
/>
|
||||
</div>
|
||||
{isLanguageListOpen && (
|
||||
<div className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
|
||||
{languages.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
onClick={() => {
|
||||
setLanguage(item);
|
||||
setIsLanguageListOpen(false);
|
||||
}}
|
||||
className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-2 hover:bg-gray-100"
|
||||
>
|
||||
<p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
|
||||
{item}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
const Prompts = () => {
|
||||
return <div>This is prompts</div>;
|
||||
};
|
||||
const Documents = () => {
|
||||
return <div>This is Documents</div>;
|
||||
};
|
||||
const Widgets = () => {
|
||||
return <div>This is widgets</div>;
|
||||
};
|
||||
export default Setting;
|
||||
70
frontend/src/assets/settingGear.svg
Normal file
70
frontend/src/assets/settingGear.svg
Normal file
@@ -0,0 +1,70 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
|
||||
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
width="448"
|
||||
height="448"
|
||||
viewBox="0 0 448 448"
|
||||
id="svg2"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="settings-gear.svg">
|
||||
<title
|
||||
id="title3334">settings-gear</title>
|
||||
<metadata
|
||||
id="metadata199">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>settings-gear</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs197" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1100"
|
||||
inkscape:window-height="894"
|
||||
id="namedview195"
|
||||
showgrid="true"
|
||||
inkscape:zoom="1.2291667"
|
||||
inkscape:cx="292.34697"
|
||||
inkscape:cy="222.24072"
|
||||
inkscape:window-x="260"
|
||||
inkscape:window-y="260"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg2"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:bbox-nodes="true">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid4169"
|
||||
spacingx="16"
|
||||
spacingy="16"
|
||||
empspacing="2" />
|
||||
</sodipodi:namedview>
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
class="icon-vso-bg"
|
||||
d="m 374.84801,275.296 c -2.24,6.6248 -4.80001,13.0228 -7.872,19.2332 l 32.54398,68.446 c -10.72,13.5688 -22.97599,25.8244 -36.54398,36.5764 l -68.48002,-32.5752 c -6.17599,3.1024 -12.60798,5.6308 -19.23199,7.9044 l -25.44,71.5204 C 241.344,447.3924 232.736,448 224,448 c -8.704,0 -17.312,-0.616 -25.792,-1.596 l -25.44,-71.5204 c -6.624,-2.268 -13.056,-4.802 -19.264,-7.9044 L 85.023999,399.5236 C 71.456,388.7716 59.199997,376.516 48.447997,362.9472 l 32.544002,-68.4488 c -3.007996,-6.1768 -5.6,-12.5748 -7.84,-19.1996 L 1.6000001,249.8272 C 0.63999994,241.3432 0,232.736 0,224 0,215.264 0.63999994,206.6568 1.6000001,198.1756 L 73.151999,172.7348 c 2.24,-6.622 4.800001,-13.0228 7.872003,-19.2304 L 48.511999,85.0556 C 59.263999,71.5204 71.519998,59.2312 85.087997,48.5128 L 153.568,81.0572 c 6.176,-3.0744 12.608,-5.6336 19.264,-7.9044 L 198.208,1.5988 C 206.688,0.6412 215.296,0 224,0 c 8.736,0 17.344,0.644 25.856,1.596 l 25.44,71.5568 c 6.62399,2.24 13.024,4.7992 19.232,7.8708 l 68.47999,-32.5444 c 13.56801,10.7212 25.82401,23.0076 36.544,36.5456 l -32.54398,68.446 c 3.07199,6.2104 5.63198,12.6084 7.87198,19.2332 L 446.432,198.1448 C 447.39214,206.6568 448,215.264 448,224 c 0,8.736 -0.60786,17.3432 -1.59994,25.8244 L 374.8481,275.296 Z M 224,127.9992 c -53.024,0 -96,42.9772 -96,96.0008 0,53.0236 42.976,96.0008 96,96.0008 53.024,0 95.99999,-42.9772 95.99999,-96.0008 0,-53.0236 -42.97599,-96.0008 -95.99999,-96.0008 z m 0,48.0004 c -26.528,0 -48,21.504 -48,48.0004 0,26.4964 21.472,48.0004 48,48.0004 26.528,0 48,-21.504 48,-48.0004 0,-26.4964 -21.472,-48.0004 -48,-48.0004 z"
|
||||
id="iconBg" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
Reference in New Issue
Block a user