🎉 Gitea Mirror: Added

src/components/config/ScheduleConfigForm.tsx

@@ -0,0 +1,139 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "../ui/checkbox";
+import type { ScheduleConfig } from "@/types/config";
+import { formatDate } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+
+interface ScheduleConfigFormProps {
+  config: ScheduleConfig;
+  setConfig: React.Dispatch<React.SetStateAction<ScheduleConfig>>;
+}
+
+export function ScheduleConfigForm({
+  config,
+  setConfig,
+}: ScheduleConfigFormProps) {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) => {
+    const { name, value, type } = e.target;
+    setConfig({
+      ...config,
+      [name]:
+        type === "checkbox" ? (e.target as HTMLInputElement).checked : value,
+    });
+  };
+
+  // Convert seconds to human-readable format
+  const formatInterval = (seconds: number): string => {
+    if (seconds < 60) return `${seconds} seconds`;
+    if (seconds < 3600) return `${Math.floor(seconds / 60)} minutes`;
+    if (seconds < 86400) return `${Math.floor(seconds / 3600)} hours`;
+    return `${Math.floor(seconds / 86400)} days`;
+  };
+
+  // Predefined intervals
+  const intervals: { value: number; label: string }[] = [
+    // { value: 120, label: "2 minutes" }, //for testing
+    { value: 900, label: "15 minutes" },
+    { value: 1800, label: "30 minutes" },
+    { value: 3600, label: "1 hour" },
+    { value: 7200, label: "2 hours" },
+    { value: 14400, label: "4 hours" },
+    { value: 28800, label: "8 hours" },
+    { value: 43200, label: "12 hours" },
+    { value: 86400, label: "1 day" },
+    { value: 172800, label: "2 days" },
+    { value: 604800, label: "1 week" },
+  ];
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex items-center">
+            <Checkbox
+              id="enabled"
+              name="enabled"
+              checked={config.enabled}
+              onCheckedChange={(checked) =>
+                handleChange({
+                  target: {
+                    name: "enabled",
+                    type: "checkbox",
+                    checked: Boolean(checked),
+                    value: "",
+                  },
+                } as React.ChangeEvent<HTMLInputElement>)
+              }
+            />
+            <label
+              htmlFor="enabled"
+              className="select-none ml-2 block text-sm font-medium"
+            >
+              Enable Automatic Mirroring
+            </label>
+          </div>
+
+          <div>
+            <label
+              htmlFor="interval"
+              className="block text-sm font-medium mb-1.5"
+            >
+              Mirroring Interval
+            </label>
+
+            <Select
+              name="interval"
+              value={String(config.interval)}
+              onValueChange={(value) =>
+                handleChange({
+                  target: { name: "interval", value },
+                } as React.ChangeEvent<HTMLInputElement>)
+              }
+            >
+              <SelectTrigger className="w-full border border-input dark:bg-background dark:hover:bg-background">
+                <SelectValue placeholder="Select interval" />
+              </SelectTrigger>
+              <SelectContent className="bg-background text-foreground border border-input shadow-sm">
+                {intervals.map((interval) => (
+                  <SelectItem
+                    key={interval.value}
+                    value={interval.value.toString()}
+                    className="cursor-pointer text-sm px-3 py-2 hover:bg-accent focus:bg-accent focus:text-accent-foreground"
+                  >
+                    {interval.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            <p className="text-xs text-muted-foreground mt-1">
+              How often the mirroring process should run.
+            </p>
+          </div>
+
+          {config.lastRun && (
+            <div>
+              <label className="block text-sm font-medium mb-1">Last Run</label>
+              <div className="text-sm">{formatDate(config.lastRun)}</div>
+            </div>
+          )}
+
+          {config.nextRun && config.enabled && (
+            <div>
+              <label className="block text-sm font-medium mb-1">Next Run</label>
+              <div className="text-sm">{formatDate(config.nextRun)}</div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}