Implement base DOM structure

2026-09-22 19:15:08 +03:00 · 2025-08-30 11:56:58 +03:00
parent 86f3a82aca
commit 138e0420cf
18 changed files with 389 additions and 2 deletions
@@ -0,0 +1,31 @@
+export function ProfileDialog() {
+    return (
+        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc>
+            <div className="content">
+                <div className="header-top">
+                    <div className="profile-picture-container">
+                        <img id="profile-picture" src="./src/resources/images/default-avatar.png" alt="Ваше фото" />
+                        <mdui-button-icon icon="camera_alt--filled" id="upload-pfp-btn" className="upload-overlay" variant="filled"></mdui-button-icon>
+                        <input type="file" id="pfp-file-input" accept="image/*" style={{ display: "none" }} />
+                    </div>
+                    <mdui-text-field id="username-field" label="Имя пользователя" variant="outlined" value="user123" autocomplete="username"></mdui-text-field>
+                </div>
+
+                <form id="profile-form">
+                    <mdui-text-field 
+                        id="description-field"
+                        label="О себе" 
+                        variant="outlined" 
+                        // multiline={true}
+                        rows={3}
+                        placeholder="Расскажите о себе..."
+                        autocomplete="none"></mdui-text-field>
+                    <div className="dialog-actions">
+                        <mdui-button type="submit" id="profile-submit">Сохранить изменения</mdui-button>
+                        <mdui-button id="profile-dialog-close" variant="outlined">Закрыть</mdui-button>
+                    </div>
+                </form>
+            </div>
+        </mdui-dialog>
+    );
+}