54 lines
1.4 KiB
TypeScript
54 lines
1.4 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-1 ${className}`}>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<label htmlFor="calendar-url" className="mb-1 block text-sm font-medium text-[#F4F1EA]/76">
|
|
Calendar URL
|
|
</label>
|
|
<input
|
|
id="calendar-url"
|
|
type="url"
|
|
value={url}
|
|
onChange={(e) => setUrl(e.target.value)}
|
|
placeholder="https://example.com/calendar.ics"
|
|
className="brand-input px-3 py-2"
|
|
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;
|