Skip to content

Commit 12ffa58

Browse files
Fr4nc3Fr4nc3
committed
creating the homepage
1 parent 68b3ee2 commit 12ffa58

File tree

7 files changed

+673
-4
lines changed

7 files changed

+673
-4
lines changed

‎src/frontend_react/src/components/content/HomeInput.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
2+
import {
3+
Body1,
4+
Button,
5+
Card,
6+
Text,
7+
} from "@fluentui/react-components";
8+
import {
9+
Send20Regular,
10+
Person20Regular,
11+
Phone20Regular,
12+
ShoppingBag20Regular,
13+
DocumentEdit20Regular,
14+
} from "@fluentui/react-icons";
15+
import React, { useRef, useEffect } from "react";
16+
import "./../../styles/Chat.css"; // Assuming you have a CSS file for additional styles
17+
import "./../../styles/HomeInput.css";
18+
import { HomeInputProps, quickTasks } from "../../models/homeInput";
19+
20+
21+
const HomeInput: React.FC<HomeInputProps> = ({
22+
onInputSubmit,
23+
onQuickTaskSelect,
24+
}) => {
25+
const [inputValue, setInputValue] = React.useState("");
26+
const textareaRef = useRef<HTMLTextAreaElement>(null);
27+
28+
const handleSubmit = () => {
29+
if (inputValue.trim()) {
30+
onInputSubmit(inputValue.trim());
31+
setInputValue("");
32+
if (textareaRef.current) {
33+
textareaRef.current.style.height = "auto";
34+
}
35+
}
36+
};
37+
38+
const handleKeyPress = (e: React.KeyboardEvent) => {
39+
if (e.key === "Enter" && !e.shiftKey) {
40+
e.preventDefault();
41+
handleSubmit();
42+
}
43+
};
44+
45+
// Auto-resize textarea
46+
useEffect(() => {
47+
if (textareaRef.current) {
48+
textareaRef.current.style.height = "auto";
49+
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
50+
}
51+
}, [inputValue]);
52+
53+
return (<div className="home-input-container">
54+
<div className="home-input-content">
55+
<div className="home-input-center-content">
56+
<div className="home-input-title-wrapper">
57+
<Text className="home-input-title">How can I help?</Text>
58+
</div>
59+
60+
<div className="home-input-input-section">
61+
<div className="home-input-input-wrapper">
62+
<textarea
63+
ref={textareaRef}
64+
className="home-input-input-field"
65+
value={inputValue}
66+
onChange={(e) => setInputValue(e.target.value)}
67+
onKeyPress={handleKeyPress}
68+
placeholder="Describe what you'd like to do or use / to reference files, people, and more"
69+
rows={1}
70+
/>
71+
<Button
72+
className="home-input-send-button"
73+
onClick={handleSubmit}
74+
disabled={!inputValue.trim()}
75+
icon={<Send20Regular />}
76+
/>
77+
</div>
78+
<div className="home-input-ai-footer">
79+
AI-generated content may be incorrect
80+
</div>
81+
</div>
82+
83+
<div className="home-input-quick-tasks-section">
84+
<div className="home-input-quick-tasks-header">
85+
<Text className="home-input-quick-tasks-title">Quick tasks</Text>
86+
<Button appearance="transparent" className="home-input-refresh-button">
87+
Refresh
88+
</Button>
89+
</div>
90+
<div className="home-input-quick-tasks">
91+
{quickTasks.map((task) => (
92+
<Card
93+
key={task.id}
94+
className="home-input-quick-task-card"
95+
onClick={() => onQuickTaskSelect(task.id)}
96+
>
97+
<div className="home-input-card-content">
98+
<div className="home-input-card-icon">{task.icon}</div>
99+
<div className="home-input-card-text-content">
100+
<Text className="home-input-card-title">{task.title}</Text>
101+
<Text className="home-input-card-description">{task.description}</Text>
102+
</div>
103+
</div>
104+
</Card>
105+
))}
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
);
112+
}
113+
114+
export default HomeInput;

