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

2026-06-21 20:45:35 +00:00
commit a3db1ee8e8
142 changed files with 20004 additions and 0 deletions
@@ -0,0 +1,115 @@
+import React, { useRef } from 'react';
+import { IonIcon } from '@ionic/react';
+import { cameraOutline, 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',
+        gap: '12px',
+        margin: '16px 0',
+      }}
+    >
+      <div
+        className="avatar-preview-circle"
+        onClick={handleClick}
+        style={{
+          width: '88px',
+          height: '88px',
+          borderRadius: '24px',
+          backgroundColor: previewUrl ? 'transparent' : 'rgba(109,40,217,0.10)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          position: 'relative',
+          overflow: 'hidden',
+          opacity: disabled ? 0.6 : 1,
+        }}
+      >
+        {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' }}
+          />
+        )}
+
+        {!previewUrl && (
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '4px',
+              right: '4px',
+              backgroundColor: '#6d28d9',
+              borderRadius: '12px',
+              padding: '4px',
+              display: 'flex',
+            }}
+          >
+            <IonIcon
+              icon={cameraOutline}
+              style={{ fontSize: '14px', color: '#ffffff' }}
+            />
+          </div>
+        )}
+      </div>
+      <span
+        style={{
+          fontSize: '13px',
+          fontWeight: '600',
+          color: '#6d28d9',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        }}
+        onClick={handleClick}
+      >
+        {previewUrl ? 'Change photo' : 'Add photo'}
+      </span>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={onFileChange}
+        disabled={disabled}
+        style={{ display: 'none' }}
+      />
+    </div>
+  );
+};
+
+export default AvatarPicker;