summaryrefslogtreecommitdiff
path: root/src/components/settings/AboutMe.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/settings/AboutMe.tsx')
-rw-r--r--src/components/settings/AboutMe.tsx36
1 files changed, 36 insertions, 0 deletions
diff --git a/src/components/settings/AboutMe.tsx b/src/components/settings/AboutMe.tsx
new file mode 100644
index 0000000..b065a26
--- /dev/null
+++ b/src/components/settings/AboutMe.tsx
@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+export default function AboutMe() {
+ const maxLength = 250;
+ const [text, setText] = useState('');
+
+ const handleChange = (e) => {
+ const value = e.target.value;
+
+ if (value.length <= maxLength) {
+ setText(value);
+ }
+ };
+
+ return (
+ <div className="flex flex-col flex-start gap-[10px] w-[600px] h-[284px]">
+ <p className="font-medium text-light-violet gap-[10px] ml-[20px]">
+ ОБО МНЕ
+ </p>
+
+ <div className="flex flex-row flex-end p-[20px] w-[600px] h-[120px] border-solid border-[1px] rounded-[20px]">
+ <Input
+ value={text}
+ onChange={handleChange}
+ placeholder="Введите описание о себе"
+ />
+
+ <p className="font-regular flex flex-row justify-center items-end ml-[10px] text-light-violet">
+ {maxLength - text.length}
+ </p>
+ </div>
+
+ <Button className="w-[105px]">Сменить</Button>
+ </div>
+ );
+}