Skip to content

Commit b5c5b09

Browse files
m1nhtuanm1nhtuan
committed
update ui
1 parent dec35e3 commit b5c5b09

File tree

8 files changed

+203
-8
lines changed

8 files changed

+203
-8
lines changed

Diff for: ‎engace.web/package-lock.json

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎engace.web/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"mui-markdown": "^1.1.13",
2020
"react": "^18.3.1",
2121
"react-dom": "^18.3.1",
22+
"react-multi-carousel": "^2.8.4",
2223
"react-redux": "^9.1.2",
2324
"react-router-dom": "^6.23.1",
2425
"react-scripts": "5.0.1",
@@ -28,7 +29,7 @@
2829
"web-vitals": "^2.1.4"
2930
},
3031
"scripts": {
31-
"start": "set HTTPS=true&&react-scripts start",
32+
"start": "react-scripts start",
3233
"build": "react-scripts build",
3334
"test": "react-scripts test",
3435
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",

Diff for: ‎engace.web/src/components/IntroduceCard.jsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Card from "@mui/material/Card";
2+
import CardHeader from "@mui/material/CardHeader";
3+
import CardMedia from "@mui/material/CardMedia";
4+
import CardContent from "@mui/material/CardContent";
5+
import Typography from "@mui/material/Typography";
6+
7+
export default function IntroduceCard() {
8+
return (
9+
<Card sx={{ maxWidth: 345 }}>
10+
<CardHeader title="Shrimp and Chorizo Paella" />
11+
12+
<CardContent>
13+
<Typography variant="body2" color="text.secondary">
14+
This impressive paella is a perfect party dish and a fun meal to cook
15+
together with your guests. Add 1 cup of frozen peas along with the
16+
mussels, if you like.
17+
</Typography>
18+
</CardContent>
19+
<CardMedia
20+
component="img"
21+
height="auto"
22+
image="https://lh6.googleusercontent.com/kLbn37tH9cNrNUAcYV4Fl5G2lx5Q1aV1vNtfyuiqihD86NcMDqDhgDZir4jy_ZHwB222c6mkbvYQT-ZokMn2hvxnER1wLDCtiXK-UK3LY12rpVlNkRI1nXlkxSs4sBWb4g=w2040"
23+
alt="Paella dish"
24+
/>
25+
</Card>
26+
);
27+
}

Diff for: ‎engace.web/src/components/QuestionAndAnswer.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default function QuestionAndAnswer() {
3737
display: "flex",
3838
flexDirection: "column",
3939
gap: 2,
40-
mt: 1
40+
mt: 1,
4141
}}
4242
>
4343
<Hidden mdUp>

