some ui tweeks

Author: sabeerbikba

src/components/EditorSplitViewLayout.jsx

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import cn from "@/utils/cn";
 import useMediaQuery from "@/hooks/useMediaQuery";
 
-// TODO: mobile not friendly error need to show for non responsive value
-
 const EditorSplitViewLayout = ({ editorBtns, editor, preview }) => {
   const [enabledEditor, setEnabledEditor] = useState(true);
     const isMobile = useMediaQuery("max-width: 640px");
@@ -17,7 +15,7 @@ const EditorSplitViewLayout = ({ editorBtns, editor, preview }) => {
     <div className="sm:flex size-full">
       <div
         className={cn(
-          "sm:w-1/2 max-sm:w-full sm:h-full max-sm:h-[88%] flex flex-col bg-[#808080cc]",
+          "sm:w-1/2 max-sm:w-full sm:h-full max-sm:h-[80%] flex flex-col bg-[#808080cc]",
           enabledEditor || isMobile && "hidden h-0"
         )}
       >
@@ -28,7 +26,7 @@ const EditorSplitViewLayout = ({ editorBtns, editor, preview }) => {
       </div>
       <div
         className={cn(
-          "sm:w-1/2 max-sm:w-full sm:h-full max-sm:h-[88%] text-white max-sm:border-b max-sm:border-white",
+          "sm:w-1/2 max-sm:w-full sm:h-full max-sm:h-[80%] text-white max-sm:border-b max-sm:border-white",
           !enabledEditor || isMobile && "hidden"
         )}
       >
@@ -40,12 +38,12 @@ const EditorSplitViewLayout = ({ editorBtns, editor, preview }) => {
         <div
           onClick={() => setEnabledEditor((prev) => !prev)}
           className={`mx-2 w-14 h-8 flex items-center bg-gray-300 rounded-full p-1 cursor-pointer transition-colors duration-300 ${
-            enabledEditor ? "bg-indigo-500" : "bg-gray-400"
+            !enabledEditor ? "bg-indigo-500" : "bg-gray-400"
           }`}
         >
           <div
             className={`bg-white w-6 h-6 rounded-full shadow-md transform transition-transform duration-300 ${
-              enabledEditor ? "translate-x-6" : "translate-x-0"
+              !enabledEditor ? "translate-x-6" : "translate-x-0"
             }`}
           />
         </div>

src/data/websites.js

@@ -114,6 +114,28 @@ export const websites = {
          img: 'TPgJt9i.png'
       },
    ],
+   "Code Genrator": [
+      {
+         heading: "V0.dev",
+         text: "AI tool by Vercel that turns text prompts into clean React + Tailwind components.",
+         link: "https://v0.dev/",
+         customImg: true,
+         img: "https://v0.dev/assets/icon-dark-32x32.png"
+      },
+      {
+         heading: "Figma Make",
+         text: "Figma's AI feature that generates code from text or designs using modern frontend stacks.",
+         link: "https://www.figma.com/make/",
+         img: "sCrOWn1.png"
+      },
+      {
+         heading: "Flexbox Labs",
+         text: "A simple playground to generate and visualize CSS Flexbox layouts.",
+         link: "https://flexboxlabs.netlify.app/",
+         customImg: true,
+         img: "https://flexboxlabs.netlify.app/favicon.ico"
+      }
+   ],
    "Regular Expression": [
       {
          heading: "regexr.com",

src/pages/Websites.jsx

@@ -48,28 +48,29 @@ function AccordionGenrator({ heading, index }) {
       <AccordionItemHeading key={index}>
         <AccordionItemButton className="accordion-btn4Web">
           <div className="accordion-btn4Web-div">
-            <div className="accordion-btn4Web-div2">{heading}</div>
+            <div className="accordion-btn4Web-div2  max-lg:!text-lg max-sm:!text-base">
+              {heading}
+            </div>
           </div>
         </AccordionItemButton>
       </AccordionItemHeading>
       {accrdionBody.map((body, bodyIndex) => (
         <AccordionItemPanel
           key={bodyIndex}
-          className="accrdion-panel4Web"
-          style={{ backgroundColor: "#8c8ecc", padding: "0 0 0 20px" }}
+          className="accrdion-panel4Web bg-[#8c8ecc] pl-5 max-lg:pl-2 max-sm:pl-1"
         >
           <div className="accordion-panel4WebDiv">
-            <div>
+            <div className="flex justify-center content-center flex-wrap">
               <img
-                src={baseUrl + body.img}
-                className="accordion-panel4WebImg"
+                src={body.customImg ? body.img : baseUrl + body.img}
+                className="rounded-[8px] h-[60px] max-lg:h-[45px] max-sm:h-[35px]"
               />
             </div>
             <div className="accordion-panel4WebHead">{body.heading}</div>
             <p className="accordion-panel4WebP">{body.text}</p>
             <div>
               <button
-                className="accordion-panel4WebBtn"
+                className="accordion-panel4WebBtn max-lg:!w-[7rem] max-sm:!w-[4.8rem]"
                 onClick={useOpenLink(body.link)}
               >
                 Visit

src/styles/output.css

@@ -261,12 +261,6 @@ button.btn:disabled {
   background-color: #8c8ecc;
 }
 
-.accordion-panel4WebImg,
-.Browser-extensionsImg {
-  border-radius: 8px;
-  height: 60px;
-}
-
 .accordion-panel4WebHead,
 .Browser-extensionsHead {
   /* text-align: center; */

src/styles/styles.css

@@ -43,7 +43,7 @@ export default defineConfig({
    server: {
       host: '0.0.0.0',
       port: 3004,
-      // open: true,
+      open: true,
       https: false,
    },
    resolve: {