checkpoint

Author: abrehamgezahegn

examples/vite_basic/src/components/DevPanel.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import FloatingButton from "./FloatingButton";
+
+interface DevPanelProps {
+  devMode: boolean;
+  setDevMode: (mode: boolean) => void;
+  theme: "light" | "dark";
+  setTheme: (theme: "light" | "dark") => void;
+}
+
+const DevPanel: React.FC<DevPanelProps> = ({
+  devMode,
+  setDevMode,
+  theme,
+  setTheme,
+}) => {
+  return (
+    <>
+      {/* Floating Dev Mode Button */}
+      <FloatingButton
+        onClick={() => setDevMode(!devMode)}
+        backgroundColor={devMode ? "oklch(60% 0.2 250)" : "oklch(40% 0.2 250)"}
+        offset={{ x: 20, y: 20 }}
+      >
+        {devMode ? "Disable" : "Enable"} Dev Mode
+      </FloatingButton>
+
+      {/* Floating Theme Toggle Button */}
+      <FloatingButton
+        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        backgroundColor={
+          theme === "dark" ? "oklch(60% 0.2 50)" : "oklch(40% 0.2 50)"
+        }
+        offset={{ x: 200, y: 20 }}
+      >
+        {theme === "dark" ? "☀️ Light" : "🌙 Dark"} Mode
+      </FloatingButton>
+    </>
+  );
+};
+
+export default DevPanel;

examples/vite_basic/src/components/FloatingButton.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+
+interface FloatingButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  offset?: { x: number; y: number };
+  backgroundColor?: string;
+  color?: string;
+  zIndex?: number;
+}
+
+const FloatingButton: React.FC<FloatingButtonProps> = ({
+  onClick,
+  children,
+  position = "top-right",
+  offset = { x: 20, y: 20 },
+  backgroundColor = "oklch(40% 0.2 250)",
+  color = "white",
+  zIndex = 1000,
+}) => {
+  const getPositionStyles = () => {
+    switch (position) {
+      case "top-left":
+        return { top: offset.y, left: offset.x };
+      case "bottom-right":
+        return { bottom: offset.y, right: offset.x };
+      case "bottom-left":
+        return { bottom: offset.y, left: offset.x };
+      default:
+        return { top: offset.y, right: offset.x };
+    }
+  };
+
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        position: "fixed",
+        ...getPositionStyles(),
+        zIndex,
+        padding: "8px 16px",
+        background: backgroundColor,
+        color,
+        border: "none",
+        borderRadius: "4px",
+        cursor: "pointer",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
+        transition: "all 0.2s ease",
+      }}
+      onMouseEnter={(e) => {
+        e.currentTarget.style.transform = "scale(1.05)";
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.transform = "scale(1)";
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default FloatingButton;