Diff for: ‎engace.web/src/components/QuestionRadioGroup.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default function QuestionRadioGroup({
2323
};
2424

2525
return (
26-
<FormControl disabled={submit} fullWidth>
26+
<FormControl disabled={submit} fullWidth sx={{ paddingLeft: "16px" }}>
2727
<FormLabel>
2828
<Typography variant="body1" sx={{ color: "black !important" }}>
2929
<strong>Câu hỏi {qIndex + 1}: </strong> {question.Question}

Diff for: ‎engace.web/src/index.css

+5-1
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,8 @@ code {
4545
/* Define a class that uses the animation */
4646
.highlight {
4747
animation: highlight 2s ease;
48-
}
48+
}
49+
50+
.functional-carousel {
51+
width: 60%;
52+
}

Diff for: ‎engace.web/src/pages/Introduction.jsx

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
import { Box, Container, CssBaseline } from "@mui/material";
2+
import Carousel from "react-multi-carousel";
3+
import "react-multi-carousel/lib/styles.css";
4+
import IntroduceCard from "../components/IntroduceCard";
5+
6+
export default function Introduction() {
7+
return (
8+
<Box
9+
sx={{
10+
backgroundImage: `
11+
linear-gradient(
12+
200deg,
13+
#E3FDFFff,
14+
#DFFBFFff,
15+
#DBF8FFff,
16+
#D6F6FFff,
17+
#D2F3FFff,
18+
#CEF1FFff,
19+
#CAEEFFff,
20+
#C6ECFFff,
21+
#C2E9FFff,
22+
#BDE7FFff,
23+
#B9E4FFff,
24+
#B5E2FFff,
25+
#B1DFFFff,
26+
#ADDDFFff,
27+
#A9DAFFff,
28+
#A4D8FFff,
29+
#A0D5FFff,
30+
#9CD3FFff
31+
)
32+
`,
33+
backgroundSize: "cover",
34+
backgroundPosition: "center",
35+
height: "100vh",
36+
}}
37+
>
38+
<CssBaseline />
39+
<Container
40+
fixed
41+
sx={{
42+
height: "100%",
43+
display: "flex",
44+
justifyContent: "center",
45+
alignItems: "center",
46+
flexDirection: "column",
47+
}}
48+
>
49+
<Carousel
50+
additionalTransfrom={0}
51+
arrows
52+
autoPlaySpeed={3000}
53+
centerMode={false}
54+
className="functional-carousel"
55+
containerClass="container"
56+
dotListClass=""
57+
draggable
58+
focusOnSelect={false}
59+
infinite
60+
itemClass=""
61+
keyBoardControl
62+
minimumTouchDrag={80}
63+
pauseOnHover
64+
renderArrowsWhenDisabled={false}
65+
renderButtonGroupOutside={false}
66+
renderDotsOutside={false}
67+
responsive={{
68+
desktop: {
69+
breakpoint: {
70+
max: 3000,
71+
min: 1024,
72+
},
73+
items: 1,
74+
},
75+
mobile: {
76+
breakpoint: {
77+
max: 464,
78+
min: 0,
79+
},
80+
items: 1,
81+
},
82+
tablet: {
83+
breakpoint: {
84+
max: 1024,
85+
min: 464,
86+
},
87+
items: 1,
88+
},
89+
}}
90+
rewind={true}
91+
rewindWithAnimation={false}
92+
rtl={false}
93+
shouldResetAutoplay
94+
showDots
95+
sliderClass=""
96+
slidesToSlide={1}
97+
swipeable
98+
>
99+
<IntroduceCard />
100+
<img
101+
src="https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
102+
style={{
103+
display: "block",
104+
height: "200px",
105+
margin: "auto",
106+
width: "200px",
107+
}}
108+
/>
109+
<img
110+
src="https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60"
111+
style={{
112+
display: "block",
113+
height: "100%",
114+
margin: "auto",
115+
width: "100%",
116+
}}
117+
/>
118+
<img
119+
src="https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
120+
style={{
121+
display: "block",
122+
height: "100%",
123+
margin: "auto",
124+
width: "100%",
125+
}}
126+
/>
127+
<img
128+
src="https://images.unsplash.com/photo-1550167164-1b67c2be3973?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
129+
style={{
130+
display: "block",
131+
height: "100%",
132+
margin: "auto",
133+
width: "100%",
134+
}}
135+
/>
136+
<img
137+
src="https://images.unsplash.com/photo-1550338861-b7cfeaf8ffd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
138+
style={{
139+
display: "block",
140+
height: "100%",
141+
margin: "auto",
142+
width: "100%",
143+
}}
144+
/>
145+
</Carousel>
146+
</Container>
147+
</Box>
148+
);
149+
}

Diff for: ‎engace.web/src/routes/index.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { checkAuthLoader, checkEnglishLevelLoader } from "../utils/auth";
88
import Dictionary from "../pages/Dictionary";
99
import Writing from "../pages/Writing";
1010
import ChatPage from "../pages/ChatPage";
11+
import Introduction from "../pages/Introduction";
1112

1213
export const router = createBrowserRouter([
1314
{
@@ -16,25 +17,29 @@ export const router = createBrowserRouter([
1617
children: [
1718
{ index: true, element: <Home /> },
1819
{
19-
path: "/dictionary",
20+
path: "dictionary",
2021
element: <MainLayout />,
2122
children: [{ index: true, element: <Dictionary /> }],
2223
},
2324
{
24-
path: "/test",
25+
path: "test",
2526
element: <MainLayout />,
2627
children: [{ index: true, element: <Test /> }],
2728
},
2829
{
29-
path: "/writing",
30+
path: "writing",
3031
element: <MainLayout />,
3132
children: [{ index: true, element: <Writing /> }],
3233
},
3334
{
34-
path: "/chat",
35+
path: "chat",
3536
element: <MainLayout />,
3637
children: [{ index: true, element: <ChatPage /> }],
3738
},
39+
{
40+
path: "introduction",
41+
element: <Introduction />,
42+
},
3843
],
3944
},
4045
{

0 commit comments

Comments
 (0)