tesla

import { useState } from "react";
import TransitionFull from "~/components/buildingBlocks/TransitionFull";
import FlexFull from "~/components/buildingBlocks/flexFull";
import Text from "~/components/buildingBlocks/text";
import VStackFull from "~/components/buildingBlocks/vStackFull";
import TeslaSmallScreenMenu from "./components/teslaSmallMenu";
import Flex from "~/components/buildingBlocks/flex";
import VStack from "~/components/buildingBlocks/vStack";
import { motion } from "framer-motion";
import TeslaLargeScreenMenu from "./components/teslaMenuLarge";
import TeslaNavMenu from "./components/teslaNavBar";
import HStack from "~/components/buildingBlocks/hStack";
import Icon from "~/components/buildingBlocks/icon";
import { FaChevronRight } from "react-icons/fa";
import Box from "~/components/buildingBlocks/box";
import Center from "~/components/buildingBlocks/center";
import CenterFull from "~/components/buildingBlocks/centerFull";
import ReturnToMockupsButton from "./components/returnToMockupsButton";

export type MenuType =
  | "vehicles"
  | "energy"
  | "charging"
  | "discover"
  | "shop"
  | null;

const buttonTexts = ["vehicles", "energy", "charging", "discover", "shop"];

function MenuItem({
  text,

  isSmallMenu = false,
  setShowLargeMenu,
  setMenuType,
}: {
  text: string;
  isSmallMenu?: boolean;

  setShowLargeMenu?: (show: boolean) => void;
  setMenuType: (menuType: MenuType) => void;
}) {
  return (
    <motion.div
      className="px-[0.5vh] h-fit hover:cursor-pointer hover:bg-slate-300/80 transition-400 w-full lg:w-fit"
      onMouseOver={
        !isSmallMenu
          ? () => {
              setShowLargeMenu && setShowLargeMenu(true);
              setMenuType(text.toLowerCase() as MenuType);
            }
          : () => {}
      }
      onClick={
        isSmallMenu
          ? () => {
              setMenuType(text.toLowerCase() as MenuType);
            }
          : () => {}
      }
    >
      <HStack className="w-full lg:w-fit items-center justify-between">
        <Text className="text-[2.3vh] lg:text-[2vh] mPlus-font">{text}</Text>
        <Box className="lg:hidden pr-[1vh]">
          <Icon icon={FaChevronRight} />
        </Box>
      </HStack>
    </motion.div>
  );
}

export function MenuItems({
  setShowLargeMenu,
  setMenuType,
  isSmallMenu = false,
}: {
  setShowLargeMenu?: (show: boolean) => void;
  setMenuType: (menuType: MenuType) => void;
  isSmallMenu?: boolean;
}) {
  console.log("isSmallMenu: ", isSmallMenu);
  return (
    <>
      {buttonTexts.map((text, i) => (
        <MenuItem
          isSmallMenu={isSmallMenu}
          key={i}
          text={text}
          setShowLargeMenu={setShowLargeMenu && setShowLargeMenu}
          setMenuType={setMenuType}
        />
      ))}
    </>
  );
}

