50 lines
1.5 KiB
TypeScript
50 lines
1.5 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-gray-300 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-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
|
required
|
|
/>
|
|
</div>
|
|
{error && <div className="text-red-600 text-sm">{error}</div>}
|
|
<Button type="submit" disabled={loading}>
|
|
{loading ? <>Load Calendar</> : <>Load Calendar</>}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UrlTab;
|