Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in
Toggle navigation
H
Homework83_M11
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Ли Джен Сеп
Homework83_M11
Commits
8aa25f20
Commit
8aa25f20
authored
Dec 18, 2024
by
bekzat kapan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
3# Добавил 2 кнопки с Material Design с готовой стилизацией и компоненты полей
parent
8ade300f
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
81 additions
and
1 deletion
+81
-1
page.tsx
frontend/src/app/page.tsx
+81
-1
No files found.
frontend/src/app/page.tsx
View file @
8aa25f20
"use client"
;
import
{
Box
,
Button
,
Container
,
Grid2
,
Typography
}
from
"@mui/material"
;
import
ArrowDownwardIcon
from
"@mui/icons-material/ArrowDownward"
;
import
{
ChangeEvent
,
FormEvent
,
useState
}
from
"react"
;
import
InputField
from
"./components/InputField"
;
interface
IFormData
{
decoded
:
string
;
encoded
:
string
;
password
:
string
;
}
export
default
function
Home
()
{
export
default
function
Home
()
{
return
<
div
className=
"App"
></
div
>;
const
[
formData
,
setFormData
]
=
useState
<
IFormData
>
({
encoded
:
""
,
decoded
:
""
,
password
:
""
,
});
const
submitFormHandler
=
(
e
:
FormEvent
<
HTMLFormElement
>
)
=>
{
e
.
preventDefault
();
};
const
onInputChangeHandler
=
(
e
:
ChangeEvent
<
HTMLInputElement
>
)
=>
{
const
{
name
,
value
}
=
e
.
target
;
setFormData
((
prevData
)
=>
({
...
prevData
,
[
name
.
toLowerCase
()]:
value
,
}));
};
return
(
<
div
className=
"App"
>
<
Container
sx=
{
{
marginTop
:
2
}
}
maxWidth=
"lg"
>
<
Typography
variant=
"h3"
>
Cypher Coder/Decoder
</
Typography
>
<
Box
component=
"form"
autoComplete=
"off"
onSubmit=
{
submitFormHandler
}
paddingY=
{
2
}
>
<
Grid2
container
direction=
"column"
spacing=
{
2
}
>
<
InputField
name=
"Decoded"
value=
{
formData
.
decoded
}
onChange=
{
onInputChangeHandler
}
/>
<
Grid2
container
alignItems=
"center"
justifyContent=
"space-between"
>
<
Grid2
size=
{
7
}
>
<
InputField
name=
"Password"
value=
{
formData
.
password
}
onChange=
{
onInputChangeHandler
}
/>
</
Grid2
>
<
Grid2
size=
{
2
}
justifyContent=
"center"
>
<
Button
variant=
"contained"
startIcon=
{
<
ArrowDownwardIcon
/>
}
>
Encode
</
Button
>
</
Grid2
>
<
Grid2
size=
{
2
}
justifyContent=
"center"
>
<
Button
variant=
"contained"
startIcon=
{
<
ArrowDownwardIcon
sx=
{
{
transform
:
"rotate(180deg)"
}
}
/>
}
>
Decode
</
Button
>
</
Grid2
>
</
Grid2
>
<
InputField
name=
"Encoded"
value=
{
formData
.
encoded
}
onChange=
{
onInputChangeHandler
}
/>
</
Grid2
>
</
Box
>
</
Container
>
</
div
>
);
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment