diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 878a98f9..fdf86dd2 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -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() { } /> } /> } /> + } /> diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx index 328b9ebf..a0c18c50 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -10,6 +10,10 @@ import Exit from './assets/exit.svg'; import Github from './assets/github.svg'; import Hamburger from './assets/hamburger.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'; import Key from './assets/key.svg'; import Add from './assets/add.svg'; import UploadIcon from './assets/upload.svg'; @@ -335,6 +339,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
+ + `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 ${ + isActive ? 'bg-gray-3000' : '' + }` + } + > + info +

Settings

+ diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx new file mode 100644 index 00000000..91071518 --- /dev/null +++ b/frontend/src/Setting.tsx @@ -0,0 +1,176 @@ +import React, { useState, useRef } from 'react'; +import Arrow2 from './assets/dropdown-arrow.svg'; +import ArrowLeft from './assets/arrow-left.svg'; +import ArrowRight from './assets/arrow-right.svg'; + +const Setting = () => { + const list = ['General', 'Prompts', 'Documents', 'Widgets']; + const [active, setActive] = useState('General'); + const returnActiveTabs = (): JSX.Element => { + if (active === 'General') return ; + else if (active === 'Prompts') return ; + else if (active === 'Documents') return ; + else if (active === 'Widgets') return ; + else return <>; + }; + const scrollableRef = useRef(null); + const scrollStep = 100; + const scrollLeft = () => { + if (scrollableRef.current) { + if (scrollableRef.current.scrollLeft > 0) { + scrollableRef.current.scrollLeft -= scrollStep; // Adjust the scroll amount as needed + } + } + }; + + const scrollRight = () => { + if (scrollableRef.current) { + scrollableRef.current.scrollLeft += scrollStep; // Adjust the scroll amount as needed + } + }; + return ( +
+

Settings

+
+
+
+ +
+
+
+ {list.map((item, index) => ( +
setActive(item)} + > + {item} +
+ ))} +
+
+
+ +
+
+
+ {returnActiveTabs()} +
+ ); +}; + +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 ( + <> +
+

Select Theme

+
+
setIsThemeListOpen(!isThemeListOpen)} + > + {theme && ( +

{theme}

+ )} + arrow +
+ {isThemeListOpen && ( +
+ {themes.map((item, index) => ( +
{ + 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" + > +

+ {item} +

+
+ ))} +
+ )} +
+
+
+

Select Language

+
+
setIsLanguageListOpen(!isLanguageListOpen)} + > + {language && ( +

+ {language} +

+ )} + arrow +
+ {isLanguageListOpen && ( +
+ {languages.map((item, index) => ( +
{ + 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" + > +

+ {item} +

+
+ ))} +
+ )} +
+
+ + ); +}; +const Prompts = () => { + return
This is prompts
; +}; +const Documents = () => { + return
This is Documents
; +}; +const Widgets = () => { + return
This is widgets
; +}; +export default Setting; diff --git a/frontend/src/assets/arrow-left.svg b/frontend/src/assets/arrow-left.svg new file mode 100644 index 00000000..8c7c7972 --- /dev/null +++ b/frontend/src/assets/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/arrow-right.svg b/frontend/src/assets/arrow-right.svg new file mode 100644 index 00000000..a36d6e8f --- /dev/null +++ b/frontend/src/assets/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/settingGear.svg b/frontend/src/assets/settingGear.svg new file mode 100644 index 00000000..abbde123 --- /dev/null +++ b/frontend/src/assets/settingGear.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs index a5d61d67..ea40ed10 100644 --- a/frontend/tailwind.config.cjs +++ b/frontend/tailwind.config.cjs @@ -26,6 +26,7 @@ module.exports = { 'blue-2000': '#002B49', 'blue-3000': '#4B02E2', 'purple-30': '#7D54D1', + 'purple-3000': 'rgb(230,222,247)', 'blue-4000': 'rgba(0, 125, 255, 0.36)', 'blue-5000': 'rgba(0, 125, 255)', 'green-2000': '#0FFF50',