Refactor New Ui Bumdes

src/components/umkm/header-toggle.tsx

@@ -0,0 +1,75 @@
+import {
+	Button,
+	Card,
+	Group,
+	Title,
+	useMantineColorScheme,
+} from "@mantine/core";
+import { useSnapshot } from "valtio";
+import { setRange, umkmStore } from "../../store/umkm";
+
+type TimeRange = "minggu" | "bulan";
+
+interface HeaderToggleProps {
+	title?: string;
+	onRangeChange?: (range: TimeRange) => void;
+}
+
+export const HeaderToggle = ({
+	title = "Update Penjualan Produk",
+	onRangeChange,
+}: HeaderToggleProps) => {
+	const { colorScheme } = useMantineColorScheme();
+	const dark = colorScheme === "dark";
+	const { selectedRange } = useSnapshot(umkmStore);
+
+	const handleRangeChange = (range: TimeRange) => {
+		setRange(range);
+		onRangeChange?.(range);
+	};
+
+	return (
+		<Card
+			p="md"
+			radius="xl"
+			withBorder
+			shadow="sm"
+			bg={dark ? "#1e3a5f" : "#1e3a5f"}
+			style={{ borderColor: dark ? "#1e3a5f" : "#1e3a5f" }}
+		>
+			<Group justify="space-between" align="center" px="md" py="xs">
+				<Title order={3} c="white">
+					{title}
+				</Title>
+				<Group gap="xs">
+					<Button
+						variant={selectedRange === "minggu" ? "white" : "transparent"}
+						onClick={() => handleRangeChange("minggu")}
+						c={selectedRange === "minggu" ? "#1e3a5f" : "white"}
+						fw={600}
+						radius="xl"
+						size="sm"
+						style={{
+							opacity: selectedRange === "minggu" ? 1 : 0.8,
+						}}
+					>
+						Minggu ini
+					</Button>
+					<Button
+						variant={selectedRange === "bulan" ? "white" : "transparent"}
+						onClick={() => handleRangeChange("bulan")}
+						c={selectedRange === "bulan" ? "#1e3a5f" : "white"}
+						fw={600}
+						radius="xl"
+						size="sm"
+						style={{
+							opacity: selectedRange === "bulan" ? 1 : 0.8,
+						}}
+					>
+						Bulan ini
+					</Button>
+				</Group>
+			</Group>
+		</Card>
+	);
+};