export default function TeslaMockup() {
  function HeadingItem({
    heading,
    priceLine,
    subheading,
    lightVersion = false,
    graffiti = false,
    height = "h-[75vh]",
  }: {
    heading?: string;
    priceLine?: string;
    subheading?: string;
    lightVersion?: boolean;
    graffiti?: boolean;
    height?: string;
  }) {
    return (
      <CenterFull>
        <VStackFull
          className={`justify-between ${height} text-slate-900 justify-end`}
        >
          <VStack
            className={`h-fit justify-evenly ${
              lightVersion ? "text-slate-100 textShadow" : " text-slate-900"
            } py-[1vh] px-[2vh]`}
            gap="gap-[0px]"
          >
            {heading && (
              <Text
                className={`${
                  graffiti ? "graffiti-font text-[6vh]" : ""
                } text-[4.5vh] tracking-widest font-semibold`}
              >
                {heading}
              </Text>
            )}
            {priceLine && (
              <Text className="text-[1.8vh] font-semibold">
                from {priceLine}*
              </Text>
            )}
            {subheading && <Text className="text-[1.3vh]">{subheading}</Text>}
          </VStack>
          <Flex className="flex-col items-center sm:flex-row justify-center gap-[2vh] sm:gap-[5vh]">
            <Center className="h-[5vh] hover:cursor-pointer bg-slate-200 w-[80vw] sm:w-[25vh]">
              <Text>Order Now</Text>
            </Center>
            <Center className="h-[5vh] hover:cursor-pointer bg-slate-800 text-slate-100 w-[80vw] sm:w-[25vh]">
              <Text>Learn More</Text>
            </Center>
          </Flex>
        </VStackFull>
      </CenterFull>
    );
  }

  const pageStyle =
    "justify-center snap-start snap-always overflow-x-hidden  w-[100vw] h-[100svh] rounded-none";
  const [menuOpen, setMenuOpen] = useState(false);
  const [showLargeMenu, setShowLargeMenu] = useState(false);
  const [menuType, setMenuType] = useState<MenuType>("vehicles");

  return (
    <>
      <FlexFull className="bg-slate-200 h-[100svh] rounded-none relative mPlus-font font-[400]">
        <TransitionFull className="rounded-none">
          <FlexFull
            className={`overflow-y-auto snap-y scroll-smooth snap-mandatory overflow-x-hidden rounded-none`}
          >
            {" "}
            <ReturnToMockupsButton />
            <VStackFull className="h-fit" gap="gap-[0px]">
              {/* *************** HEADER *************** */}
              <TeslaNavMenu
                setMenuType={setMenuType}
                setShowLargeMenu={setShowLargeMenu}
                setMenuOpen={setMenuOpen}
              />
              {/* *************** SECTIONS *************** */}
              <Flex
                id="one"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-model-a-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-model-a.png?resize=contain&quality=70')] bg-cover bg-fixed bg-top`}
              >
                <HeadingItem
                  heading="Model A"
                  priceLine="$68,888"
                  subheading="After tax credit and est. gas savings."
                />
              </Flex>
              <Flex
                id="two"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-model-b-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-model-b.png?resize=contain&quality=70')] bg-cover bg-fixed bg-top`}
              >
                {" "}
                <HeadingItem
                  heading="Model B"
                  priceLine="$78,888"
                  subheading="After tax credit and est. gas savings."
                />
              </Flex>
              <Flex
                id="three"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-model-c-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-model-c.png?resize=contain&quality=70')] bg-cover bg-fixed bg-top`}
              >
                {" "}
                <HeadingItem
                  heading="Model C"
                  priceLine="$88,888"
                  subheading="After tax credit and est. gas savings."
                />
              </Flex>
              <Flex
                id="four"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-model-d-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-model-d.png?resize=contain&quality=70')] bg-cover bg-fixed bg-top`}
              >
                <HeadingItem
                  heading="Model D"
                  priceLine="$98,888"
                  subheading="After tax credit and est. gas savings."
                />
              </Flex>
              <Flex
                id="five"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-pseudo-truck-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-pseudo-truck.png?resize=contain&quality=70')] bg-cover bg-fixed bg-top`}
              >
                <HeadingItem heading="Pseudo Truck" graffiti />
              </Flex>
              <Flex
                id="six"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-solar-roof-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-solar-roof.png?resize=contain&quality=70')] bg-cover bg-fixed bg-top`}
              >
                <HeadingItem
                  heading="Solar Roof"
                  subheading="Generate your own clean energy."
                />
              </Flex>
              <Flex
                id="seven"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-solar-panels-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-solar-panels.png?resize=contain&quality=70')] bg-cover bg-fixed bg-top`}
              >
                <HeadingItem
                  heading="Solar Panels"
                  subheading="Generate your own clean energy."
                />
              </Flex>{" "}
              <Flex
                id="seven"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-powerwall-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-powerwall.png?resize=contain&quality=70')] bg-cover bg-fixed bg-center`}
              >
                <HeadingItem heading="Powerwall" />
              </Flex>
              <Flex
                id="seven"
                className={`${pageStyle} bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-charging-accessories-mobile.png?resize=contain&quality=70')] md:bg-[url('https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/tesla-charging-accessories.png?resize=contain&quality=70')] bg-cover bg-fixed md:bg-left xxl:bg-bottom`}
              >
                <HeadingItem heading="Accessories" />
              </Flex>
            </VStackFull>
          </FlexFull>
        </TransitionFull>
      </FlexFull>
      <TeslaSmallScreenMenu
        isOpen={menuOpen}
        setIsOpen={setMenuOpen}
        onClose={() => setMenuOpen(false)}
      />
      <TeslaLargeScreenMenu
        onClose={() => setShowLargeMenu(false)}
        isOpen={showLargeMenu}
        setModalOpen={setShowLargeMenu}
        menuType={menuType}
        setMenuType={setMenuType}
        setShowLargeMenu={setShowLargeMenu}
        setMenuOpen={setMenuOpen}
      />
    </>
  );
}

