Files
road-monitoring-ui/src/app/(modules)/upload/components/UploadSettingsSection.tsx

57 lines
1.6 KiB
TypeScript

'use client';
import type { RefObject } from 'react';
import { FormField, SelectPopover } from '@/components/form';
const options = [
{ value: 'yolo', label: 'Road Defect Detection' },
{ value: 'yoloe', label: 'YOLOE Open-Vocabulary Detection' },
{ value: 'yoloe_trained_vl', label: 'YOLOE With Vision Language Model' },
{ value: 'culvert_detection', label: 'Culvert Detection' },
{ value: 'combined', label: 'Road Defect Detection with vl' },
{ value: 'yoloe_seg', label: 'Improved Road Defect Detection' },
] as const;
interface UploadSettingsSectionProps {
value: string;
onValueChange: (value: string) => void;
disabled?: boolean;
portalContainer?: RefObject<HTMLDivElement | null>;
}
export function UploadSettingsSection({
value,
onValueChange,
disabled = false,
portalContainer,
}: UploadSettingsSectionProps) {
return (
<section className="space-y-3">
<div>
<h2 className="text-sm font-semibold text-foreground">
Upload Settings
</h2>
<p className="text-xs text-muted-foreground">
Select the detection workflow for this upload.
</p>
</div>
<div className="grid grid-cols-1 gap-3 md:grid-cols-2">
<FormField id="detection-mode" label="Detection Mode">
<SelectPopover
options={options}
value={value}
onValueChange={onValueChange}
disabled={disabled}
portalContainer={portalContainer}
placeholder="Select method"
searchPlaceholder="Search methods"
emptyMessage="No methods found."
/>
</FormField>
</div>
</section>
);
}