From 4be38fcb0ed47fbaa0862801f4dfdd86f6e886e7 Mon Sep 17 00:00:00 2001 From: SoumyadiptoPal Date: Wed, 25 Oct 2023 10:24:55 +0530 Subject: [PATCH 1/2] Settings page added --- frontend/src/App.tsx | 2 + frontend/src/Navigation.tsx | 12 +++ frontend/src/Setting.tsx | 137 ++++++++++++++++++++++++++++ frontend/src/assets/settingGear.svg | 70 ++++++++++++++ frontend/tailwind.config.cjs | 1 + 5 files changed, 222 insertions(+) create mode 100644 frontend/src/Setting.tsx create mode 100644 frontend/src/assets/settingGear.svg 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 c6c35af8..36a73dc3 100644 --- a/frontend/src/Navigation.tsx +++ b/frontend/src/Navigation.tsx @@ -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) {
+ + `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..edba40b5 --- /dev/null +++ b/frontend/src/Setting.tsx @@ -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 ; + else if (active === 'Prompts') return ; + else if (active === 'Documents') return ; + else if (active === 'Widgets') return ; + else return <>; + }; + 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/settingGear.svg b/frontend/src/assets/settingGear.svg new file mode 100644 index 00000000..0b9af06b --- /dev/null +++ b/frontend/src/assets/settingGear.svg @@ -0,0 +1,70 @@ + + + + + + settings-gear + + + + image/svg+xml + + settings-gear + + + + + + + + + \ No newline at end of file diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs index 69086069..7db27d96 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)', }, From 6fc31ddedb188d10ca3ef11434f674bf75d68323 Mon Sep 17 00:00:00 2001 From: SoumyadiptoPal Date: Mon, 30 Oct 2023 22:32:39 +0530 Subject: [PATCH 2/2] Updated the code --- frontend/src/Setting.tsx | 75 ++++++++++++++++++++++------- frontend/src/assets/arrow-left.svg | 3 ++ frontend/src/assets/arrow-right.svg | 3 ++ frontend/src/assets/settingGear.svg | 73 ++-------------------------- 4 files changed, 66 insertions(+), 88 deletions(-) create mode 100644 frontend/src/assets/arrow-left.svg create mode 100644 frontend/src/assets/arrow-right.svg diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx index edba40b5..91071518 100644 --- a/frontend/src/Setting.tsx +++ b/frontend/src/Setting.tsx @@ -1,5 +1,7 @@ -import React, { useState } from 'react'; +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']; @@ -11,21 +13,58 @@ const Setting = () => { 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} +
+
+
+
- ))} +
+
+ {list.map((item, index) => ( +
setActive(item)} + > + {item} +
+ ))} +
+
+
+ +
+
{returnActiveTabs()}
@@ -45,18 +84,18 @@ const General = () => {

Select Theme

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

{theme}

+

{theme}

)} arrow
{isThemeListOpen && ( @@ -86,11 +125,11 @@ const General = () => {

Select Language

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

+

{language}

)} @@ -99,7 +138,7 @@ const General = () => { alt="arrow" className={`${ !isLanguageListOpen ? 'rotate-0' : 'rotate-180' - } ml-auto mr-3 w-3 transition-all`} + } ml-auto mr-6 w-3 transition-all`} />
{isLanguageListOpen && ( 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 index 0b9af06b..abbde123 100644 --- a/frontend/src/assets/settingGear.svg +++ b/frontend/src/assets/settingGear.svg @@ -1,70 +1,3 @@ - - - - - - settings-gear - - - - image/svg+xml - - settings-gear - - - - - - - - - \ No newline at end of file + + +