Skip to content

Commit eb6d0fc

Browse files
mehdi-parvizimehdi-parvizi
committed
feat(layout): update app layout
1 parent a4aa0ed commit eb6d0fc

7 files changed

Lines changed: 94 additions & 124 deletions

File tree

‎web/src/components/internal-ui/Landing.tsx‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎web/src/features/basicGen/BasicGen.tsx‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -26,43 +26,39 @@ const BasicGen = () => {
2626
const messages = useGptStore((s) => s.messages);
2727

2828
return (
29-
<div>
30-
<FormProvider {...formMethods}>
31-
<form onSubmit={handleFormSubmit}>
32-
<Stack gap="3" justifyContent="center" alignItems="center">
33-
<div className="flex gap-2">
34-
<Input fieldName={BasicGenFields.MIN_TOKEN} label="Min token" />
35-
<Input fieldName={BasicGenFields.MAX_TOKEN} label="Max token" />
36-
<Input fieldName={BasicGenFields.SERVICE} label="Service" />
37-
</div>
38-
<ChatBox
39-
endpoint={ENDPOINTS.postBasic}
40-
request={request}
41-
messageData={messages}
42-
id={request?.requestId ?? ""}
43-
/>
44-
<HStack
45-
mt="3"
46-
alignItems="center"
47-
alignContent="center"
48-
justifyContent="center"
49-
bottom="5"
29+
<FormProvider {...formMethods}>
30+
<form onSubmit={handleFormSubmit}>
31+
<Stack gap="3" justifyContent="center" alignItems="center">
32+
<div className="flex gap-2">
33+
<Input fieldName={BasicGenFields.MIN_TOKEN} label="Min token" />
34+
<Input fieldName={BasicGenFields.MAX_TOKEN} label="Max token" />
35+
<Input fieldName={BasicGenFields.SERVICE} label="Service" />
36+
</div>
37+
<ChatBox
38+
endpoint={ENDPOINTS.postBasic}
39+
request={request}
40+
messageData={messages}
41+
id={request?.requestId ?? ""}
42+
/>
43+
<HStack
44+
mt="3"
45+
alignItems="center"
46+
alignContent="center"
47+
justifyContent="center"
48+
bottom="5"
49+
>
50+
<Input placeholder="Text" fieldName={BasicGenFields.INPUT} />
51+
<Button
52+
type="submit"
53+
bg="orange.800"
54+
disabled={formMethods.getFieldState(BasicGenFields.INPUT).invalid}
5055
>
51-
<Input placeholder="Text" fieldName={BasicGenFields.INPUT} />
52-
<Button
53-
type="submit"
54-
bg="orange.800"
55-
disabled={
56-
formMethods.getFieldState(BasicGenFields.INPUT).invalid
57-
}
58-
>
59-
<IoSendOutline />
60-
</Button>
61-
</HStack>
62-
</Stack>
63-
</form>
64-
</FormProvider>
65-
</div>
56+
<IoSendOutline />
57+
</Button>
58+
</HStack>
59+
</Stack>
60+
</form>
61+
</FormProvider>
6662
);
6763
};
6864

‎web/src/features/bugFix/BugFix.tsx‎

Lines changed: 37 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -22,48 +22,45 @@ const BugFix = () => {
2222
});
2323

