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,84 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+
+import Globe from "./_svg/Globe";
+import HeroInputSubmitButton from "./Button/Button";
+import HeroInputTabsMobile from "./Tabs/Mobile/Mobile";
+import HeroInputTabs from "./Tabs/Tabs";
+import AsciiExplosion from "@/components/shared/effects/flame/ascii-explosion";
+import { Endpoint } from "@/components/shared/Playground/Context/types";
+
+export default function HeroInput() {
+  const [tab, setTab] = useState<Endpoint>(Endpoint.Scrape);
+  const [url, setUrl] = useState<string>("");
+
+  return (
+    <div className="max-w-552 mx-auto w-full z-[11] lg:z-[2] rounded-20 lg:-mt-76">
+      <div
+        className="overlay bg-accent-white"
+        style={{
+          boxShadow:
+            "0px 0px 44px 0px rgba(0, 0, 0, 0.02), 0px 88px 56px -20px rgba(0, 0, 0, 0.03), 0px 56px 56px -20px rgba(0, 0, 0, 0.02), 0px 32px 32px -20px rgba(0, 0, 0, 0.03), 0px 16px 24px -12px rgba(0, 0, 0, 0.03), 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 0px 0px 10px #F9F9F9",
+        }}
+      />
+
+      <label className="p-16 flex gap-8 items-center w-full relative border-b border-black-alpha-5">
+        <Globe />
+
+        <input
+          className="w-full bg-transparent text-body-input text-accent-black placeholder:text-black-alpha-48"
+          placeholder="https://example.com"
+          type="text"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              (
+                document.querySelector(
+                  ".hero-input-button",
+                ) as HTMLButtonElement
+              )?.click();
+            }
+          }}
+        />
+      </label>
+
+      <div className="p-10 flex justify-between items-center relative">
+        <HeroInputTabs
+          setTab={setTab}
+          tab={tab}
+          allowedModes={[
+            Endpoint.Scrape,
+            Endpoint.Search,
+            Endpoint.Map,
+            Endpoint.Crawl,
+          ]}
+        />
+
+        <HeroInputTabsMobile
+          setTab={setTab}
+          tab={tab}
+          allowedModes={[
+            Endpoint.Scrape,
+            Endpoint.Search,
+            Endpoint.Map,
+            Endpoint.Crawl,
+          ]}
+        />
+
+        <Link
+          className="contents"
+          href={`/playground?endpoint=${tab}&url=${url}&autorun=true`}
+        >
+          <HeroInputSubmitButton dirty={url.length > 0} />
+        </Link>
+      </div>
+
+      <div className="h-248 top-84 cw-768 pointer-events-none absolute overflow-clip -z-10">
+        <AsciiExplosion className="-top-200" />
+      </div>
+    </div>
+  );
+}