103 lines
2.8 KiB
TypeScript
103 lines
2.8 KiB
TypeScript
import { cn } from "@/shared/utils/utils";
|
|
import { Circle, CircleCheck } from "lucide-react";
|
|
import { MapsetFormState, MapsetFormTab } from "../../state";
|
|
|
|
interface TabButtonProps {
|
|
isActive: boolean;
|
|
onClick: () => void;
|
|
label: string;
|
|
isCompleted?: boolean;
|
|
}
|
|
|
|
const TabButton = ({
|
|
isActive,
|
|
onClick,
|
|
label,
|
|
isCompleted,
|
|
}: TabButtonProps) => {
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={cn(
|
|
"flex items-center px-4 py-2 border-b-2 focus:outline-none relative",
|
|
isActive
|
|
? "border-primary text-primary"
|
|
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
|
)}
|
|
>
|
|
{isCompleted ? (
|
|
<span className="mr-2 text-primary">
|
|
<CircleCheck className="w-4 h-4" />
|
|
</span>
|
|
) : (
|
|
<span className="mr-2 text-zinc-400">
|
|
<Circle />
|
|
</span>
|
|
)}
|
|
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default function MapsetTab({
|
|
formState,
|
|
activeTab,
|
|
handleTabChange,
|
|
}: // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
any) {
|
|
const isTabComplete = (tabKey: keyof MapsetFormState): boolean => {
|
|
const data = formState[tabKey];
|
|
|
|
switch (tabKey) {
|
|
case "info":
|
|
return Boolean(
|
|
data.name &&
|
|
data.projection_system_id &&
|
|
data.category_id &&
|
|
data.classification_id
|
|
);
|
|
case "metadata":
|
|
return Boolean(data.metadata_url && data.layer_url);
|
|
case "classification":
|
|
return Boolean(data.coverage_area && data.coverage_level);
|
|
case "version":
|
|
return Boolean(data.data_update_period && data.data_version);
|
|
default:
|
|
return false;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="border-b border-gray-200 bg-zinc-50 text-sm">
|
|
<div className="flex space-x-1">
|
|
<TabButton
|
|
isActive={activeTab === MapsetFormTab.INFO}
|
|
onClick={() => handleTabChange(MapsetFormTab.INFO)}
|
|
label="Informasi Mapset"
|
|
isCompleted={isTabComplete("info")} // Tandai tab sudah diisi
|
|
/>
|
|
<TabButton
|
|
isActive={activeTab === MapsetFormTab.METADATA}
|
|
onClick={() => handleTabChange(MapsetFormTab.METADATA)}
|
|
label="Metadata"
|
|
isCompleted={isTabComplete("metadata")}
|
|
/>
|
|
<TabButton
|
|
isActive={activeTab === MapsetFormTab.CLASSIFICATION}
|
|
onClick={() => handleTabChange(MapsetFormTab.CLASSIFICATION)}
|
|
label="Klasifikasi"
|
|
isCompleted={isTabComplete("classification")}
|
|
/>
|
|
|
|
<TabButton
|
|
isActive={activeTab === MapsetFormTab.VERSION}
|
|
onClick={() => handleTabChange(MapsetFormTab.VERSION)}
|
|
label="Informasi Versi"
|
|
isCompleted={isTabComplete("version")}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|