genui project

toggle.jsx

"use client";

import { Button } from "@/components/ui/button";
import { Code2, PanelsTopLeft } from "lucide-react";
import { useState } from "react";

interface UiToggleProps {
  onToggleCode: (newToggleCodeValue: boolean) => void;
}

const UiToggle: React.FC<UiToggleProps> = ({ onToggleCode }) => {
  const [isToggleCode, setIsToggleCode] = useState(true);

  const toggleGenerate = () => {
    setIsToggleCode(!isToggleCode);
    // Send the updated value to the parent component
    onToggleCode(!isToggleCode);
  };

  return (
    <div className="!w-24 ">
      {isToggleCode ? (
        <Button className="generate-toggle-btn" onClick={toggleGenerate}>
          <span>Code</span> <Code2 className="w-5 h-5" />
        </Button>
      ) : (
        <Button className="generate-toggle-btn" onClick={toggleGenerate}>
          <span>Canvas</span> <PanelsTopLeft className="w-5 h-5" />
        </Button>
      )}
    </div>
  );
};

export default UiToggle;