97 lines
5.1 KiB
TypeScript
97 lines
5.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { translations } from '../translations';
|
|
|
|
interface InputFormProps {
|
|
onStart: (startUrl: string, maxCompetitors: number, marketScope: string, language: 'de' | 'en') => void;
|
|
}
|
|
|
|
const InputForm: React.FC<InputFormProps> = ({ onStart }) => {
|
|
const [startUrl, setStartUrl] = useState('https://www.mobilexag.de');
|
|
const [maxCompetitors, setMaxCompetitors] = useState(12);
|
|
const [marketScope, setMarketScope] = useState('DACH');
|
|
const [language, setLanguage] = useState<'de' | 'en'>('de');
|
|
|
|
const t = translations[language];
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onStart(startUrl, maxCompetitors, marketScope, language);
|
|
};
|
|
|
|
const inputClasses = "w-full bg-light-primary dark:bg-brand-primary text-light-text dark:text-brand-text border border-light-accent dark:border-brand-accent rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-brand-highlight placeholder-light-subtle dark:placeholder-brand-light";
|
|
|
|
return (
|
|
<div className="bg-light-secondary dark:bg-brand-secondary p-8 rounded-lg shadow-2xl max-w-2xl mx-auto">
|
|
<h2 className="text-3xl font-bold mb-6 text-center">{t.inputForm.title}</h2>
|
|
<p className="text-light-subtle dark:text-brand-light mb-8 text-center">{t.inputForm.subtitle}</p>
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div>
|
|
<label htmlFor="start_url" className="block text-sm font-medium text-light-subtle dark:text-brand-light mb-2">{t.inputForm.startUrlLabel}</label>
|
|
<input
|
|
type="url"
|
|
id="start_url"
|
|
value={startUrl}
|
|
onChange={(e) => setStartUrl(e.target.value)}
|
|
className={inputClasses}
|
|
placeholder="https://www.example-company.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label htmlFor="max_competitors" className="block text-sm font-medium text-light-subtle dark:text-brand-light mb-2">{t.inputForm.maxCompetitorsLabel}</label>
|
|
<input
|
|
type="number"
|
|
id="max_competitors"
|
|
value={maxCompetitors}
|
|
onChange={(e) => setMaxCompetitors(parseInt(e.target.value, 10))}
|
|
className={inputClasses}
|
|
min="1"
|
|
max="50"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="market_scope" className="block text-sm font-medium text-light-subtle dark:text-brand-light mb-2">{t.inputForm.marketScopeLabel}</label>
|
|
<input
|
|
type="text"
|
|
id="market_scope"
|
|
value={marketScope}
|
|
onChange={(e) => setMarketScope(e.target.value)}
|
|
className={inputClasses}
|
|
placeholder={t.inputForm.marketScopePlaceholder}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-light-subtle dark:text-brand-light mb-2">{t.inputForm.languageLabel}</label>
|
|
<div className="flex rounded-lg shadow-sm" role="group">
|
|
<button
|
|
type="button"
|
|
onClick={() => setLanguage('de')}
|
|
className={`px-4 py-2 text-sm font-medium rounded-l-lg w-full transition-colors ${language === 'de' ? 'bg-brand-highlight text-white' : 'bg-light-primary dark:bg-brand-primary text-light-text dark:text-brand-text hover:bg-light-accent dark:hover:bg-brand-accent'}`}
|
|
>
|
|
Deutsch
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setLanguage('en')}
|
|
className={`px-4 py-2 text-sm font-medium rounded-r-lg w-full transition-colors ${language === 'en' ? 'bg-brand-highlight text-white' : 'bg-light-primary dark:bg-brand-primary text-light-text dark:text-brand-text hover:bg-light-accent dark:hover:bg-brand-accent'}`}
|
|
>
|
|
English
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="pt-4">
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-brand-highlight hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition duration-300 transform hover:scale-105"
|
|
>
|
|
{t.inputForm.submitButton}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default InputForm; |