‎src/frontend_react/src/components/content/TaskList.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
import { MoreHorizontal20Regular } from "@fluentui/react-icons";
1414
import React from "react";
1515
import "../../styles/TaskList.css";
16+
import { TaskListProps, Task } from "../../models/taskList";
1617

1718

1819

‎src/frontend_react/src/models/homeInput.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { DocumentEdit20Regular, Person20Regular, Phone20Regular, ShoppingBag20Regular } from "@fluentui/react-icons";
2+
3+
export interface QuickTask {
4+
id: string;
5+
title: string;
6+
description: string;
7+
icon: React.ReactNode;
8+
}
9+
10+
export const quickTasks: QuickTask[] = [
11+
{
12+
id: "onboard",
13+
title: "Onboard employee",
14+
description: "Onboard a new employee, Jessica",
15+
icon: <Person20Regular />,
16+
},
17+
{
18+
id: "mobile",
19+
title: "Mobile plan query",
20+
description: "Ask about roaming plans prior to heading overseas",
21+
icon: <Phone20Regular />,
22+
},
23+
{
24+
id: "addon",
25+
title: "Buy add-on",
26+
description: "Enable roaming on mobile plan, starting next week",
27+
icon: <ShoppingBag20Regular />,
28+
},
29+
{
30+
id: "press",
31+
title: "Draft a press release",
32+
description: "Write a press release about our current products",
33+
icon: <DocumentEdit20Regular />,
34+
},
35+
];
36+
37+
export interface HomeInputProps {
38+
onInputSubmit: (input: string) => void;
39+
onQuickTaskSelect: (taskId: string) => void;
40+
}

‎src/frontend_react/src/pages/HomePage.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
CardHeader
88
} from '@fluentui/react-components';
99
import {
10+
Add20Regular,
1011
ArrowLeft24Regular,
1112
ErrorCircle24Regular
1213
} from '@fluentui/react-icons';
@@ -15,6 +16,9 @@ import '../styles/PlanPage.css';
1516
import CoralShellColumn from '../coral/components/Layout/CoralShellColumn';
1617
import CoralShellRow from '../coral/components/Layout/CoralShellRow';
1718
import Content from '../coral/components/Content/Content';
19+
import PanelLeft from '../coral/components/Panels/PanelLeft';
20+
import PanelLeftToolbar from '../coral/components/Panels/PanelLeftToolbar';
21+
import TaskList from '../components/content/TaskList';
1822

1923
/**
2024
* Page component for displaying a specific plan
@@ -35,10 +39,28 @@ const HomePage: React.FC = () => {
3539
return (
3640
<CoralShellColumn>
3741
<CoralShellRow>
38-
<Content>
39-
40-
</Content>
42+
<div style={{ flexShrink: 0, display: "flex", overflow: "hidden" }}>
43+
<PanelLeft
44+
panelWidth={280}
45+
panelResize={true}>
46+
<PanelLeftToolbar panelTitle="" panelIcon={null}>
47+
<Button
48+
icon={<Add20Regular />}
49+
onClick={() => handleNewTask("New task")}
50+
>
51+
New task
52+
</Button>
53+
</PanelLeftToolbar>
54+
<TaskList
55+
inProgressTasks={inProgressTasks}
56+
completedTasks={completedTasks}
57+
onTaskSelect={handleTaskSelect}
58+
/>
59+
</PanelLeft>
60+
<Content>
4161

62+
</Content>
63+
</div>
4264
</CoralShellRow>
4365
</CoralShellColumn>
4466
);

‎src/frontend_react/src/pages/PlanPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const PlanPage: React.FC = () => {
3333
navigate(-1);
3434
};
3535
const handleTaskSelect = (taskId: string) => {
36-
setActiveTaskId(taskId);
36+
console.log(`Selected task ID: ${taskId}`);
3737
};
3838
// Show error if no planId is provided
3939

0 commit comments

Comments
 (0)