build: 444813b5-5daf-49b2-bf1a-7e4caeab4e17

2026-07-04 10:50:55 +00:00
commit 4bb668be1a
149 changed files with 28016 additions and 0 deletions
@@ -0,0 +1,121 @@
+import React, { useRef } from 'react';
+import { IonIcon } from '@ionic/react';
+import { camera, personOutline } from 'ionicons/icons';
+
+interface AvatarPickerProps {
+  previewUrl: string | null;
+  onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  initials?: string;
+  disabled?: boolean;
+}
+
+const AvatarPicker: React.FC<AvatarPickerProps> = ({
+  previewUrl,
+  onFileChange,
+  initials,
+  disabled = false,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  return (
+    <div
+      className="avatar-picker-container"
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        margin: '8px 0 4px',
+      }}
+    >
+      <button
+        type="button"
+        aria-label={previewUrl ? 'Change photo' : 'Add photo'}
+        onClick={handleClick}
+        disabled={disabled}
+        style={{
+          position: 'relative',
+          width: '96px',
+          height: '96px',
+          padding: 0,
+          border: 'none',
+          background: 'transparent',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          opacity: disabled ? 0.6 : 1,
+        }}
+      >
+        <div
+          className="avatar-preview-circle"
+          style={{
+            width: '88px',
+            height: '88px',
+            margin: '0 auto',
+            borderRadius: '24px',
+            backgroundColor: previewUrl
+              ? 'transparent'
+              : 'rgba(109,40,217,0.10)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'hidden',
+          }}
+        >
+          {previewUrl ? (
+            <img
+              src={previewUrl}
+              alt="Avatar preview"
+              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            />
+          ) : initials ? (
+            <span
+              style={{ fontSize: '28px', fontWeight: '700', color: '#6d28d9' }}
+            >
+              {initials}
+            </span>
+          ) : (
+            <IonIcon
+              icon={personOutline}
+              style={{ fontSize: '32px', color: '#6d28d9' }}
+            />
+          )}
+        </div>
+
+        <div
+          style={{
+            position: 'absolute',
+            right: '0px',
+            bottom: '0px',
+            width: '36px',
+            height: '36px',
+            borderRadius: '12px',
+            background: '#ffffff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxShadow: '0 8px 16px rgba(109, 40, 217, 0.15)',
+          }}
+        >
+          <IonIcon
+            icon={camera}
+            style={{ fontSize: '20px', color: '#6d28d9' }}
+          />
+        </div>
+      </button>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={onFileChange}
+        disabled={disabled}
+        style={{ display: 'none' }}
+      />
+    </div>
+  );
+};
+
+export default AvatarPicker;