continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1,196 @@
+//@ts-nocheck
+import { animate, AnimatePresence, cubicBezier, motion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+
+import { tabs } from "@/components/app/(home)/sections/hero-input/Tabs/Tabs";
+import { cn } from "@/utils/cn";
+import { Endpoint } from "@/components/shared/Playground/Context/types";
+
+export default function HeroInputTabsMobile(props: {
+  setTab: (tab: Endpoint) => void;
+  tab: Endpoint;
+  allowedModes?: Endpoint[];
+}) {
+  // Filter tabs based on allowedModes if provided
+  const visibleTabs = props.allowedModes
+    ? tabs.filter((tab) => props.allowedModes.includes(tab.value))
+    : tabs;
+
+  const activeTab = visibleTabs.find((tab) => tab.value === props.tab)!;
+  const [isOpen, setIsOpen] = useState(false);
+
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (window.innerWidth > 996) {
+      return;
+    }
+
+    document.addEventListener("click", (e) => {
+      if (ref.current && e.composedPath().includes(ref.current)) {
+        return;
+      }
+
+      setIsOpen(false);
+    });
+  }, []);
+
+  return (
+    <>
+      <button
+        className="py-8 px-10 flex items-center rounded-10 inside-border before:border-black-alpha-4 relative lg:hidden gap-4"
+        ref={ref}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <activeTab.icon size={24} alwaysHeat />
+        <div className="px-6 text-label-medium">{activeTab.label}</div>
+        <svg
+          className={cn(
+            "transition-all duration-200",
+            isOpen ? "rotate-180 text-accent-black" : "text-black-alpha-48",
+          )}
+          fill="none"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8.4001 10.2L12.0001 13.8L15.6001 10.2"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.25"
+          />
+        </svg>
+      </button>
+
+      <AnimatePresence mode="popLayout">
+        {isOpen && (
+          <motion.div
+            animate={{ opacity: 1, filter: "blur(0px)" }}
+            className="absolute z-[1001] top-[calc(100%-4px)] left-[calc(50%-(50vw-6px))] w-[calc(100vw-12px)]"
+            exit={{ opacity: 0, filter: "blur(2px)" }}
+            initial={{ opacity: 0, filter: "blur(2px)" }}
+            transition={{
+              duration: 0.2,
+              ease: cubicBezier(0.25, 0.1, 0.25, 1.0),
+            }}
+          >
+            <div
+              className="mx-auto w-full p-4 max-w-366 rounded-16 bg-accent-white"
+              style={{
+                boxShadow:
+                  "0 32px 40px 6px rgba(0, 0, 0, 0.02), 0 12px 32px 0 rgba(0, 0, 0, 0.02), 0 24px 32px -8px rgba(0, 0, 0, 0.02), 0 8px 16px -2px rgba(0, 0, 0, 0.02), 0 0 0 1px rgba(0, 0, 0, 0.04)",
+              }}
+            >
+              <div className="py-10 px-12 text-label-small text-black-alpha-48">
+                Output
+              </div>
+
+              <MenuItems
+                setTab={props.setTab}
+                tab={props.tab}
+                visibleTabs={visibleTabs}
+              />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}
+
+function MenuItems(props: {
+  tab: Endpoint;
+  setTab: (tab: Endpoint) => void;
+  visibleTabs: typeof tabs;
+}) {
+  const backgroundRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="relative">
+      <div
+        className="absolute top-0 opacity-0 left-0 bg-black-alpha-4 rounded-12 w-full pointer-events-none"
+        ref={backgroundRef}
+      />
+
+      {props.visibleTabs.map((tab) => (
+        <div
+          className="text-label-small select-none cursor-pointer flex gap-12 py-12 px-16"
+          key={tab.value}
+          onClick={() => {
+            animate(
+              backgroundRef.current!,
+              {
+                scaleX: [1, 0.99, 1],
+                scaleY: [1, 0.96, 1],
+                opacity: [1, 0.9, 1],
+              },
+              {
+                ease: cubicBezier(0.165, 0.84, 0.44, 1),
+                duration: 0.15,
+              },
+            );
+
+            props.setTab(tab.value);
+          }}
+          onMouseEnter={async (e) => {
+            const child = e.currentTarget as HTMLElement;
+
+            if (backgroundRef.current?.getBoundingClientRect().height === 0) {
+              backgroundRef.current!.style.height = child.offsetHeight + "px";
+            }
+
+            if (getComputedStyle(backgroundRef.current!).opacity === "0") {
+              await animate(
+                backgroundRef.current!,
+                {
+                  y: child.offsetTop,
+                },
+                {
+                  ease: cubicBezier(0.165, 0.84, 0.44, 1),
+                  duration: 0.01,
+                },
+              );
+            }
+
+            animate(backgroundRef.current!, { scale: 0.995 }).then(() =>
+              animate(backgroundRef.current!, { scale: 1 }),
+            );
+
+            animate(
+              backgroundRef.current!,
+              {
+                y: child.offsetTop,
+                opacity: 1,
+                height: child.offsetHeight + "px",
+              },
+              {
+                ease: cubicBezier(0.165, 0.84, 0.44, 1),
+                duration: 0.2,
+              },
+            );
+          }}
+          onMouseLeave={() => {
+            animate(
+              backgroundRef.current!,
+              {
+                opacity: 0,
+              },
+              {
+                ease: cubicBezier(0.165, 0.84, 0.44, 1),
+                duration: 0.2,
+              },
+            );
+          }}
+        >
+          <div className="size-24 p-2">
+            <tab.icon size={20} alwaysHeat />
+          </div>
+          <div className="px-6 text-label-medium">{tab.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
@@ -0,0 +1,183 @@
+import { animate } from "motion";
+import { Fragment, useRef } from "react";
+
+import EndpointsSearch from "@/components/app/(home)/sections/endpoints/EndpointsSearch/EndpointsSearch";
+import EndpointsCrawl from "@/components/app/(home)/sections/endpoints/EndpointsCrawl/EndpointsCrawl";
+import EndpointsMap from "@/components/app/(home)/sections/endpoints/EndpointsMap/EndpointsMap";
+import EndpointsScrape from "@/components/app/(home)/sections/endpoints/EndpointsScrape/EndpointsScrape";
+import EndpointsExtract from "@/components/app/(home)/sections/endpoints/EndpointsExtract/EndpointsExtract";
+
+import { cn } from "@/utils/cn";
+import Tooltip from "@/components/ui/shadcn/tooltip";
+import { Endpoint } from "@/components/shared/Playground/Context/types";
+
+export const tabs = [
+  {
+    label: "Scrape",
+    value: Endpoint.Scrape,
+    action: "scraping",
+    description:
+      "Scrapes only the specified URL without crawling subpages. Outputs the content from the page.",
+    icon: EndpointsScrape,
+  },
+  {
+    label: "Search",
+    value: Endpoint.Search,
+    description: "Search the web and get full content from results",
+    action: "searching",
+    icon: EndpointsSearch,
+    new: true,
+  },
+  {
+    label: "Map",
+    value: Endpoint.Map,
+    action: "mapping",
+    description: "Attempts to output all website's urls in a few seconds.",
+    icon: EndpointsMap,
+  },
+  {
+    label: "Crawl",
+    value: Endpoint.Crawl,
+    action: "crawling",
+    description:
+      "Crawls a URL and all its accessible subpages, outputting the content from each page.",
+    icon: EndpointsCrawl,
+  },
+  {
+    label: "Extract",
+    value: Endpoint.Extract,
+    action: "extracting",
+    description:
+      "Extract structured data from pages using LLMs. Provide URLs and a schema to get organized data.",
+    icon: EndpointsExtract,
+    new: true,
+  },
+];
+
+export default function HeroInputTabs(props: {
+  setTab: (tab: Endpoint) => void;
+  tab: Endpoint;
+  disabled?: boolean;
+  allowedModes?: Endpoint[];
+}) {
+  // Filter tabs based on allowedModes if provided
+  const visibleTabs = props.allowedModes
+    ? tabs.filter((tab) => props.allowedModes!.includes(tab.value))
+    : tabs;
+
+  const activeIndex = visibleTabs.findIndex((tab) => tab.value === props.tab);
+
+  const backgroundRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      className="bg-black-alpha-4 flex items-center rounded-10 p-2 relative lg-max:hidden"
+      style={{
+        boxShadow:
+          "0px 6px 12px 0px rgba(0, 0, 0, 0.02) inset, 0px 0.75px 0.75px 0px rgba(0, 0, 0, 0.02) inset, 0px 0.25px 0.25px 0px rgba(0, 0, 0, 0.04) inset",
+      }}
+    >
+      <div
+        className="absolute top-2 left-2 h-32 bg-accent-white rounded-8 w-89"
+        ref={backgroundRef}
+        style={{
+          boxShadow:
+            "0px 6px 12px -3px rgba(0, 0, 0, 0.04), 0px 3px 6px -1px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 0.5px 0.5px 0px rgba(0, 0, 0, 0.06)",
+        }}
+      />
+
+      {visibleTabs.map((tab, index) => (
+        <Fragment key={tab.value}>
+          {index > 0 && (
+            <div
+              className={cn(
+                "px-2 transition-all",
+                !(index !== activeIndex && index !== activeIndex + 1) &&
+                  "opacity-0",
+              )}
+            >
+              <div className="w-1 h-12 bg-black-alpha-5" />
+            </div>
+          )}
+
+          <button
+            className={cn(
+              "text-label-medium p-6 relative transition-all group flex items-center",
+              tab.value === props.tab
+                ? "text-accent-black"
+                : "text-black-alpha-56",
+              !tab.new && "pr-4",
+            )}
+            key={tab.value}
+            ref={(element) => {
+              if (element && backgroundRef.current) {
+                if (activeIndex === index) {
+                  animate(
+                    backgroundRef.current,
+                    {
+                      x: element.offsetLeft - 2,
+                      width: element.offsetWidth - 1,
+                    },
+                    {
+                      type: "spring",
+                      stiffness: 200,
+                      damping: 23,
+                    },
+                  );
+                }
+              }
+            }}
+            onClick={(e) => {
+              props.setTab(tab.value);
+
+              const t = e.target as HTMLElement;
+
+              const target =
+                t instanceof HTMLButtonElement
+                  ? t
+                  : (t.closest("button") as HTMLButtonElement);
+
+              if (backgroundRef.current) {
+                animate(backgroundRef.current, { scale: 0.975 }).then(() =>
+                  animate(backgroundRef.current!, { scale: 1 }),
+                );
+
+                animate(
+                  backgroundRef.current,
+                  {
+                    x: target.offsetLeft - 2,
+                    width: target.offsetWidth - 1,
+                  },
+                  {
+                    type: "spring",
+                    stiffness: 250,
+                    damping: 25,
+                  },
+                );
+              }
+            }}
+          >
+            {tab.icon && <tab.icon active={tab.value === props.tab} />}
+
+            <span className="px-6"> {tab.label}</span>
+
+            {tab.new && (
+              <div
+                className={cn(
+                  "py-2 px-6 rounded-4 text-[12px]/[16px] font-[450] transition-all",
+                  tab.value === props.tab
+                    ? "bg-heat-12 text-heat-100"
+                    : "bg-black-alpha-4 text-black-alpha-56",
+                )}
+              >
+                New
+              </div>
+            )}
+
+            <Tooltip delay={0.25} description={tab.description} offset={-8} />
+          </button>
+        </Fragment>
+      ))}
+    </div>
+  );
+}