diff --git a/frontend/src/components/features/onboarding/information-request-form.tsx b/frontend/src/components/features/onboarding/information-request-form.tsx index 099838cbfc..43c7ad2eea 100644 --- a/frontend/src/components/features/onboarding/information-request-form.tsx +++ b/frontend/src/components/features/onboarding/information-request-form.tsx @@ -1,10 +1,87 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router"; import { I18nKey } from "#/i18n/declaration"; -import { BrandButton } from "#/components/features/settings/brand-button"; +import { Card } from "#/ui/card"; +import { Text } from "#/ui/typography"; +import CloudIcon from "#/icons/cloud.svg?react"; +import StackedIcon from "#/icons/stacked.svg?react"; +import WaveIcon from "#/icons/wave.svg?react"; export type RequestType = "saas" | "self-hosted"; +interface FormInputProps { + id: string; + label: string; + value: string; + placeholder: string; + type?: "text" | "email"; + onChange: (value: string) => void; +} + +function FormInput({ + id, + label, + value, + placeholder, + type = "text", + onChange, +}: FormInputProps) { + return ( +
+ + onChange(e.target.value)} + placeholder={placeholder} + className="w-full rounded-md border border-[#3a3a3a] bg-transparent px-4 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:border-white focus:outline-none transition-colors" + /> +
+ ); +} + +interface FormTextareaProps { + id: string; + label: string; + value: string; + placeholder: string; + onChange: (value: string) => void; +} + +function FormTextarea({ + id, + label, + value, + placeholder, + onChange, +}: FormTextareaProps) { + return ( +
+ +