fegger
eac4f6e216
- Update BRAND_GUIDELINES.md with new melting clock logo concept - Rebrand UI components with new violet-to-pink gradient color scheme - Implement HAFAS authentication headers and GET support in route - Update logo SVGs to match new brand guidelines - Fix HAFAS time format to exclude millisecond padding - Update default station to Mödling Bahnhof - Bump workspace package versions to 1.0.0
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Button from "@/app/ui/Button";
|
|
|
|
type UrlTabProps = {
|
|
onLoadCalendar: (url: string) => Promise<void>;
|
|
loading: boolean;
|
|
error: string | null;
|
|
className?: string;
|
|
};
|
|
|
|
const UrlTab: React.FC<UrlTabProps> = ({ onLoadCalendar, loading, error, className = "" }) => {
|
|
const [url, setUrl] = useState("");
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (url.trim()) {
|
|
await onLoadCalendar(url.trim());
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`p-4 ${className}`}>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="calendar-url" className="block text-sm font-medium text-gray-700 dark:text-[#F4F1EA]/80 mb-1">
|
|
Calendar URL
|
|
</label>
|
|
<input
|
|
id="calendar-url"
|
|
type="url"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
placeholder="https://example.com/calendar.ics"
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-[#B23CFF] focus:border-[#B23CFF] dark:bg-white/5 dark:border-white/10 dark:text-[#F4F1EA]"
|
|
required
|
|
/>
|
|
</div>
|
|
{error && (
|
|
<div role="alert" className="text-[#FF2D8D] text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? <>Load Calendar</> : <>Load Calendar</>}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UrlTab;
|