2424
return (
25-
<div>
26-
<FormProvider {...formMethods}>
27-
<form onSubmit={handleFormSubmit}>
28-
<Stack gap="3" justifyContent="center" alignItems="center">
29-
<div className="flex gap-2">
30-
<Input fieldName={BugFixFields.MIN_TOKEN} label="Min token" />
31-
<Input fieldName={BugFixFields.MAX_TOKEN} label="Max token" />
32-
<Input fieldName={BugFixFields.SERVICE} label="Service" />
33-
<Input fieldName={BugFixFields.VERSION} label="Version" />
34-
</div>
35-
<ChatBox
36-
endpoint={ENDPOINTS.postFix}
37-
request={request}
38-
messageData={messages}
39-
id={request?.requestId ?? ""}
25+
<FormProvider {...formMethods}>
26+
<form onSubmit={handleFormSubmit}>
27+
<Stack gap="3" justifyContent="center" alignItems="center">
28+
<div className="flex gap-2">
29+
<Input fieldName={BugFixFields.MIN_TOKEN} label="Min token" />
30+
<Input fieldName={BugFixFields.MAX_TOKEN} label="Max token" />
31+
<Input fieldName={BugFixFields.SERVICE} label="Service" />
32+
<Input fieldName={BugFixFields.VERSION} label="Version" />
33+
</div>
34+
<ChatBox
35+
endpoint={ENDPOINTS.postFix}
36+
request={request}
37+
messageData={messages}
38+
id={request?.requestId ?? ""}
39+
/>
40+
<HStack
41+
mt="3"
42+
alignItems="center"
43+
alignContent="center"
44+
justifyContent="center"
45+
bottom="5"
46+
>
47+
<Input
48+
placeholder="Text"
49+
fieldName={BugFixFields.BUG_DESCRIPTION}
4050
/>
41-
<HStack
42-
mt="3"
43-
alignItems="center"
44-
alignContent="center"
45-
justifyContent="center"
46-
bottom="5"
51+
<Button
52+
type="submit"
53+
bg="orange.800"
54+
disabled={
55+
formMethods.getFieldState(BugFixFields.BUG_DESCRIPTION).invalid
56+
}
4757
>
48-
<Input
49-
placeholder="Text"
50-
fieldName={BugFixFields.BUG_DESCRIPTION}
51-
/>
52-
<Button
53-
type="submit"
54-
bg="orange.800"
55-
disabled={
56-
formMethods.getFieldState(BugFixFields.BUG_DESCRIPTION)
57-
.invalid
58-
}
59-
>
60-
<IoSendOutline />
61-
</Button>
62-
</HStack>
63-
</Stack>
64-
</form>
65-
</FormProvider>
66-
</div>
58+
<IoSendOutline />
59+
</Button>
60+
</HStack>
61+
</Stack>
62+
</form>
63+
</FormProvider>
6764
);
6865
};
6966

‎web/src/layouts/Header.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
import { Link } from "react-router-dom";
21
import { Image } from "@chakra-ui/react";
2+
import useGptStore from "../utils/store";
33

44
const Header = () => {
5+
const setIsOpen = useGptStore((s) => s.setIsOpen);
56
return (
67
<>
78
<div className="flex h-24 w-full pt-0 mt-[-6px] bg-orange-950">
8-
<Link to="/">
9+
<button onClick={() => setIsOpen(true)}>
910
<Image
1011
mt="-2"
1112
ml="4"
1213
className="w-28 h-28"
1314
src="/IMG_20240909_212657_482-removebg.png"
1415
/>
15-
</Link>
16+
</button>
1617
</div>
1718
</>
1819
);

‎web/src/layouts/Layout.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
1+
import { Button } from "@chakra-ui/react";
2+
import Drawer from "../components/internal-ui/Drawer";
3+
import { btnMappings } from "../utils/routing";
4+
import useGptStore from "../utils/store";
15
import Header from "./Header";
2-
import { Outlet } from "react-router-dom";
6+
import { Link, Outlet } from "react-router-dom";
37

48
const Layout = () => {
9+
const isOpen = useGptStore((s) => s.isOpen);
10+
const setIsOpen = useGptStore((s) => s.setIsOpen);
511
return (
612
<>
13+
<Drawer
14+
isOpen={isOpen}
15+
onClose={() => setIsOpen(false)}
16+
title="Devops-GPT API"
17+
content={btnMappings.map((route) => (
18+
<Link key={route.route} to={route.route}>
19+
<Button w="full" _hover={{ bg: "orange.600" }}>
20+
{route.label}
21+
</Button>
22+
</Link>
23+
))}
24+
/>
725
<Header />
826
<div className="w-full px-28 h-full ">
927
<Outlet />

‎web/src/utils/router.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ export const router = createBrowserRouter([
99
path: "/",
1010
element: <Layout />,
1111
children: [
12-
{ index: true, element: <Landing /> },
13-
{ path: ENDPOINTS.postBasic, element: <BasicGen /> },
12+
{ index: true, element: <BasicGen /> },
1413
{ path: ENDPOINTS.postFix, element: <BugFix /> },
1514
],
1615
},

‎web/src/utils/routing.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ENDPOINTS } from "../features/constants";
22

33
export const btnMappings = [
4-
{ label: "Basic", route: ENDPOINTS.postBasic },
4+
{ label: "Basic", route: "/" },
55
{ label: "Bug fix", route: ENDPOINTS.postFix },
66
{ label: "Installation", route: ENDPOINTS.postInstall },
77
{ label: "Template - IaC", route: ENDPOINTS.PostIacTemp },

0 commit comments

Comments
 (0)