import Box from "~/components/buildingBlocks/box";
import HStackFull from "~/components/buildingBlocks/hStackFull";
import Icon from "~/components/buildingBlocks/icon";
import { AiOutlineQuestionCircle } from "react-icons/ai";
import { BsGlobe2 } from "react-icons/bs";
import { CgProfile } from "react-icons/cg";
import { motion } from "framer-motion";
import { MenuItems, MenuType } from "../tesla";
import HStack from "~/components/buildingBlocks/hStack";
import Flex from "~/components/buildingBlocks/flex";
import Text from "~/components/buildingBlocks/text";

export function TeslaIconMenu() {
  return (
    <Flex className="gap-[5vh] flex-col items-start lg:flex-row lg:items-center lg:gap-[1vh] w-full lg:w-fit">
      <Flex className="hidden lg:flex hover:bg-slate-300/80 transition-400 w-full lg:w-fit p-[0.5vh]">
        <Icon icon={AiOutlineQuestionCircle} iconClassName="text-[2.9vh]" />
      </Flex>
      <HStack className="items-center hover:bg-slate-300/80 transition-400 w-full lg:w-fit p-[0.5vh]">
        <Icon icon={BsGlobe2} iconClassName="text-[2.4vh]" />
        <Text className="lg:hidden">United States</Text>
      </HStack>
      <HStack className="items-center hover:bg-slate-300/80 transition-400 w-full lg:w-fit p-[0.5vh]">
        <Icon icon={CgProfile} iconClassName="text-[2.7vh]" />
        <Text className="lg:hidden">Account</Text>
      </HStack>
    </Flex>
  );
}
export default function TeslaNavMenu({
  setMenuType,
  setShowLargeMenu,
  setMenuOpen,
}: {
  setMenuType: (menuType: MenuType) => void;
  setShowLargeMenu: (show: boolean) => void;
  setMenuOpen: (isOpen: boolean) => void;
}) {
  return (
    <HStackFull className="fixed top-0 left-0 right-0 h-[6vh] bg-gray-200/20 justify-between px-[1vh] md:px-[2vh] items-center rounded-none z-20">
      <Box className="tesla-font text-[2.1vh] tracking-[0.8vh]">TESLA-ISH</Box>
      <motion.div className="hidden lg:flex gap-[1vh] hover:cursor-pointer">
        <MenuItems
          setMenuType={setMenuType}
          setShowLargeMenu={setShowLargeMenu}
        />
      </motion.div>
      <Flex className="hidden lg:flex">
        <TeslaIconMenu />
      </Flex>
      <Box className="lg:hidden " onClick={() => setMenuOpen(true)}>
        <Flex className="py-[0.5vh] px-[1vh] bg-slate-400/40 text-[1.6vh] hover:cursor-pointer">
          Menu
        </Flex>
      </Box>
    </HStackFull>
  );
}


// FramerMotionModal.tsx
import { motion, AnimatePresence } from "framer-motion";
import React from "react";
import CenterHorizontalFull from "~/components/buildingBlocks/centerHorizontalFull";
import Flex from "~/components/buildingBlocks/flex";
import ModalContent from "~/components/buildingBlocks/modalContent";
import Portal from "~/components/buildingBlocks/portal";
import Wrap from "~/components/buildingBlocks/wrap";
import useEscapeKey from "~/utils/useEscapeKey";
import { MenuItems, MenuType } from "../tesla";
import HStack from "~/components/buildingBlocks/hStack";
import VStackFull from "~/components/buildingBlocks/vStackFull";
import VStack from "~/components/buildingBlocks/vStack";
import HStackFull from "~/components/buildingBlocks/hStackFull";
import Text from "~/components/buildingBlocks/text";
import Icon from "~/components/buildingBlocks/icon";
import { BsGlobe2 } from "react-icons/bs";
import { CgProfile } from "react-icons/cg";
import { AiOutlineQuestionCircle } from "react-icons/ai";
import Box from "~/components/buildingBlocks/box";
import TeslaNavMenu from "./teslaNavBar";
import TeslaMenuImagesWrap from "./teslaMenuImagesWrap";
import TeslaMenuContent from "./teslaMenuContent";

interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
  style?: React.CSSProperties;
  isOpen: boolean;
  modalSize?: string;
  setModalOpen: (isOpen: boolean) => void;
  onClose: () => void;
  children?: React.ReactNode;
  showTopClose?: boolean;
  showBottomClose?: boolean;
  overlayBlur?: string;
  overlayColor?: string;
  footerClassName?: string;
  overlayZIndex?: number;
  modalZIndex?: number;
  menuType?: MenuType;
  setMenuType: (menuType: MenuType) => void;
  setShowLargeMenu: (show: boolean) => void;
  setMenuOpen: (isOpen: boolean) => void;
}

export default function TeslaLargeScreenMenu({
  style = {},
  isOpen,
  modalSize = "w-full h-fit",
  onClose,
  children,
  setModalOpen,
  showTopClose = true,
  showBottomClose = true,
  overlayBlur = "defaultOverlayBlur",
  overlayColor = "defaultOverlay",
  footerClassName,
  menuType,
  setMenuType,
  setShowLargeMenu,
  setMenuOpen,

  ...props
}: ModalProps) {
  const variants = {
    open: {
      y: 0,
      opacity: 1,
      transition: { type: "spring", stiffness: 300, damping: 30 },
    },
    closed: {
      y: "-10%",
      opacity: 0,
      transition: { type: "spring", stiffness: 300, damping: 30 },
    },
  };

  useEscapeKey(() => onClose());

  function MenuItem({ text }: { text: string }) {
    return (
      <Flex className="p-[3vh] text-semibold font-[3vh] hover:cursor-pointer">
        {text}
      </Flex>
    );
  }

  return (
    <Portal>
      <AnimatePresence>
        {isOpen && (
          <>
            {/* Overlay */}
            <motion.div
              className={`fixed inset-0 w-screen h-screen rounded-none`}
              onClick={(event) => {
                event.preventDefault();
                event.stopPropagation();
                onClose();
              }}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              style={{ zIndex: 15, maxHeight: "100svh" }}
            />
            {/* Modal */}
            <motion.div
              className={`fixed inset-0 top-0 left-0 right-0 h-fit w-full mPlus-font`}
              style={{ ...style, zIndex: 17 }}
              variants={variants}
              initial="closed"
              animate="open"
              exit="closed"
              // eslint-disable-next-line @typescript-eslint/no-explicit-any
              {...(props as any)}
            >
              <CenterHorizontalFull className="h-fit bg-gray-200 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-1px_rgba(0,0,0,0.06)] py-[1.5vh] rounded-none">
                <VStackFull className="h-full justify-between p-[1vh] pt-[6vh] ">
                  <TeslaMenuContent menuType={menuType as MenuType} />
                </VStackFull>
              </CenterHorizontalFull>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </Portal>
  );
}

import { IoMdClose } from "react-icons/io";
import { CloseIcon } from "styles";
import Box from "~/components/buildingBlocks/box";
import FlexFull from "~/components/buildingBlocks/flexFull";
import Icon from "~/components/buildingBlocks/icon";
import Modal from "~/components/buildingBlocks/modal";
import VStackFull from "~/components/buildingBlocks/vStackFull";
import { MenuItems, MenuType } from "../tesla";
import VStack from "~/components/buildingBlocks/vStack";
import { TeslaIconMenu } from "./teslaNavBar";
import { useState } from "react";
import TeslaMenuContent from "./teslaMenuContent";
import HStackFull from "~/components/buildingBlocks/hStackFull";
import Text from "~/components/buildingBlocks/text";
import { FaChevronLeft } from "react-icons/fa";

export default function TeslaSmallScreenMenu({
  isOpen,
  setIsOpen,
  onClose,
}: {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
  onClose: () => void;
}) {
  const [menuType, setMenuType] = useState<MenuType | null>();
  const handleClose = () => {
    setMenuType(null);
    onClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      setModalOpen={setIsOpen}
      onClose={onClose}
      showBottomClose={false}
      showTopClose={false}
      modalSize="w-full h-full"
    >
      <VStackFull
        className="w-full h-screen overflow-y-auto bg-slate-100 rounded-none pb-[2vh] relative"
        gap="gap-[2vh]"
      >
        <HStackFull className="justify-between items-center px-[2vh] py-[1vh] fixed top-0 right-0 left-0 bg-slate-100">
          {menuType ? (
            <>
              <Box
                hoverCursor="hover:cursor-pointer"
                onClick={() => setMenuType(null)}
                className="p-[0.5vh] hover:bg-slate-300/80 transition-400"
              >
                <Icon icon={FaChevronLeft} iconClassName="text-[2.3vh]" />
              </Box>
              <Text className="text-[2.5vh] mPlus-font">{menuType} </Text>
            </>
          ) : (
            <Box
              className={`tesla-font text-[2.1vh] tracking-[0.8vh] p-[1vh] `}
            >
              TESLA-ISH
            </Box>
          )}
          <Box
            className="p-[0.5vh] hover:bg-slate-300/80 transition-400"
            onClick={onClose}
          >
            <Icon icon={IoMdClose} iconClassName="text-[3vh]" />
          </Box>
        </HStackFull>
        {!menuType ? (
          <FlexFull className="h-full">
            <VStackFull align="items-start px-[3vh] pt-[8vh]" gap="gap-[5vh]">
              <MenuItems setMenuType={setMenuType} isSmallMenu />
              <TeslaIconMenu />
            </VStackFull>
          </FlexFull>
        ) : (
          <TeslaMenuContent menuType={menuType as MenuType} />
        )}
      </VStackFull>
    </Modal>
  );
}

import Box from "~/components/buildingBlocks/box";
import HStack from "~/components/buildingBlocks/hStack";
import Image from "~/components/buildingBlocks/image";
import Text from "~/components/buildingBlocks/text";
import VStack from "~/components/buildingBlocks/vStack";
import Wrap from "~/components/buildingBlocks/wrap";

export default function TeslaMenuImagesWrap({
  images,
  largeMenu = true,
}: {
  images: { image: string; name: string }[];
  largeMenu?: boolean;
}) {
  return (
    <Wrap className="w-full pt-[6vh] pb-[3vh] gap-[2.5vh] justify-evenly">
      {images.map((image, i) => (
        <VStack className="hover:cursor-pointer" gap="gap-[0px]" key={i}>
          <Box
            className="h-[11vh] p-[1.5vh]"
            hoverCursor="hover:cursor-pointer"
          >
            <Image
              src={`https://mhejreuxaxxodkdlfcoq.supabase.co/storage/v1/render/image/public/darkVioletPublic/landing/${image.image}.png`}
              className="h-full w-auto"
              alt="product"
            />
          </Box>
          <Text className="font-semibold leading-[1.8vh]">{image.name}</Text>
          <HStack className="underline leading-[1.8vh]">
            <Text>Learn</Text>
            <Text>Order</Text>
          </HStack>
        </VStack>
      ))}
    </Wrap>
  );
}

import Flex from "~/components/buildingBlocks/flex";
import Text from "~/components/buildingBlocks/text";
import { MenuType } from "../tesla";
import TeslaMenuImagesWrap from "./teslaMenuImagesWrap";
import HStackFull from "~/components/buildingBlocks/hStackFull";
import VStack from "~/components/buildingBlocks/vStack";
import Transition from "~/components/buildingBlocks/transition";

export default function TeslaMenuContent({ menuType }: { menuType: MenuType }) {
  const contentLinkStyles =
    "hover:cursor-pointer hover:bg-slate-300/80 w-full px-[1.5vh] lg:hover:bg-transparent lg:px-[0.5vh] lg:w-fit lg:hover:underline transition-400 text-nowrap";
  return (
    <Flex className="flex-col pt-[2vh] lg:pt-[0px] w-full lg:flex-row lg:w-[90vw] xl:w-[80vw] xxl:w-[75vw] items-center lg:justify-between gap-[1.5vh]">
      <Text className="text-transparent hidden lg:flex">spacer</Text>
      {menuType === "vehicles" && (
        <Transition>
          <TeslaMenuImagesWrap
            images={[
              { image: "tesla-menu-model-a", name: "Model A" },
              { image: "tesla-menu-model-b", name: "Model B" },
              { image: "tesla-menu-model-c", name: "Model C" },
              { image: "tesla-menu-model-d", name: "Model D" },
              {
                image: "tesla-menu-pseudo-truck",
                name: "Pseudo Truck",
              },
            ]}
          />
        </Transition>
      )}
      {menuType === "energy" && (
        <Transition className="w-full">
          <TeslaMenuImagesWrap
            images={[
              {
                image: "tesla-menu-energy-one",
                name: "Solar Panels",
              },
              {
                image: "tesla-menu-energy-two",
                name: "Solar Roof",
              },
              {
                image: "tesla-menu-energy-three",
                name: "Powerwall",
              },
              {
                image: "tesla-menu-energy-four",
                name: "Megapower",
              },
            ]}
          />
        </Transition>
      )}
      {menuType === "charging" && (
        <Transition className="w-full">
          <TeslaMenuImagesWrap
            images={[
              {
                image: "tesla-menu-charging-one",
                name: "Charging",
              },
              {
                image: "tesla-menu-charging-two",
                name: "Home Charging",
              },
              {
                image: "tesla-menu-charging-three",
                name: "Super Charging",
              },
            ]}
          />
        </Transition>
      )}
      {menuType === "discover" && (
        <Transition className="w-full">
          <HStackFull className="h-full pt-[6vh] lg:pt-[2vh] justify-evenly">
            <VStack className="w-20%" align="items-start">
              <Text>Resources</Text> <Text>Demo</Text> <Text>Drive</Text>
              <Text>Insurance</Text> <Text>Video Guides</Text>{" "}
              <Text>Customer Stories</Text> <Text>Events</Text>
            </VStack>
            <VStack className="w-20%" align="items-start">
              <Text>Location Services</Text> <Text>Find Us</Text>{" "}
              <Text>Find a Collision Center</Text>
              <Text>Find a Certified Installer</Text>
            </VStack>
            <VStack className="w-20%" align="items-start">
              <Text>Company</Text> <Text>About</Text> <Text>Careers</Text>{" "}
              <Text>Investor</Text> <Text>Relations</Text>
            </VStack>
          </HStackFull>
          <Text className="text-transparent">spacer</Text>
        </Transition>
      )}
      {menuType === "shop" && (
        <Transition className="w-full">
          <TeslaMenuImagesWrap
            images={[
              {
                image: "tesla-menu-merch-one",
                name: "Charging",
              },
              {
                image: "tesla-menu-merch-two",
                name: "Vehicle Accessories",
              },
              {
                image: "tesla-menu-merch-three",
                name: "Apparel",
              },
              {
                image: "tesla-menu-merch-four",
                name: "Lifestyle",
              },
            ]}
          />
        </Transition>
      )}
      <Transition className="w-full lg:w-fit flex-shrink-0 mPlus-font font-semibold lg:font-[400]">
        <Flex className="w-full lg:w-fit ">
          <VStack
            gap="gap-[5vh] lg:gap-[0.1vh]"
            className={`${
              menuType === "discover" || menuType === "shop" ? "hidden" : "flex"
            } px-[3vh] text-[2vh] w-full lg:w-fit lg:text-[1.7vh] lg:px-[2vh] lg:border-l-[0.2vh] lg:border-l-stone-400 rounded-none h-fit border-t-[0.3vh] border-t-slate-300 lg:border-t-transparent pt-[3vh] lg:pt-[0px]`}
            align="items-start"
          >
            {menuType === "vehicles" &&
              [
                "Inventory",
                "Used Cars",
                "Demo Drive",
                "Trade-in",
                "Compare",
                "Help Me Charge",
                "Fleet",
                "Semi",
                "Roadster",
              ].map((item, index) => (
                <Text className={contentLinkStyles}>{item}</Text>
              ))}
            {menuType === "energy" &&
              [
                "Schedule a Consultation",
                "Solar Panels",
                "Solar Roof",
                "Powerwall",
                "Solar for New Roofs",
                "Why Solar",
                "Incentives",
                "Support",
                "Partner with Tesla",
                "Commercial",
                "Utilities",
              ].map((item, index) => (
                <Text className={contentLinkStyles}>{item}</Text>
              ))}
            {menuType === "charging" &&
              [
                "Help Me Charge",
                "Charging Calculator",
                "Charging With NACS",
                "Supercharger Voting",
                "Host a Supercharger",
                "Commercial Charging",
                "Host Wall Connectors",
              ].map((item, index) => (
                <Text className={contentLinkStyles}>{item}</Text>
              ))}
          </VStack>
        </Flex>
      </Transition>
    </Flex>
  );
}