• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71

'use client';

import { useRef } from 'react';

import DropdownTrigger from '@/app/components/forms/DropdownTrigger/DropdownTrigger';
import { TimezoneProvider } from '@/app/components/TimezoneContext';
import Card from '@/app/components/Card/Card';
import { Button, Input } from 'react-aria-components';
import styles from './Settings.module.scss';

export default function Settings() {
  const triggerRef = useRef<HTMLButtonElement>(null);
  return (
    <TimezoneProvider>

      <section className={styles.body}>

        <Card>
          <div className={styles['inner-card']}>
            <div className={styles['info-icon-container']}>
              <p className={styles['card-title']}>General</p>
            </div>
            <div className={styles['widget-text-bar']}></div>
            <div>
              <label className={styles['card-label']}>Organization Timezone</label>
              <DropdownTrigger
                text={['one', '']}
                ref={triggerRef}
              />
            </div>
          </div>
        </Card>

        <Card>
          <section className={styles['inner-card']}>
            <div className={styles['info-icon-container']}>
              <p className={styles['card-title']}>Custom user fields</p>
            </div>
            <div className={styles['widget-text-bar']}></div>
            <p className={styles['card-subtitle']}>User custom user fields to add more context to your data</p>
            <div>
              <label className={styles['card-label']}>Organization Timezone</label>
             
             
                <span className={styles['label-text']}>{t('email')}</span>
                <Input
                  {...register('email', {
                    required: true,
                    validate: value =>
                      validateEmail(value) || t('errors.invalid-email'),
                  })}
                  onBlur={() => trigger('email')}
                  aria-label={t('email')}
                  type="email"
                  className={styles['input-box']}
                />
              </label>
            </div>
          </section>
        </Card>





      </section>

    </TimezoneProvider >
  );
}