genui project

GenerateUi.jsx

import UiToggle from "@/components/UiToggle";
import React, { useState } from "react";

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

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

  const handleToggleCode = (newToggleCodeValue: boolean) => {
    setIsToggleCode(newToggleCodeValue);
  };

  return (
    <section className="flex flex-col bg-primary_light_color bg-opacity-15 h-full w-full rounded-lg">
      {/* generate ui options */}
      <div className="flex justify-between items-center p-3">
        <div className="flex justify-start items-center gap-2">
          <div className="h-9 w-9 bg-white rounded-full border border-primary_color border-opacity-60"></div>
          <h6>A luxury fashion brand landing page</h6>
        </div>
        <UiToggle onToggleCode={handleToggleCode} />
      </div>
      {/* generate ui flip functionality */}
      <div className="w-full h-full bg-secondary_color text-primary p-4">
        {isToggleCode ? <UiView /> : <CodeView />}
      </div>
    </section>
  );
};