website refactor

apps/website/components/onboarding/PersonalInfoStep.tsx

@@ -0,0 +1,151 @@
+import { User, Clock, ChevronRight } from 'lucide-react';
+import Input from '@/ui/Input';
+import Heading from '@/ui/Heading';
+import CountrySelect from '@/ui/CountrySelect';
+
+export interface PersonalInfo {
+  firstName: string;
+  lastName: string;
+  displayName: string;
+  country: string;
+  timezone: string;
+}
+
+interface FormErrors {
+  [key: string]: string | undefined;
+}
+
+interface PersonalInfoStepProps {
+  personalInfo: PersonalInfo;
+  setPersonalInfo: (info: PersonalInfo) => void;
+  errors: FormErrors;
+  loading: boolean;
+}
+
+const TIMEZONES = [
+  { value: 'America/New_York', label: 'Eastern Time (ET)' },
+  { value: 'America/Chicago', label: 'Central Time (CT)' },
+  { value: 'America/Denver', label: 'Mountain Time (MT)' },
+  { value: 'America/Los_Angeles', label: 'Pacific Time (PT)' },
+  { value: 'Europe/London', label: 'Greenwich Mean Time (GMT)' },
+  { value: 'Europe/Berlin', label: 'Central European Time (CET)' },
+  { value: 'Europe/Paris', label: 'Central European Time (CET)' },
+  { value: 'Australia/Sydney', label: 'Australian Eastern Time (AET)' },
+  { value: 'Asia/Tokyo', label: 'Japan Standard Time (JST)' },
+  { value: 'America/Sao_Paulo', label: 'Brasília Time (BRT)' },
+];
+
+export function PersonalInfoStep({ personalInfo, setPersonalInfo, errors, loading }: PersonalInfoStepProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <Heading level={2} className="text-xl mb-1 flex items-center gap-2">
+          <User className="w-5 h-5 text-primary-blue" />
+          Personal Information
+        </Heading>
+        <p className="text-sm text-gray-400">
+          Tell us a bit about yourself
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="firstName" className="block text-sm font-medium text-gray-300 mb-2">
+            First Name *
+          </label>
+          <Input
+            id="firstName"
+            type="text"
+            value={personalInfo.firstName}
+            onChange={(e) =>
+              setPersonalInfo({ ...personalInfo, firstName: e.target.value })
+            }
+            error={!!errors.firstName}
+            errorMessage={errors.firstName}
+            placeholder="John"
+            disabled={loading}
+          />
+        </div>
+
+        <div>
+          <label htmlFor="lastName" className="block text-sm font-medium text-gray-300 mb-2">
+            Last Name *
+          </label>
+          <Input
+            id="lastName"
+            type="text"
+            value={personalInfo.lastName}
+            onChange={(e) =>
+              setPersonalInfo({ ...personalInfo, lastName: e.target.value })
+            }
+            error={!!errors.lastName}
+            errorMessage={errors.lastName}
+            placeholder="Racer"
+            disabled={loading}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="displayName" className="block text-sm font-medium text-gray-300 mb-2">
+          Display Name * <span className="text-gray-500 font-normal">(shown publicly)</span>
+        </label>
+        <Input
+          id="displayName"
+          type="text"
+          value={personalInfo.displayName}
+          onChange={(e) =>
+            setPersonalInfo({ ...personalInfo, displayName: e.target.value })
+          }
+          error={!!errors.displayName}
+          errorMessage={errors.displayName}
+          placeholder="SpeedyRacer42"
+          disabled={loading}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="country" className="block text-sm font-medium text-gray-300 mb-2">
+            Country *
+          </label>
+          <CountrySelect
+            value={personalInfo.country}
+            onChange={(value) =>
+              setPersonalInfo({ ...personalInfo, country: value })
+            }
+            error={!!errors.country}
+            errorMessage={errors.country ?? ''}
+            disabled={loading}
+          />
+        </div>
+
+        <div>
+          <label htmlFor="timezone" className="block text-sm font-medium text-gray-300 mb-2">
+            Timezone
+          </label>
+          <div className="relative">
+            <Clock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 z-10" />
+            <select
+              id="timezone"
+              value={personalInfo.timezone}
+              onChange={(e) =>
+                setPersonalInfo({ ...personalInfo, timezone: e.target.value })
+              }
+              className="block w-full rounded-md border-0 px-4 py-3 pl-10 bg-iron-gray text-white shadow-sm ring-1 ring-inset ring-charcoal-outline placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-blue transition-all duration-150 sm:text-sm appearance-none cursor-pointer"
+              disabled={loading}
+            >
+              <option value="">Select timezone</option>
+              {TIMEZONES.map((tz) => (
+                <option key={tz.value} value={tz.value}>
+                  {tz.label}
+                </option>
+              ))}
+            </select>
+            <ChevronRight className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 rotate-90" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}